完善新手引导的demo

GuideDemo/README.md

@@ -1,2 +1,2 @@
-# Guide demo
-一个简单的选择性点击，可用于新手引导。
+# Guide Demo
+一个关于简单新手引导的demo

GuideDemo/assets/Scene/helloworld.fire

@@ -1110,14 +1110,12 @@
       "__id__": 22
     },
     "_enabled": true,
+    "type": 2,
     "nodeTarget": {
       "__id__": 10
     },
-    "nodeMark": {
+    "nodeMask": {
       "__id__": 23
-    },
-    "nodeMarkBg": {
-      "__id__": 24
     }
   },
   {

GuideDemo/assets/Script/MarkTouch.js

@@ -1,10 +1,18 @@
+//
+const Type = cc.Enum({
+  rect: 1,
+  circle: 2
+});
 cc.Class({
   extends: cc.Component,
 
   properties: {
+    type: {
+      default: Type.circle,
+      type: Type
+    },
     nodeTarget: cc.Node,
-    nodeMark: cc.Node,
-    nodeMarkBg: cc.Node
+    nodeMask: cc.Node,
   },
 
   onLoad() {
@@ -17,23 +25,62 @@ cc.Class({
   },
 
   init(data) {
+    this.mask = this.nodeMask.getComponent(cc.Mask);
+    this.setMode(this.type);
     this.setBoxBounding();
     this.node.on('touchstart', this.onTouchStart, this);
     this.initMarKPos(this.nodeTarget.convertToWorldSpaceAR(cc.v2(0, 0)));
   },
 
+  /**
+   * 设置样式
+   * @param {*} type 
+   */
+  setMode(type) {
+    if (type == Type.rect) {
+      this.mask.type = cc.Mask.Type.RECT;
+    } else if (type == Type.circle) {
+      this.mask.type = cc.Mask.Type.ELLIPSE;
+    }
+  },
+
+  /**
+   * 设置目标点
+   * @param {*} posWorld 
+   */
   initMarKPos(posWorld) {
     let parent = this.node.parent || this.node;
     let posLocal = parent.convertToNodeSpaceAR(posWorld);
-    this.nodeMark.setPosition(posLocal);
-    let size = this.getMaxLen(this.nodeTarget);
-    this.nodeMark.width = size;
-    this.nodeMark.height = size;
+    this.nodeMask.setPosition(posLocal);
+    let nodeMaskBg = this.nodeMask.getChildByName('bg');
+
     posLocal.x -= 0;
     posLocal.y -= 0;
-    this.nodeMarkBg.setPosition(cc.v2(-posLocal.x, -posLocal.y));
+    nodeMaskBg.setPosition(cc.v2(-posLocal.x, -posLocal.y));
+
+    if (this.type == Type.circle) {
+      let size = this.getMaxLen(this.nodeTarget);
+      this.nodeMask.width = size;
+      this.nodeMask.height = size;
+    } else {
+      let node = this.nodeTarget;
+      this.nodeMask.width = node.width;
+      this.nodeMask.height = node.height;
+    }
   },
 
+  /**
+   * 点中目标后
+   * 回调
+   */
+  onTouchEventFinish() {
+    this.node.active = false;
+  },
+
+  /**
+   * 取得最大长度
+   * @param {*} node 
+   */
   getMaxLen(node) {
     let size = node.width;
     if (size < node.height) {
@@ -57,20 +104,17 @@ cc.Class({
    */
   onTouchStart(event) {
     let touchPos = event.getLocation();
-    console.log('touchPos=', touchPos);
+    // console.log('touchPos=', touchPos);
     let retWorld = this.nodeTarget.getBoundingBoxToWorld();
     if (retWorld.contains(touchPos)) {
+      //触摸事件可向下传递
       this.node._touchListener.setSwallowTouches(false);
-      this.node.active = false;
+      this.onTouchEventFinish();
     } else {
       this.node._touchListener.setSwallowTouches(true);
     }
   },
 
-  update(dt) {
-
-  },
-
   offEvent() {
 
   },