美文网首页
Cocos Creator触摸屏幕任意位置节点跟随手指移动

Cocos Creator触摸屏幕任意位置节点跟随手指移动

作者: 程序猿TODO | 来源:发表于2021-04-07 09:36 被阅读0次
    // this.node 是需要移动的节点
    onLoad () {
        //节点初始位置,每次触摸结束更新
        this.nodePos = this.node.getPosition();
        //触摸监听(this.node.parent是屏幕)
        //想达到按住节点,节点才能移动的效果,将监听函数注册到 this.node 上,去掉  .parent 即可
        this.node.parent.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.parent.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.parent.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    },
 
    //触摸移动;
    onTouchMove (event) {
        var self = this;
        var touches = event.getTouches();
        //触摸刚开始的位置
        var oldPos = self.node.parent.convertToNodeSpaceAR(touches[0].getStartLocation());
        //触摸时不断变更的位置
        var newPos = self.node.parent.convertToNodeSpaceAR(touches[0].getLocation());
        
        //var subPos = cc.pSub(oldPos,newPos); 1.X版本是cc.pSub
 
        var subPos = oldPos.sub(newPos); // 2.X版本是 p1.sub(p2);
 
        self.node.x = self.nodePos.x - subPos.x;
        self.node.y = self.nodePos.y - subPos.y;
        
        // 控制节点移不出屏幕; 
        var minX = -self.node.parent.width/2 + self.node.width/2; //最小X坐标;
        var maxX = Math.abs(minX);
        var minY = -self.node.parent.height/2 + self.node.height/2; //最小Y坐标;
        var maxY = Math.abs(minY);
        var nPos = self.node.getPosition(); //节点实时坐标;
 
        if (nPos.x < minX) {
            nPos.x = minX;
        };
        if (nPos.x > maxX) {
            nPos.x = maxX;
        };
        if (nPos.y < minY) {
            nPos.y = minY;
        };
        if (nPos.y > maxY) {
            nPos.y = maxY;
        };
        self.node.setPosition(nPos);
    },
    onTouchEnd () {
        this.nodePos = this.node.getPosition(); //获取触摸结束之后的node坐标;
    },
    onTouchCancel: function () {
        this.nodePos = this.node.getPosition(); //获取触摸结束之后的node坐标;
    },

相关文章

网友评论

      本文标题:Cocos Creator触摸屏幕任意位置节点跟随手指移动

      本文链接:https://www.haomeiwen.com/subject/oalghltx.html