Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/lxt610/article/details/89954924
table of Contents
1 Introduction
Here to share a scratch card effect, without further ado, Syria, we directly on the code.
2, set up the scene
As shown in FIG scene structures:
3, code section
Detailed code as follows:
const {ccclass, property} = cc._decorator;
@ccclass
export default class test extends cc.Component {
// LIFE-CYCLE CALLBACKS:
mask = null;
onLoad () {
this.mask = this.node.getChildByName('mask').getComponent(cc.Mask);
this.node.on(cc.Node.EventType.TOUCH_START,function (e){
console.log('touch start');
this.commonFunc(e)
},this);
this.node.on(cc.Node.EventType.TOUCH_MOVE,(e)=>{
console.log('touch move');
this.commonFunc(e)
},this);
}
start () {
}
commonFunc (event){
let point:cc.Vec2 = event.touch.getLocation();
point = this.node.convertToNodeSpaceAR(point);
this._addCircle(point);
}
_addCircle(point) {
let graphics = this.mask._graphics;
console.log("xxxx:",graphics)
let color = cc.color(0, 0, 0, 255);
graphics.rect(point.x,point.y,50,40)
graphics.lineWidth = 2
graphics.fillColor = color
//graphics.strokeColor = color
graphics.fill()
}
// update (dt) {}
}
4, showing the effect of
Here we start the project, take a look at the demonstration effect!
5, Demo Download
In order to facilitate the use of this given directly download link, click here to download the complete project.
6. Conclusion
The End
Well, today's share on here, if inadequacies also hope you correct me in time, feel free to discuss the exchange! ! !
Like friends, please Bangding, thumbs up, comment! You certainly inexhaustible power of my writing!