Cocos Creator之向量旋转角度计算绘制直线运动轨迹

最近了开发项目而忙碌着，写博客的时间变少了，我也希望在多余的时间来记录下开发中遇到的问题和技术难题。游戏还在开发中就不能展现出来了，所以为了记录方便我就把功能做成一个个的小demo。

需求：点击屏幕任意位置的时候，物体中心点开始到触摸点位置结束，绘制一条线条来表示行动轨迹，物体移动到触摸位置。

效果：

一、制作界面

层级管理器的节点结构

1.root，根节点

2.trackLayout，轨迹

3.trackSPRite，轨迹点

4.moveSprite，移动物体

二、脚本

cc.Class({    extends: cc.Component,    properties: {        root: cc.Node,        moveSprite: cc.Sprite,        trackLayout: cc.Layout,    },    // use this for initialization    onLoad: function () {        this.startPos = cc.p(0, 0);  //开始位置        this.endPos = cc.p(0, 0);    //结束位置        this.trackSprites = [];      //装轨迹点                //轨迹不显示        this.trackLayout.node.active = false;                //触摸结束事件        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this, true);    },        onTouchEnd: function (event) {        //停止移动，为了避免没移动结束，却改变了目标位置        this.moveSprite.node.stopAllActions();        this.removeTrackSprites();        //获取开始的位置        this.startPos = this.moveSprite.node.getPosition();        //获取点击的位置        this.endPos = cc.p(event.getLocation().x, event.getLocation().y);        cc.log("getLocation = ", this.endPos.x, this.endPos.y, event.getLocation().x, event.getLocation().y);        this.spriteMoveAction();        this.drawTrack(event.getLocation());    },        spriteMoveAction: function () {        //获得2点之间的距离        let distance = cc.pDistance(this.startPos, this.endPos);                //计算移动需要话费的时间，时间 = 距离 / 速度        let moveTime = distance / 400;                cc.log("move = ", this.endPos.x, this.endPos.y);        //变速移动         let moveTo = cc.moveTo(moveTime, this.endPos).easing(cc.easeInOut(3));                //回调函数        let callfunc = cc.callFunc(function () {            this.trackLayout.node.active = false;        }, this);                //让sprite移动        this.moveSprite.node.runAction(cc.sequence(moveTo, callfunc));    },        //绘制轨迹路线    drawTrack: function (end) {        this.trackLayout.node.active = true;        this.trackLayout.node.setPosition(this.startPos);        let distance = cc.pDistance(this.startPos, this.endPos);                //获得轨迹点        this.trackSprite = this.trackLayout.node.getChildByName("trackSprite");                //轨迹点数量        let trackNum = Math.floor(distance / (this.trackSprite.width + this.trackLayout.spacingX));                for (i = 1; i < trackNum; i++) {            //克隆轨迹点            let trackSpriteTemplate = cc.instantiate(this.trackSprite);            this.trackLayout.node.addChild(trackSpriteTemplate);            this.trackSprites.push(trackSpriteTemplate);        }                //向量差计算,结束点-开始点，向量的指向是朝着结束点        var posSub = this.endPos.sub(this.startPos);        //向量的角度计算，cc.pToAngle是获得弧度值，角度 = 弧度/PI*180        var angle = cc.pToAngle(posSub) / Math.PI * 180;                //rotation 是逆时针旋转的，在角度添加负号才正确        this.trackLayout.node.rotation = -angle;    },        //移除轨迹点    removeTrackSprites: function () {        for (i = 0; i < this.trackSprites.length; i++ ) {            let trackSprite = this.trackSprites[i];            if (trackSprite) {                trackSprite.removeFromParent();            }        }    }});