<template>
<view v-if="openState">
<!-- 品牌 -->
<uni-popup ref="brandscenter" type="center" @change="change"
:style="{height: MobilePhoneHeight +'px',width: MobilePhoneWidth +'px'}">
<view style="display: flex; flex-direction: column;">
<view :style="{height: MobilePhoneHeight +'px',width: MobilePhoneWidth +'px'}"
style="border-radius: 30upx; position: relative; overflow: hidden;">
<view class="board-container">
<!-- 遮罩 -->
<view class="board" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
:class="{'board-out':colorPanelShow}">
<canvas class="board-canvas" canvas-id="drawCanvas" disable-scroll="true"
@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
</view>
<!-- 工具 -->
<Toolbar :penColor="currentColor" @penWidthChange="penWidthChangeHandler"
@toolItemTap="toolItemTapHandler" @colorPickTap="colorPickTapHandler" :toolArr="toolArr"
style="position: fixed; bottom: 0; width: 100%; z-index: 101;"></Toolbar>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import Toolbar from '../../components/toolbar/toolbar.vue'
import uniPopup from './common/uni-popup/uni-popup.vue';
import Env from '@/util/Env.js';
export default {
components: {
Toolbar,
uniPopup
},
onShareAppMessage(res) {
return {
title: '你绝对看不出我画的是什么？',
path: '/pages/index/index'
}
},
data() {
return {
historylist: [],
colorPanelShow: false,
drawInfos: [],
curDrawArr: [],
startX: 0,
startY: 0,
drawContext: {},
currentColor: '#000',
begin: false,
bgColor: 'rgba(255, 255, 255, 0)',
toolArr: [
// {
// title: '清空',
// icon: '../../static/png/tool_clear.png',
// selectIcon: '../../static/png/tool_clear_s.png',
// select: false,
// url: 'clear'
// },
{
title: '撤销',
icon: '../../static/png/tool_eraser.png',
selectIcon: '../../static/png/tool_eraser.png',
select: false,
url: 'eraser'
},
// {
// title: '画笔',
// icon: '../../static/png/tool_pen.png',
// selectIcon: '../../static/png/tool_pen_s.png',
// select: true,
// url: 'pen'
// },
// {
// title: '颜色',
// icon: '../../static/png/tool_color.png',
// selectIcon: '../../static/png/tool_color_s.png',
// select: false,
// url: 'color'
// },
{
title: '确认',
icon: '../../static/png/icon_confirm.png',
selectIcon: '../../static/png/icon_confirm.png',
select: false,
url: 'save'
}
],
lineWidth: 6,
penMode: true,
rectMode: false,
hollowRectMode: false,
circleMode: false,
hollowCircleMode: false,
lastHollowRect: {},
lastHollowCircle: {},
MobilePhoneHeight: 0,
MobilePhoneWidth: 0,
pixelRate: 1,
data: {},
openState: false,
canvas_neto: []
}
},
onLoad() {
},
methods: {
uploadDIY(tempFilePaths) {
uni.showLoading({
title: '生成中...',
mask: true
})
var _this = this
wx.request({
url: Env.getDevBaseURL() + '/api/AliossSign/getSign',
method: 'GET',
data: '',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function(res) {
var atter = res.data
let time = new Date().getTime() + Math.floor((Math.random() * 1000) + 1)
wx.uploadFile({
url: atter.host.replace("http:", "https:"),
filePath: tempFilePaths,
name: 'file',
formData: {
'key': atter.dir + time + '.png',
'OSSAccessKeyId': atter.accessid,
'policy': atter.policy,
'Signature': atter.signature,
'success_action_status': '200',
'callback': atter.callback,
},
success: function(res) {
if (res.statusCode != 200) {
console.log({
errCode: '599',
msg: '其他错误'
})
return;
}
if (res.statusCode == 200) {
uni.showToast({
title: '生成涂鸦成功',
icon: 'none',
duration: 3000
})
// console.log(atter.host + '/' + atter.dir + time + '.png')
let url = atter.host + '/' + atter.dir + time + '.png'
_this.$emit('tuyaimg', url)
_this.$refs['brandscenter'].close()
_this.openState = false
}
},
fail: function(err) {
wx.showToast({
title: '生成涂鸦成功失败！',
icon: 'none',
duration: 1200
})
},
complete: function(err) {
// console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
}
})
}
})
},
change() {},
cancelBrand() {
this.clearDrawBoard()
this.$refs['brandscenter'].close()
this.openState = false
},
open(e) {
this.canvas_neto = []
this.currentColor = '#000'
this.lineWidth = 6
this.openState = true
this.data = e.data
//获取屏幕宽高
let that = this
wx.getSystemInfo({
success: function(res) {
that.MobilePhoneHeight = res.windowHeight // 屏幕高度
that.MobilePhoneWidth = res.windowWidth // 屏幕高度
that.pixelRate = res.windowWidth / 750;
},
})
this.$nextTick(() => {
this.$refs['brandscenter'].open()
setTimeout(function() {
this.drawContext = uni.createCanvasContext('drawCanvas', this);
this.initBoard();
this.fillWelcomeBackground(this.drawContext);
}.bind(this), 500)
})
},
colorPickTapHandler(obj) {
this.colorPanelShow = false;
this.toolArr.forEach(item => {
item.select = false;
if (item.title === '画笔') {
item.select = true;
}
})
this.rectMode = false;
this.hollowRectMode = false;
this.circleMode = false;
this.hollowCircleMode = false;
this.penMode = true;
this.currentColor = obj.color;
this.drawContext.strokeStyle = obj.color;
},
penWidthChangeHandler(width) {
this.lineWidth = width;
this.drawContext.setLineWidth(width);
this.drawContext.setLineCap('round') // 让线条圆润
},
toolItemTapHandler(index) {
const that = this;
let url = this.toolArr[index]['url'];
switch (url) {
case 'clear':
this.clearDrawBoard();
break;
case 'eraser':
this.canvas_restore()
// this.drawContext.strokeStyle = 'rgba(255, 255, 255, 0)';
this.colorPanelShow = false;
break;
case 'pen':
this.drawContext.strokeStyle = this.currentColor;
this.colorPanelShow = false;
this.rectMode = false;
this.hollowRectMode = false;
this.circleMode = false;
this.hollowCircleMode = false;
this.penMode = true;
break;
case 'color':
this.colorPanelShow = !this.colorPanelShow;
// this.drawMode = this.colorPanelShow ? false : true;
break;
case 'save':
if (that.canvas_neto.length < 1) {
that.cancelBrand();
return false
}
uni.canvasToTempFilePath({
canvasId: 'drawCanvas',
success: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
that.uploadDIY(res.tempFilePath);
// console.log('回调参数:' + JSON.stringify(res));
// 在H5平台下，tempFilePath 为 base64
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
// // console.log('成功回调参数:' + JSON.stringify(res));
// // that.$api.msgSuccess('保存成功');
// },
// fail: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
// // console.log('失败回调参数:' + JSON.stringify(res));
// // that.$api.msgSuccess('保存成功');
// }
// });
},
fail: function(res) {
console.log('fail' + JSON.stringify(res));
}
}, that)
break;
case 'close':
this.cancelBrand();
break;
// case 'hollowRect':
// this.hollowRectMode = true;
// this.rectMode = false;
// this.circleMode = false;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// // this.drawContext.restore();
// break;
// case 'hollowCircle':
// this.hollowRectMode = false;
// this.rectMode = false;
// this.circleMode = false;
// this.hollowCircleMode = true;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
// case 'rect':
// this.hollowRectMode = false;
// this.rectMode = true;
// this.circleMode = false;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
// case 'circle':
// this.hollowRectMode = false;
// this.rectMode = false;
// this.circleMode = true;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
default:
break;
}
if (url === 'clear' || url === 'save' || url === 'share' || url === 'close' || url === 'eraser') {
return;
}
this.toolArr.forEach((item, indexPath) => {
item.select = false;
if (indexPath === index) {
item.select = true;
}
})
},
clearDrawBoard() {
this.canvas_neto = []
this.initBoard();
this.fillBackground(this.drawContext);
},
initBoard() {
this.drawContext.setLineCap('round') // 让线条圆润
this.drawContext.strokeStyle = this.currentColor;
this.drawContext.setLineWidth(this.lineWidth);
},
touchStart(e) {
this.initBoard();
if (this.penMode) {
// console.log('我能够进行绘制--touchStart---x' + e.touches[0].x + '----y----' + e.touches[0].y);
this.lineBegin(e.touches[0].x, e.touches[0].y)
this.canvas_neto.push({
point_x: e.touches[0].x,
point_y: e.touches[0].y,
currentColor: this.currentColor,
lineWidth: this.lineWidth,
list: [],
})
this.draw(true);
} else if (this.rectMode) {
// this.rectBegin(e.touches[0].x, e.touches[0].y)
} else if (this.hollowRectMode) {
// this.hollowRectBegin(e.touches[0].x, e.touches[0].y)
} else if (this.hollowCircleMode) {
// this.hollowCircleBegin(e.touches[0].x, e.touches[0].y)
} else if (this.circleMode) {
// this.circleBegin(e.touches[0].x, e.touches[0].y)
}
this.curDrawArr.push({
x: e.touches[0].x,
y: e.touches[0].y
});
},
touchMove(e) {
if (this.begin) {
if (this.penMode) {
// console.log('我能够进行绘制--touchMove----x' + e.touches[0].x + '----y----' + e.touches[0].y);
this.lineAddPoint(e.touches[0].x, e.touches[0].y);
this.draw(true);
this.canvas_neto[this.canvas_neto.length - 1].list.push({
x: e.touches[0].x,
y: e.touches[0].y
})
} else if (this.rectMode) {
// this.drawRect(e.touches[0].x, e.touches[0].y, true);
} else if (this.hollowRectMode) {
// this.drawHollowRect(e.touches[0].x, e.touches[0].y, true);
} else if (this.hollowCircleMode) {
// this.drawHollowCircle(e.touches[0].x, e.touches[0].y, true);
} else if (this.circleMode) {
// this.drawCircle(e.touches[0].x, e.touches[0].y, true);
}
this.curDrawArr.push({
x: e.touches[0].x,
y: e.touches[0].y
});
}
},
touchEnd(e) {
// console.log('结束的坐标x:' + e.changedTouches[0].x + '结束的坐标y:' + e.changedTouches[0].y );
if (this.penMode) {
// console.log('我能够进行绘制--touchEnd----x' + e.changedTouches[0].x + '----y----' + e.changedTouches[0].y);
this.canvas_neto[this.canvas_neto.length - 1].list.push({
x: e.changedTouches[0].x,
y: e.changedTouches[0].y
})
this.curDrawArr = [];
this.lineEnd();
} else if (this.rectMode) {
// this.drawRect(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.hollowRectMode) {
// this.drawHollowRect(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.hollowCircleMode) {
// this.drawHollowCircle(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.circleMode) {
// this.drawCircle(e.changedTouches[0].x, e.changedTouches[0].y, true);
}
},
hollowRectBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
rectBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
hollowCircleBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
circleBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
/**
* 这里是画实体矩形
*/
// drawRect(x, y, isReverse) {
// let width = (x - this.startX) ? (x - this.startX) : (this.startX - x);
// let height = (y - this.startY) ? (y - this.startY) : (this.startY - y);
// this.drawContext.rect(this.startX, this.startY, width, height);
// this.drawContext.setFillStyle(this.currentColor);
// this.drawContext.fill();
// this.draw(isReverse);
// },
/**
* 这里是画空心矩形
* 方法是根据四个坐标点画
* 四条线进行连接
*/
// drawHollowRect(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let pointRT = {};
// let pointLB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// pointRT.X = pointRB.X;
// pointRT.Y = pointLT.Y;
// pointLB.X = pointLT.X;
// pointLB.Y = pointRB.Y;
// let width = (x - this.startX) ? (x - this.startX) : (this.startX - x);
// let height = (y - this.startY) ? (y - this.startY) : (this.startY - y);
// this.drawContext.rect(this.startX, this.startY, width, height);
// this.drawContext.setStrokeStyle(this.currentColor);
// this.drawContext.stroke();
// this.draw(isReverse);
// this.lastHollowRect = {
// x: this.startX,
// y: this.startY,
// width: Math.abs(width),
// height: Math.abs(height),
// pointLT: pointLT
// }
// this.clearLastHollowRect();
// },
// clearLastHollowRect() {
// console.log('上一个矩形对象:' + JSON.stringify(this.lastHollowRect));
// this.drawContext.clearRect(this.lastHollowRect.pointLT.X + this.lineWidth / 2, this.lastHollowRect.pointLT.Y + this
// .lineWidth / 2, this.lastHollowRect.width - this.lineWidth, this.lastHollowRect.height - this.lineWidth);
// },
// clearLastHollowCircle(x, y, r, cxt) { //(x,y)为要清除的圆的圆心，r为半径，cxt为context
// var stepClear = 1; //别忘记这一步
// clearArc(x, y, r);
// function clearArc(x, y, radius) {
// var calcWidth = radius - stepClear;
// var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
// var posX = x - calcWidth;
// var posY = y - calcHeight;
// var widthX = 2 * calcWidth;
// var heightY = 2 * calcHeight;
// if (stepClear <= radius) {
// cxt.clearRect(posX, posY, widthX, heightY);
// stepClear += 1;
// clearArc(x, y, radius);
// }
// }
// },
/**
* 这里是画
* 实心圆
*/
// drawCircle(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let pointRT = {};
// let pointLB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// pointRT.X = pointRB.X;
// pointRT.Y = pointLT.Y;
// pointLB.X = pointLT.X;
// pointLB.Y = pointRB.Y;
// center.X = (pointRB.X + pointLT.X) / 2;
// center.Y = (pointRB.Y + pointLT.Y) / 2;
// let dx = pointRB.X - pointLT.X;
// let dy = pointRB.Y - pointLT.Y;
// let r = Math.sqrt(dx * dx + dy * dy) / 2;
// // console.log('圆心坐标:' + JSON.stringify(center));
// // console.log('半径:' + JSON.stringify(r));
// this.drawContext.arc(center.X, center.Y, r, 0, 2 * Math.PI);
// this.drawContext.setFillStyle(this.currentColor);
// this.drawContext.fill();
// // this.drawContext.stroke();
// this.draw(isReverse);
// },
/**
* 这里是画
* 空心圆
*/
// drawHollowCircle(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// center.X = (pointRB.X + pointLT.X) / 2;
// center.Y = (pointRB.Y + pointLT.Y) / 2;
// let dx = pointRB.X - pointLT.X;
// let dy = pointRB.Y - pointLT.Y;
// let r = Math.sqrt(dx * dx + dy * dy) / 2;
// // console.log('圆心坐标:' + JSON.stringify(center));
// // console.log('半径:' + JSON.stringify(r));
// this.drawContext.arc(center.X, center.Y, r, 0, 2 * Math.PI);
// // this.drawContext.setFillStyle(this.currentColor);
// // this.drawContext.fill();
// this.drawContext.stroke();
// this.drawContext.beginPath();
// this.drawContext.arc(center.X, center.Y, r - this.lineWidth / 2, 0, 2 * Math.PI);
// this.drawContext.setFillStyle(this.bgColor);
// this.drawContext.fill();
// this.draw(isReverse);
// // this.clearLastHollowCircle(center.X, center.Y, r - this.lineWidth / 2, this.drawContext);
// },
// 开始绘制线条
lineBegin: function(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
this.drawContext.moveTo(this.startX, this.startY)
this.lineAddPoint(x, y);
},
// 绘制线条中间添加点
lineAddPoint: function(x, y) {
this.drawContext.moveTo(this.startX, this.startY)
this.drawContext.lineTo(x, y);
this.drawContext.stroke();
this.startX = x;
this.startY = y;
},
// 绘制线条结束
lineEnd: function() {
this.drawContext.closePath();
this.begin = false;
},
// canvas上下文设置背景为透明色
fillBackground: function(context) {
const query = uni.createSelectorQuery().in(this);
query.select('.board').boundingClientRect(data => {
// console.log("得到布局位置信息" + JSON.stringify(data));
context.setFillStyle(this.bgColor);
context.fillRect(0, 0, data.width, data.height); //TODO context的宽和高待定
context.fill();
context.draw();
}).exec();
},
// canvas上下文设置背景为透明色
fillWelcomeBackground: function(context) {
const query = uni.createSelectorQuery().in(this);
query.select('.board').boundingClientRect(data => {
// console.log("得到布局位置信息" + JSON.stringify(data));
context.setFillStyle(this.bgColor);
context.fillRect(0, 0, data.width, data.height); //TODO context的宽和高待定
context.fill();
let pikaqiuW = 318;
let pikaqiuH = 288;
let pikaqiuX = (data.width - 318) / 2;
let pikaqiuY = 80;
context.draw();
}).exec();
},
// 绘制canvas
// isReverse: 是否保留之前的像素
draw(isReverse = false, cb) {
this.drawContext.draw(isReverse, () => {
if (cb && typeof(cb) == "function") {
cb();
}
});
},
// 撤销方法
canvas_restore(e) {
// console.log(this.canvas_neto)
var that = this
var canvas_neto = that.canvas_neto
if (canvas_neto.length < 1) {
/* uni.showToast({
title: '不能再继续撤销了',
icon: 'none'
}); */
this.$refs['brandscenter'].close();
return false
}
this.drawContext.clearRect(0, 0, that.data.editorWidth, that.data.editorHeight)
canvas_neto.splice(canvas_neto.length - 1, 1);
for (let i = 0; i < canvas_neto.length; i++) {
this.drawContext.beginPath()
this.drawContext.moveTo(canvas_neto[i].point_x, canvas_neto[i].point_y)
this.drawContext.setLineCap('round') // 让线条圆润
this.drawContext.strokeStyle = canvas_neto[i].currentColor;
this.drawContext.setLineWidth(canvas_neto[i].lineWidth);
for (let j = 0; j < canvas_neto[i].list.length; j++) {
this.drawContext.lineTo(canvas_neto[i].list[j].x, canvas_neto[i].list[j].y)
this.drawContext.stroke()
}
}
this.drawContext.draw();
},
}
}
</script>
<style lang="scss">
.board-container {
height: 100%;
width: 100%;
.board {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transform: translateY(0);
display: block;
z-index: 100;
.board-canvas {
width: 100%;
height: 100%;
z-index: 100;
}
}
.board-out {
transform: translateY(100%);
display: none;
}
}
</style>