最近在工作中有需求轨迹锁定效果，动态效果类似这样
移动轨迹固定，只能沿轨迹拖动
前后换了很多方案，最终锁定重写 样条曲线来实现，用时间来驱动下一点的位置，来约束笔迹。以下是实现具体步骤：
1：轨迹点的确认
采用tmx来打点采样，如上图，我做了三层
path:路径层，用来区别笔顺，每个path路径是一笔，带有group(笔顺)属性
points:检查点图，用来做结果检查，所有points点走完即结束，带有属性group(笔顺)、index(序号)
快层1:没用，但必须要有
2：ts重写样条曲线
getControlPointAtIndex(index) {
index = Math.min(this._paths.length - 1, Math.max(index, 0))
return this._paths[index]
}
ccCardinalSplineAt(p0: cc.Vec2,p1: cc.Vec2,p2: cc.Vec2,p3: cc.Vec2,tension: number,t: number)
{
let t2 = t * t
let t3 = t2 * t
let s = (1 - tension) / 2
let b1 = s * (-t3 + 2 * t2 - t) // s(-t3 + 2 t2 - t)P1
let b2 = s * (-t3 + t2) + (2 * t3 - 3 * t2 + 1) // s(-t3 + t2)P2 + (2 t3 - 3 t2 + 1)P2
let b3 = s * (t3 - 2 * t2 + t) + (-2 * t3 + 3 * t2) // s(t3 - 2 t2 + t)P3 + (-2 t3 + 3 t2)P3
let b4 = s * (t3 - t2) // s(t3 - t2)P4
let x = p0.x * b1 + p1.x * b2 + p2.x * b3 + p3.x * b4
let y = p0.y * b1 + p1.y * b2 + p2.y * b3 + p3.y * b4
return cc.v2(x, y)
}
3：编写获取下一点的函数
getNextPos(time) {
//直线单独处理
let p
let lt
// eg.
// p..p..p..p..p..p..p
// 1..2..3..4..5..6..7
// want p to be 1, 2, 3, 4, 5, 6
if (time == 1) {
p = this._paths.length - 1
lt = 1
} else {
p = Math.floor(time / this._deltaT)
lt = (time - this._deltaT * p) / this._deltaT
}
// Interpolate
let pp0: cc.Vec2 = this.getControlPointAtIndex(p - 1)
let pp1: cc.Vec2 = this.getControlPointAtIndex(p + 0)
let pp2: cc.Vec2 = this.getControlPointAtIndex(p + 1)
let pp3: cc.Vec2 = this.getControlPointAtIndex(p + 2)
let newPos: cc.Vec2 = this.ccCardinalSplineAt(
pp0,
pp1,
pp2,
pp3,
this._tension,
lt,
)
return newPos
}
4：编写onTouchMove函数
onTouchMove(event) {
if (this._isWorking === false ) {
return
}
const touches = event.getTouches()
let touchLoc = touches[0].getLocation()
touchLoc = this.ctx.convertToNodeSpaceAR(touchLoc)
const penRect: cc.Rect = cc.rect(
this.pen.node.x - this.pen.node.width * this.pen.node.anchorX,
this.pen.node.y - this.pen.node.width * this.pen.node.anchorY,
this.pen.node.width,
this.pen.node.height,
)
if (cc.rectContainsPoint(penRect, touchLoc)) {
const dMoveX = touchLoc.x - this._lastTouchPos.x
const dMoveY = touchLoc.y - this._lastTouchPos.y
this._penStartPos.x = this._penStartPos.x + dMoveX
this._penStartPos.y = this._penStartPos.y + dMoveY
const totalCount = 6 //同时检测点数量，可以根据需求控制
const moveFPS = 1 / 60 //每帧timer的移动速度
for (let i = 0; i < totalCount; i++) {
let nextPos = this.getNextPos(this._time + i * moveFPS)
//检测点距离区间
if (cc.pDistance(this._penStartPos, nextPos) < 80) {
this.drawPoint() //绘制轨迹
this._time += moveFPS
this._nextPos = this.getNextPos(this._time)
//检查是否结束
}
}
}
this._lastTouchPos = touchLoc
}
5：其他
绘制路径可以用graphics或者sprite来绘制，这里不再赘述
全局参数为
this._time //当前绘制的时间
this._nextPos //下一点位置，用来检查是否结束
this._deltaT = 1 / (this._points.length - 1)
tmx中的path是用来做样条曲线的，也就是this._paths，根据当前的group来获取不同组
喜欢请关注，持续发布creator各种用法
网友评论