我需要对多边形的一个点(在 Paper.js 中称为线段)进行动画处理,将其在原点位于原始多边形点的圆上旋转。见下图:
我正在尝试使用以下代码来做到这一点:
// Draw the polygon
var polygon = new Path.RegularPolygon({
center: [100, 100],
sides: 8,
radius: 80,
});
// Animate
view.onFrame = function (event) {
var offset = new Point(Math.cos(event.time*2), Math.sin(event.time*2));
polygon.firstSegment.point = polygon.firstSegment.point.add(offset);
};
但我遇到两个问题:
- 圆的原点错误
- 经过一段时间的动画后,它开始以一些奇怪且(显然)随机的方式旋转。看起来它改变了圆原点
这里是完整的代码,可以看到它的实际效果:
https://codepen.io/anon/pen/xezQpb
有人可以帮忙吗?谢谢
最佳答案
问题在于,在每一帧中,您都会引用在前一帧期间移动了一点的第一个段的位置,因此偏移量会相加。
相反,只需记录开头的中心和从该点的偏移量:
var center = polygon.firstSegment.point.clone();
[...]
polygon.firstSegment.point = center.add(offset);
关于javascript - 使用 Paper.js 对圆上的多边形点进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55784596/