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();
}
}
}
});