前言
本例是基於cocos官方推薦raphael實現的。其中畫板與看板的同步處理我採用的是在畫板畫完一條線之後看板再同步資料來顯示畫線過程。
一、實現效果如下：
二、畫板核心程式碼
1、初始化畫板引數
onLoad: function () {
// 初始化引數
this.lineWidth = 5;
this.strokeColor = cc.color(0, 0, 0);
this.isClearMode = false;
this.group = this.addComponent('R.group');
// 繫結觸控通知事件通知
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
onTouchBegan: this.onTouchBegan.bind(this),
onTouchMoved: this.onTouchMoved.bind(this),
onTouchEnded: this.onTouchEnded.bind(this),
}, this.node);
},複製程式碼需要注意的事項：
① 本例使用的是 raphael 庫的 group 的概念來處理的畫板中的線
2、觸控開始事件回撥處理
onTouchBegan: function (touch, event) {
// 初始一條線的資料
this.dataDict = {};
this.dataDict.dataEvent = 'draw';
// 獲取開始時間點
this.dataDict.startTime = new Date().getTime();
// 獲取觸控點資料
var touchLoc = touch.getLocation();
touchLoc = this.node.parent.convertToNodeSpaceAR(touchLoc);
// 從group獲取一條Path例項
var path = this.group.addPath();
path.fillColor = 'none';
// 判斷是否是橡皮擦狀態
if (this.isClearMode) {
path.lineWidth = 15;
path.strokeColor = cc.color(255, 255, 255);
} else {
path.lineWidth = this.lineWidth;
path.strokeColor = this.strokeColor;
}
this.dataDict.strokeColor = path.strokeColor.toHEX("#rrggbb");
this.dataDict.lineWidth = path.lineWidth;
// 初始化點陣列，並賦值開始位置的點
this.points = [touchLoc];
return true;
},複製程式碼需要注意的事項：
① 橡皮擦處理的方式是用與畫板背景色相同的顏色畫線，並加粗線的寬度來實現的。
② this.dataDict 記錄的資料是為了通過 webSocket 傳遞到看板，來使看板同步畫線。
3、觸控移動事件處理
onTouchMoved: function (touch, event) {
// 獲取觸控點資料
var touchLoc = touch.getLocation();
touchLoc = this.node.parent.convertToNodeSpaceAR(touchLoc);
// 新增到點陣列內
this.points.push(touchLoc);
// 獲取當前畫的path例項，並更新內部展現點資料
var path = this.group.children[this.group.children.length - 1];
path.points(this.points);
},複製程式碼需要注意的事項：
① 每次獲取的都是group中最新的一條path去畫。
4、觸控事件結束處理
onTouchEnded: function(touch, event) {
// 獲取觸控點資料
var path = this.group.children[this.group.children.length - 1];
path.points(this.points);
// 獲取結束時間點
this.dataDict.endTime = new Date().getTime();
// 將點陣列轉化為相對於node寬高的對映位置
this.pointDicts = [];
for (var i = 0; i < this.points.length; i++) {
let point = this.points[i];
var pointDict = {};
pointDict.x = point.x / this.node.width;
pointDict.y = point.y / this.node.height;
this.pointDicts.push(pointDict);
}
this.dataDict.points = this.pointDicts;
let sendData = this.dataDict;
// 本地測試同步資料
// this.lookDraw.startDraw(sendData);
// 網路同步資料
if (window.room_user) {
var drawAction = gameAction.getDrawDataAction(window.room_user, sendData)
happySocket.sendData(drawAction)
}
},複製程式碼需要注意的事項：
① 首先為了適應不同的螢幕，需要獲取到實際畫點的相對於寬高的對映點。
② 本地測試與網路同步資料可根據自己專案做相應的處理。
③ 也可在本地搭建webSocket去模擬實際伺服器傳輸，可以看這裡。
4、其他處理（比如清屏、橡皮擦）
// 清屏
clearAll: function() {
this.group.ctx.clear();
this.group.children = [];
this.isClearMode = false;
// 初始化清屏的資料
this.dataDict = {};
this.dataDict.dataEvent = 'clear';
let sendData = this.dataDict;
// 本地測試同步資料
// this.lookDraw.startDraw(sendData);
// 網路同步資料
if (window.room_user) {
var drawAction = gameAction.getDrawDataAction(window.room_user, sendData)
happySocket.sendData(drawAction)
}
},
// 橡皮擦
rubber: function() {
this.isClearMode = true;
},複製程式碼需要注意的事項：
① 清屏的action會放入看板事件佇列中，在畫完最後一條線後執行。具體看看板程式碼。
三、看板核心程式碼
1、初始化引數（要與畫板保持一致）
onLoad: function () {
// 初始化資料
this.lineWidth = 5;
this.strokeColor = cc.color(0, 0, 0);
this.isClearMode = false;
this.group = this.addComponent('R.group');
this.time = 3.0;
this.duration = 1.0;
this.pathArray = [];
// 監聽畫板資料
happyDispatch.addEventListener('happyAction', this.receiveData, this);
},複製程式碼需要注意的事項：
① this.pathArray 為畫線的事件佇列。
2、開始畫線
// 開始畫線
startDraw: function (dataDict) {
// 判斷是否是清屏
if (dataDict.dataEvent === 'clear') {
this.pathArray.push(dataDict);
return;
}
// 初始化線
let path = this.group.addPath();
path.strokeColor = cc.color(0, 0, 0).fromHEX(dataDict.strokeColor);
path.lineWidth = dataDict.lineWidth;
path.fillColor = 'none';
// 對映還原點
var pathPoints = dataDict.points;
var userPoints = [];
for (var i = 0; i < pathPoints.length; i++) {
let pointDict = pathPoints[i];
var point = cc.p(pointDict.x * this.node.width, pointDict.y * this.node.height);
userPoints.push(point);
}
// 畫線並隱藏
path.points(userPoints.reverse())
var pathLength = path.getTotalLength();
path.dashOffset = pathLength;
path.dashArray = [pathLength];
// 設定path字典
var pathDict = {};
pathDict.path = path;
pathDict.duration = (dataDict.endTime - dataDict.startTime) / 1000.0;
// 將path字典存入陣列
this.pathArray.push(pathDict);
},複製程式碼需要注意的事項：
① 清屏資料結構與畫線不同所以特殊處理。
② 線的動畫顯示，實質上是已經畫了，不過被隱藏了，只不過是在一定時間裡按比例顯示出來。
3、處理畫線佇列（在update中）
update: function (dt) {
// 時間遞增
this.time += dt;
// 設定顯示比例
let percent = this.time / this.duration;
// 顯示比例超過1 更新到佇列中的下一條線
if (percent > 1) {
// 假如佇列有path，排除沒畫線時出錯
if (this.pathArray.length > 0) {
// 假如是清屏命令 直接清屏退出此次update
if (this.pathArray[0].dataEvent === 'clear') {
this.clearAll();
this.pathArray.shift();
return;
}
// 比較是否是當前path，是的話移除
if (this.path === this.pathArray[0].path) {
this.pathArray.shift();
}
}
// 在移除之後（或者第一次） 判斷佇列還有沒有path，有的話繼續畫
if (this.pathArray.length > 0) {
// 假如是清屏命令 直接清屏退出此次update
if (this.pathArray[0].dataEvent === 'clear') {
this.clearAll();
this.pathArray.shift();
return;
}
// 開始新一條線的顯示（初始化）
this.path = this.pathArray[0].path;
this.pathLength = this.path.getTotalLength();
this.time = 0;
this.duration = this.pathArray[0].duration;
percent = 0;
}
return;
}
// 根據時間重新整理畫筆的顯示
this.path.dashOffset = this.pathLength * (1 - percent);
this.path._dirty = true;
},
});複製程式碼四、相關資源
需要注意的事項：
① 按照raphael_demo中的安裝教程安裝時，記得後兩步即：git submodule update --init 及 npm install需要在終端cd到專案所在的資料夾執行，不是全域性的。
五、嘿嘿！你懂得！
本文首發於我的個人部落格，希望大家多多支援！