// pages/sketchpad.js
|
// 由于 currentBoard backgroundPic 需要在页面上使用 因此需要用setData
|
// 其余data中的数据 均未与页面同步
|
let tools = require('tools.js');
|
const ImgLoader = require('img-loader.js');
|
const FileCache = require('FileCache.js');
|
Component({
|
properties: {
|
addData: {
|
type: Object,
|
observer: function (newVal, oldVal) {
|
if (oldVal) {
|
this.addData(newVal);
|
}
|
}
|
}, // 添加data
|
user: {
|
type: String,
|
value: 'temp'
|
}, // 用户名
|
canDraw: {
|
type: Boolean,
|
value: false
|
}, // 能否画画
|
height: {
|
type: Number,
|
value: 211,
|
observer: function (newVal, oldVal) {
|
this.setData({
|
height: newVal
|
});
|
this.data.needDraw = true;
|
}
|
}, // 显示高度
|
width: {
|
type: Number,
|
value: 375,
|
observer: function (newVal, oldVal) {
|
this.setData({
|
width: newVal
|
});
|
this.data.needDraw = true;
|
}
|
}, // 显示宽度
|
horizontal: {
|
type: Boolean,
|
value: true,
|
observer: function (newVal, oldVal) {
|
this.setData({
|
horizontal: newVal
|
});
|
this.data.needDraw = true;
|
}
|
} // 是否水平
|
},
|
data: {
|
width: 375,
|
height: 211,
|
ctx: {}, // ctx
|
drawInterval: 0, // 画画计时器
|
sendInterval: 0, // 发消息计时器
|
sendData: [], // 要发送的消息
|
needDraw: true, // 是否需要重绘
|
data: {}, // 全部数据
|
userData: {}, // 用户维度的数据
|
backgroundPic: {
|
type: Object,
|
value: {},
|
observer: function (newVal, oldVal) {}
|
}, // 背景图
|
backgroundColor: '#ffffff',
|
currentBoard: '#DEFAULT', // 当前画板
|
boardList: ['#DEFAULT'], // 画板列表
|
seq: 0, // seq
|
color: 4278190335, // 默认颜色
|
thin: 100, // 默认画笔宽度
|
horizontal: true,
|
naturalWidth: 0,
|
naturalHeight: 0,
|
imgStyle: '',
|
maxSeq: 0
|
},
|
ready: function () {
|
this.init();
|
this.imgLoader = new ImgLoader(this);
|
// this.fileCache = new FileCache();
|
},
|
|
detached() {
|
clearInterval(this.data.sendInterval);
|
clearInterval(this.data.drawInterval);
|
},
|
|
methods: {
|
findLine(boardId, user, action) {
|
var userData = this.data.userData[boardId][user];
|
var line;
|
for (let i = 0, len = userData.length; i < len; i++) {
|
const element = userData[i];
|
if (element.type === 'line' && element.belongSeq == action.belongSeq) { // 并是同一根线条
|
line = element;
|
break;
|
}
|
}
|
return line;
|
},
|
|
addData: function (data) {
|
if (!data.value) {
|
return;
|
}
|
let user = data.value.operator;
|
let actions = data.value.actions;
|
let boardId = data.value.boardId;
|
|
if (!this.data.userData[boardId]) {
|
this.initBoard(boardId);
|
}
|
if (!this.data.userData[boardId][user]) {
|
this.data.userData[boardId][user] = [];
|
}
|
let length = this.data.userData[boardId][user].length;
|
actions.forEach((action) => {
|
action.color && (action.color = tools.dealColor(action.color));
|
if (action.action == 1) {
|
// let line = new tools.Line(user, action);
|
// line.show = true;
|
// this.data.userData[boardId][user].push(line);
|
// this.data.data[boardId].push(line);
|
// length++;
|
|
var line;
|
// 找到这条线了，这种情况是action = 2 || 3 先收到的情况
|
if (line = this.findLine(boardId, user, action)) {
|
line.color = action.color;
|
line.thin = action.thin;
|
line.show = true;
|
line.lines.push({
|
x: action.x,
|
y: action.y,
|
belongSeq: action.belongSeq,
|
seq: action.seq
|
});
|
line.sort();
|
line.setBorder(action.x, action.y);
|
} else { // 找不到这条线, 就新增
|
// 开始画线
|
line = new tools.Line(user, action);
|
line.show = true;
|
this.data.userData[boardId][user].push(line);
|
this.data.data[boardId].push(line);
|
}
|
|
} else if (action.action == 2 || action.action == 3) {
|
// if (length == 0) {
|
// return;
|
// }
|
// let line = this.data.userData[boardId][user][length - 1];
|
// line.lines.push({
|
// x: action.x,
|
// y: action.y,
|
// seq: action.seq
|
// });
|
// line.setBorder(action.x, action.y);
|
// if (action.action == 3) {
|
// line.endSeq = action.seq;
|
// }
|
|
var line;
|
if (line = this.findLine(boardId, user, action)) { // 找到了这条线，说明消息action=1先到
|
line.lines.push({
|
x: action.x,
|
y: action.y,
|
belongSeq: action.belongSeq,
|
seq: action.seq
|
});
|
line.sort();
|
line.setBorder(action.x, action.y);
|
} else { // 没找着，则说明action=1还没有到
|
// 开始画线
|
line = new tools.Line(user, action);
|
this.data.userData[boardId][user].push(line);
|
this.data.data[boardId].push(line);
|
}
|
if (action.action == 3) {
|
line.endSeq = action.seq;
|
}
|
} else if (action.action == 8) {
|
if (!action.lines)
|
return;
|
action.lines.forEach((line) => {
|
if (!this.data.userData[boardId][line.uid])
|
return;
|
for (var i = 0; i < this.data.userData[boardId][line.uid].length; i++) {
|
var item = this.data.userData[boardId][line.uid][i];
|
if (item.type == 'line' && item.startSeq == line.seq) {
|
item.show = action.display ?
|
true :
|
false;
|
} else if (item.type == 'graph' && item.startPoint.seq == line.seq) {
|
item.show = action.display ?
|
true :
|
false;
|
}
|
}
|
});
|
} else if (action.action == 10 || action.action == 11 || action.action == 12) {
|
let list = {
|
10: 'line',
|
11: 'oval',
|
12: 'rect'
|
};
|
action.graph = list[action.action];
|
action.beginPoint.x = action.beginPoint.x;
|
action.endPoint.x = action.endPoint.x;
|
action.beginPoint.y = action.beginPoint.y;
|
action.endPoint.y = action.endPoint.y;
|
action.solid = action.fillRect ?
|
true :
|
false;
|
action.show = true;
|
var graph = new tools.Graph(user, action);
|
|
this.data.userData[boardId][user].push(graph);
|
this.data.data[boardId].push(graph);
|
length++;
|
} else if (action.action == 101) {
|
this.clear();
|
} else if (action.action == 201) {
|
this.setBackgroundPic(boardId, action.url);
|
} else if (action.action == 202) {
|
this.cancelBackgroundPic(boardId);
|
} else if (action.action == 401) {
|
if (action.seq * 1 > this.data.maxSeq) {
|
this.setData({
|
maxSeq: action.seq
|
}, () => {
|
let toBoardId = action.toBoardId;
|
if (!this.data.data[toBoardId]) {
|
this.initBoard(toBoardId);
|
}
|
action.deleteBoards.forEach((deleteBoardId) => {
|
this.removeBoard(deleteBoardId);
|
})
|
this.setData({
|
currentBoard: boardId
|
})
|
this.data.needDraw = true;
|
});
|
} else { // seq小于maxSeq的说明是消息乱序收到的，直接丢弃
|
// console.log('===401 乱序 seq:', action.seq);
|
}
|
}
|
});
|
this.data.needDraw = true;
|
},
|
|
updateCurrentBoard(currentBoard) {
|
this.data.currentBoard = currentBoard;
|
},
|
|
addHistory: function () {}, // 这版暂无历史消息
|
setBackgroundPic: function (boardId, url) {
|
let self = this;
|
let temp = {};
|
temp.url = url;
|
temp.show = true;
|
|
if (this.data.currentBoard == boardId) {
|
// wx.showLoading({title: '图片加载中'}); // 因为提示在整体UI的中心，randewang 建议屏蔽不要提示
|
}
|
// this.fileCache.load(url, function (res) {
|
// if (res.code) {
|
// console.error('图片加载失败:', res.errMsg);
|
// return;
|
// }
|
// console.log('图片加载完成', res.tmpFilePath);
|
// temp[boardId].url = res.tmpFilePath;
|
// self.setData({backgroundPic: temp});
|
// })
|
|
this.imgLoader.load(url, (err, data) => {
|
console.log('图片加载完成', err, data.src)
|
//不管成功或者失败都都加入进去，缓存的失败不一定代表真正的失败
|
self.data.backgroundPic[boardId] = temp;
|
this.setData({
|
backgroundPic: self.data.backgroundPic
|
});
|
});
|
wx.hideLoading();
|
this.data.needDraw = true;
|
},
|
cancelBackgroundPic: function (boardId) {
|
let temp = Object.assign({}, this.data.backgroundPic);
|
temp[boardId].show = false;
|
this.setData({
|
backgroundPic: temp
|
});
|
this.data.needDraw = true;
|
},
|
initBoard: function (boardId) {
|
this.data.userData[boardId] = {};
|
this.data.userData[boardId][this.properties.user] = [];
|
this.data.data[boardId] = [];
|
let temp = Object.assign({}, this.data.backgroundPic);
|
temp[boardId] = {
|
url: '',
|
user: this.properties.user,
|
show: true
|
};
|
this.setData({
|
backgroundPic: temp
|
});
|
this.data.boardList.push(boardId);
|
},
|
removeBoard: function (boardId) {
|
delete this.data.userData[boardId];
|
delete this.data.data[boardId];
|
if (this.data.boardList.indexOf(boardId) > -1) {
|
this.data.boardList.splice(this.data.boardList.indexOf(boardId), 1);
|
}
|
},
|
getEventLocation: function (event) {
|
let result = {
|
x: 0,
|
y: 0
|
}
|
result.x = event.changedTouches[0]['x'];
|
result.y = event.changedTouches[0]['y'];
|
|
if (this.data.horizontal) {
|
// 要转一下x y
|
result.x = parseInt(result.x / this.data.width * 10000);
|
// 16:9
|
result.y = parseInt(result.y / this.data.height * 10000);
|
} else {
|
result.x = parseInt(result.x / this.data.height * 10000);
|
// 16:9
|
result.y = parseInt(result.y / this.data.width * 10000);
|
}
|
console.log('width', this.data.width, this.data.height);
|
return result;
|
},
|
draw: function () {
|
var self = this;
|
// 先清空画板
|
//this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
|
if (this.data.backgroundPic[this.data.currentBoard].url && this.data.backgroundPic[this.data.currentBoard].show) {
|
self.updateImgStyle();
|
// 这里canvas就不画背景了
|
this.data.ctx.draw();
|
} else {
|
this.data.ctx.setFillStyle(this.data.backgroundColor);
|
this.data.ctx.fillRect(0, 0, this.data.width, this.data.height);
|
this.data.ctx.draw();
|
}
|
// 遍历data
|
this.data.data[this.data.currentBoard].forEach((item) => {
|
if (item.type == 'line' && item.show) {
|
let oldx = 0,
|
oldy = 0;
|
if (this.data.horizontal) {
|
oldx = item.lines[0].x / 10000 * this.data.width
|
oldy = item.lines[0].y / 10000 * this.data.height;
|
} else {
|
oldx = (10000 - item.lines[0].y) / 10000 * this.data.height;
|
oldy = item.lines[0].x / 10000 * this.data.width;
|
}
|
|
item.lines.forEach((lineItem) => {
|
// 按照上次的位置和这次的位置画线
|
this.data.ctx.beginPath();
|
if (!this.data.horizontal) { // 垂直方向
|
this.data.ctx.moveTo(oldx, oldy);
|
} else {
|
this.data.ctx.moveTo(oldx, oldy);
|
}
|
|
let tempx = 0,
|
tempy = 0;
|
|
if (this.data.horizontal) {
|
tempx = lineItem.x / 10000 * this.data.width;
|
tempy = lineItem.y / 10000 * this.data.height;
|
} else {
|
tempx = (10000 - lineItem.y) / 10000 * this.data.height;
|
tempy = lineItem.x / 10000 * this.data.width;
|
}
|
|
// if (this.data.horizontal) {
|
// this.data.ctx.lineTo(tempx, tempy);
|
// } else {
|
// this.data.ctx.lineTo(tempx, tempy);
|
// }
|
|
this.data.ctx.lineTo(tempx, tempy);
|
|
this.data.ctx.setStrokeStyle(item.color);
|
let thin = this.data.horizontal ?
|
item.thin / 10000 * this.data.height :
|
item.thin / 10000 * this.data.width;
|
|
this.data.ctx.setLineWidth(thin);
|
this.data.ctx.setLineCap("round");
|
this.data.ctx.stroke();
|
// 更新参数
|
oldx = tempx;
|
oldy = tempy;
|
});
|
} else if (item.type == 'graph' && item.show) {
|
// let startX = this.data.horizontal ?
|
// item.startPoint.x / 10000 * this.data.width :
|
// ((10000 - item.startPoint.x) / 10000 * this.data.width);
|
// let startY = item.startPoint.y / 10000 * this.data.height;
|
|
// let endX = this.data.horizontal ?
|
// item.endPoint.x / 10000 * this.data.width :
|
// ((10000 - item.endPoint.x) / 10000 * this.data.width);
|
// let endY = item.endPoint.y / 10000 * this.data.height;
|
|
let startX = 0,
|
startY = 0;
|
let endX = 0,
|
endY = 0;
|
|
if (this.data.horizontal) {
|
startX = item.startPoint.x / 10000 * this.data.width;
|
startY = item.startPoint.y / 10000 * this.data.height;
|
|
endX = item.endPoint.x / 10000 * this.data.width;
|
endY = item.endPoint.y / 10000 * this.data.height;
|
} else {
|
startX = (10000 - item.startPoint.y) / 10000 * this.data.height;
|
startY = item.startPoint.x / 10000 * this.data.width;
|
|
endX = (10000 - item.endPoint.y) / 10000 * this.data.height;
|
endY = item.endPoint.x / 10000 * this.data.width;
|
}
|
|
if (item.graph == 'line') { // 画直线
|
this.data.ctx.beginPath();
|
// if (!this.data.horizontal) {
|
// this.data.ctx.moveTo(startY, startX);
|
// this.data.ctx.lineTo(endY, endX);
|
// } else {
|
// this.data.ctx.moveTo(startX, startY);
|
// this.data.ctx.lineTo(endX, endY);
|
// }
|
|
this.data.ctx.moveTo(startX, startY);
|
this.data.ctx.lineTo(endX, endY);
|
|
this.data.ctx.setStrokeStyle(item.color);
|
let thin = this.data.horizontal ?
|
item.thin / 10000 * this.data.height :
|
item.thin / 10000 * this.data.width;
|
this.data.ctx.setLineWidth(thin);
|
this.data.ctx.setLineCap("round");
|
this.data.ctx.stroke();
|
} else if (item.graph == 'rect') {
|
let x = startX > endX ?
|
endX :
|
startX;
|
let y = startY > endY ?
|
endY :
|
startY;
|
let diffX = startX + endX - x * 2;
|
let diffY = startY + endY - y * 2;
|
this.data.ctx.setStrokeStyle(item.color);
|
let thin = this.data.horizontal ?
|
item.thin / 10000 * this.data.height :
|
item.thin / 10000 * this.data.width;
|
this.data.ctx.setLineWidth(thin);
|
console.log('画矩形');
|
if (item.solid) {
|
console.log('实心');
|
this.data.ctx.setFillStyle(item.color);
|
// if (!this.data.horizontal) {
|
// this.data.ctx.fillRect(y, x, diffY, diffX);
|
// } else {
|
// this.data.ctx.fillRect(x, y, diffX, diffY);
|
// }
|
this.data.ctx.fillRect(x, y, diffX, diffY);
|
} else {
|
console.log('空心');
|
// if (!this.data.horizontal) {
|
// this.data.ctx.strokeRect(y, x, diffY, diffX);
|
// } else {
|
// this.data.ctx.strokeRect(x, y, diffX, diffY);
|
// }
|
this.data.ctx.strokeRect(x, y, diffX, diffY);
|
}
|
} else if (item.graph == 'circle' || item.graph == 'oval') {
|
let x = (startX + endX) / 2;
|
let y = (startY + endY) / 2;
|
let a = Math.abs(startX - endX) / 2;
|
let b = Math.abs(startY - endY) / 2;
|
this.data.ctx.setStrokeStyle(item.color);
|
let thin = this.data.horizontal ?
|
item.thin / 10000 * this.data.height :
|
item.thin / 10000 * this.data.width;
|
this.data.ctx.setLineWidth(thin);
|
// if (!this.data.horizontal) {
|
// this.drawEllipse2(this.data.ctx, y, x, b, a, item.solid, item.color);
|
// } else {
|
// this.drawEllipse2(this.data.ctx, x, y, a, b, item.solid, item.color);
|
// }
|
this.drawEllipse2(this.data.ctx, x, y, a, b, item.solid, item.color);
|
this.data.ctx.stroke();
|
}
|
}
|
});
|
this.data.ctx.draw(true);
|
},
|
drawEllipse: function (context, x, y, a, b, fill, color) {
|
context.save();
|
let r = (a > b) ?
|
a :
|
b;
|
let ratioX = a / r;
|
let ratioY = b / r;
|
context.beginPath();
|
context.scale(ratioX, ratioY);
|
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
|
context.closePath();
|
if (fill) {
|
context.fillStyle = color;
|
context.fill();
|
}
|
context.restore();
|
},
|
drawEllipse2: function (context, x, y, a, b, fill, color) {
|
var step = (a > b) ?
|
1 / a :
|
1 / b;
|
context.beginPath();
|
context.moveTo(x + a, y);
|
for (var i = 0; i < 2 * Math.PI; i += step) {
|
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
|
}
|
context.closePath();
|
if (fill) {
|
context.fillStyle = color;
|
context.fill();
|
}
|
},
|
start: function (e) {
|
if (!this.properties.canDraw) {
|
return;
|
}
|
let {
|
x,
|
y
|
} = this.getEventLocation(e);
|
let line = new tools.Line(this.properties.user, {
|
color: this.data.color,
|
thin: this.data.thin,
|
x: x,
|
y: y,
|
show: true,
|
seq: this.getSeq()
|
})
|
this.data.userData[this.data.currentBoard][this.properties.user].push(line);
|
this.data.data[this.data.currentBoard].push(line);
|
this.data.sendData.push({
|
"action": 1,
|
"color": tools.formatColor(this.data.color),
|
"scale": 100,
|
"thin": this.data.thin,
|
"time": parseInt(+new Date() / 1000),
|
"seq": line.seq,
|
"x": this.data.horizontal ?
|
x : y,
|
"y": this.data.horizontal ?
|
y : x
|
});
|
},
|
move: function (e) {
|
if (!this.properties.canDraw) {
|
return;
|
}
|
let {
|
x,
|
y
|
} = this.getEventLocation(e);
|
let length = this.data.userData[this.data.currentBoard][this.properties.user].length;
|
let line = this.data.userData[this.data.currentBoard][this.properties.user][length - 1];
|
let lastPoint = line.lines[line.lines.length - 1];
|
|
this.data.ctx.beginPath();
|
this.data.ctx.moveTo(lastPoint.x / 10000 * this.data.width, lastPoint.y / 10000 * this.data.height);
|
this.data.ctx.lineTo(x / 10000 * this.data.width, y / 10000 * this.data.height);
|
this.data.ctx.setStrokeStyle(this.data.color);
|
let thin = this.data.horizontal ?
|
this.data.thin / 10000 * this.data.height :
|
this.data.thin / 10000 * this.data.width;
|
this.data.ctx.setLineWidth(thin);
|
this.data.ctx.setLineCap('round');
|
this.data.ctx.stroke();
|
|
this.data.ctx.draw(true);
|
|
line.setBorder(x, y);
|
let seq = this.getSeq();
|
line.lines.push({
|
x: x,
|
y: y,
|
seq: seq
|
});
|
this.data.sendData.push({
|
"action": 2,
|
"seq": seq,
|
"x": this.data.horizontal ?
|
x : y,
|
"y": this.data.horizontal ?
|
y : x
|
});
|
},
|
end: function (e) {
|
if (!this.properties.canDraw) {
|
return;
|
}
|
let {
|
x,
|
y
|
} = this.getEventLocation(e);
|
let length = this.data.userData[this.data.currentBoard][this.properties.user].length;
|
let line = this.data.userData[this.data.currentBoard][this.properties.user][length - 1];
|
line.setBorder(x, y);
|
let seq = this.getSeq();
|
line.lines.push({
|
x: x,
|
y: y,
|
seq: seq
|
});
|
this.data.sendData.push({
|
"action": 3,
|
"seq": seq,
|
"x": this.data.horizontal ?
|
x : y,
|
"y": this.data.horizontal ?
|
y : x
|
});
|
},
|
clear: function () {
|
this.data.data[this.data.currentBoard] = [];
|
this.data.userData[this.data.currentBoard] = {};
|
this.data.userData[this.data.currentBoard][this.properties.user] = [];
|
let temp = Object.assign({}, this.data.backgroundPic);
|
temp[this.data.currentBoard] = {
|
url: '',
|
user: '',
|
show: true
|
};
|
this.setData({
|
backgroundPic: temp
|
});
|
this.data.color = tools.dealColor(4278190335);
|
this.data.thin = 100;
|
this.needDraw = true;
|
},
|
init: function () {
|
// 修改color
|
this.data.color = tools.dealColor(this.data.color);
|
this.data.data[this.data.currentBoard] = [];
|
this.data.userData[this.data.currentBoard] = {};
|
this.data.userData[this.data.currentBoard][this.properties.user] = [];
|
let temp = Object.assign({}, this.data.backgroundPic);
|
temp[this.data.currentBoard] = {
|
url: '',
|
user: '',
|
show: true
|
};
|
this.setData({
|
backgroundPic: temp
|
})
|
this.data.ctx = wx.createCanvasContext('sketchpad', this);
|
// 计时器
|
this.data.drawInterval = setInterval(() => {
|
if (this.data.needDraw) {
|
this.draw();
|
this.data.needDraw = false;
|
}
|
}, 50);
|
|
this.data.sendInterval = setInterval(() => {
|
if (this.data.sendData.length > 0) {
|
this.triggerEvent('send', this.data.sendData, {});
|
this.setData({
|
sendData: []
|
});
|
}
|
}, 200);
|
|
},
|
getSeq: function () {
|
let time = parseInt(+new Date() / 1000, 10);
|
return time * Math.pow(2, 15) + (this.data.seq++);
|
},
|
|
imgLoaded(event) {
|
this.setData({
|
naturalWidth: event.detail.width,
|
naturalHeight: event.detail.height
|
}, () => {
|
this.data.needDraw = true;
|
});
|
},
|
|
updateImgStyle() {
|
var style = [];
|
if (this.data.horizontal) { // 水平方向
|
style = ['left: 50%', 'transform: translate(-50%, -50%)', 'top: 50%'];
|
if (this.data.width / this.data.height < this.data.naturalWidth / this.data.naturalHeight) {
|
style.push('width:100%');
|
style.push('height:' + (this.data.width / this.data.naturalWidth * this.data.naturalHeight) + 'px');
|
} else {
|
style.push('width:' + this.data.height / this.data.naturalHeight * this.data.naturalWidth + 'px');
|
style.push('height:100%');
|
}
|
} else {
|
if (this.data.width / this.data.height < this.data.naturalWidth / this.data.naturalHeight) {
|
style.push('top: 0');
|
style.push('width:' + this.data.width + 'px');
|
var height = (this.data.width / this.data.naturalWidth * this.data.naturalHeight);
|
style.push('height:' + height + 'px');
|
style.push('left:' + (this.data.height + height) / 2 + 'px');
|
} else {
|
style.push('left: ' + this.data.height + 'px');
|
var width = this.data.height / this.data.naturalHeight * this.data.naturalWidth;
|
style.push('width:' + width + 'px');
|
style.push('height:' + this.data.height + 'px');
|
style.push('top:' + (this.data.width - width) / 2 + 'px');
|
}
|
}
|
this.setData({
|
imgStyle: style.join(';')
|
});
|
}
|
}
|
})
|
