本次引擎2.0.5
编辑工具VSCode
目标:画笔单步撤销。
方法:对象池存储节点,通过回收实现单步撤销。
新建工程:bk白色背景。
新建个空节点:drawManager(便于管理预制体)
然后新建一个空节点,绑上cc.graphics。做成预制体。
好了,让我们写总控制脚本main绑定在Canvas上。
声明节点和预制体:
写个对象池:
这样对象池里面就有200个提前预制好的带cc.graphics组件的节点。
写一个创造方法,然后在对象池下方先实例化50个;
都在onLoad
好了,节点有了,怎么找到这些节点呢??
我们可以声明一个下标:
好了,这样我们就可以通过children下标找寻节点。
因为我们有个drawManager专门做这个的:
好了,让我们写出3个触摸监听:
下标从0开始;
第一步开始固定点;
第二步开始不断画线;
第三步结束触摸,下标加一;
第四步判断下标是否越界,可以再添加节点。
好了,现在我们这样就可以使用下标单步撤销了。
建个按钮:
写个点击方法:
如果是一笔没画,return;
不然会清除该节点的绘画,回收到节点池;
然后下标减去1;
给出源代码:
cc.Class({
extends: cc.Component,
properties: {
drawManager : cc.Node,
// 预制
draw : cc.Prefab,
// 对应下标
index : 0
},
onLoad () {
// 对象池
this.drawPool = new cc.NodePool();
let initCount = 200;
for (let i = 0; i < initCount; ++i) {
let draw = cc.instantiate(this.draw);
this.drawPool.put(draw);
}
// 先取出50个实例化
for (let i = 0; i < 50; ++i) {
this.createDraw();
}
},
start () {
this.draw_children = this.drawManager.children;
// 触摸监听
this.node.on('touchstart',function(touch) {
var t_pos = touch.getLocation();
var pos = this.node.convertToNodeSpaceAR(t_pos);
this.draw_children[this.index].getComponent(cc.Graphics).moveTo(pos.x,pos.y);
},this);
this.node.on('touchmove',function(touch) {
var t_pos = touch.getLocation();
var pos = this.node.convertToNodeSpaceAR(t_pos);
this.draw_children[this.index].getComponent(cc.Graphics).lineTo(pos.x,pos.y);
this.draw_children[this.index].getComponent(cc.Graphics).stroke();
},this);
this.node.on('touchend',function(touch) {
this.index += 1;
if (this.index >= this.draw_children.length) {
this.createDraw();
}
},this);
},
// 创造绘图节点并实例化
createDraw() {
let draw = null;
if (this.drawPool.size() > 0) {
draw = this.drawPool.get();
}
else {
draw = cc.instantiate(this.draw);
}
draw.parent = this.drawManager;
},
Click_back() {
if(this.index <= 0) {
return;
}
this.draw_children[this.index - 1].getComponent(cc.Graphics).clear();
this.drawPool.put(this.draw_children[this.index - 1]);
this.index -= 1;
},
});
好了,我们试一试;
怎么样?
小伙伴们有更好的方法吗?
O(∩_∩)O~~