https://s31.aconvert.com/convert/p3r68-cdx67/4wbga-wdzb1.gif
研究下代码怎么传~
/**
* Created by daichenxi on 2020/10/25
*/
import property = cc._decorator.property;
import ccclass = cc._decorator.ccclass;
import disallowMultiple = cc._decorator.disallowMultiple;
import menu = cc._decorator.menu;
cc.macro.ENABLE_WEBGL_ANTIALIAS = true;
@ccclass()
@disallowMultiple(true)
export class ScratchMask extends cc.Component {
@property(cc.Node)
maskNode: cc.Node = null;
@property({tooltip: "圆角半径:\n具体像素值\n生成的圆会依赖此值", type: cc.Integer})
radius = 66;
@property({tooltip: "分片后阈值:\n结果判断会依赖此值", type: cc.Integer})
value = 40;
@property(cc.Component.EventHandler)
dismissCallBack: cc.Component.EventHandler = null;
// @property(cc.Mask)
protected mask: cc.Mask = null;
protected pisitionProgress: Boolean[] = null;
protected positions: cc.Vec2[] = null;
protected onEnable(): void {
this.mask = this.maskNode.getComponent(cc.Mask);
this.mask.enabled = false;
}
protected onLoad(): void {
let position = this.node.position;
let width = this.node.width / 3;
this.positions = [
position, // 中心点
cc.v2(position.x - width, position.y), // 中心点偏左
cc.v2(position.x + width, position.y), // 中心点偏右
cc.v2(position.x, position.y + width), // 上
cc.v2(position.x - width, position.y + width), // 上左
cc.v2(position.x + width, position.y + width), // 上右
cc.v2(position.x, position.y - width), // 下
cc.v2(position.x - width, position.y - width), // 下左
cc.v2(position.x + width, position.y - width), // 下右
];
this.pisitionProgress = new Array(this.positions.length);
this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
}
private _onTouchBegin(event) {
this._onDrawWithEvent(event);
}
private _onTouchMoved(event) {
this._onDrawWithEvent(event);
}
private _onTouchEnd(event) {
this._onDrawWithEvent(event);
this._checkProgress();
}
private _onDrawWithEvent(event: cc.Event) {
let point = event.touch.getLocation();
point = this.node.convertToNodeSpaceAR(point);
this.onDraw(point);
}
public onClearMask() {
let graphics = this.mask._graphics;
if (!graphics) {
return;
}
graphics.clear();
}
public hideMask(callBack) {
cc.tween(this.maskNode)
.to(0.3, {opacity: 0})
.call(callBack)
.start();
}
/**
* mask 用于绘制罩子的函数.
* this 指向mask 对象,需要特别注意.
* @param point
*/
protected onDraw(point: cc.Vec2) {
if (!this.enabled) {
return;
}
let graphics = this.mask._graphics;
if (!graphics) {
return;
}
this._checkPoint(point);
this.mask.enabled = true;
let width = this.radius * 2;
graphics.roundRect(point.x - this.radius, point.y - this.radius, width, width, this.radius || 0);
if (cc.game.renderType === cc.game.RENDER_TYPE_CANVAS) {
graphics.stroke();
} else {
graphics.fill();
}
}
private _checkPoint(point: cc.Vec2) {
for (let i = 0; i < 9; i++) {
let p = this.positions[i];
// 此点在关键点附近
if (p.x + this.value > point.x && p.x - this.value < point.x && p.y + this.value > point.y && p.y - this.value < point.y) {
this.pisitionProgress[i] = true;
}
}
}
private _checkProgress() {
let result = this.pisitionProgress.filter((value) => {
return value;
}).length === 9;
if (result) {
this.dismissCallBack && this.dismissCallBack.emit(null);
}
}
}
很实用,mark