Javascript 有没有更好的方法来完成这个PIXI绳索鼠标跟随者？

我使用PIXI.js创建了一个简单的鼠标跟随器。它基于鼠标移动创建等距点，并沿这些点渲染纹理PIXI.Rope对象。PIXI似乎很难渲染rope，我想知道是否有更好的方法来实现这一点，或者我是否误用了rope对象

正如您在下面的示例中所看到的，这在很大程度上是有效的，但是快速移动鼠标或将绳子移动到其顶部会导致小故障和瑕疵，这可能与PIXI渲染渐变的方式有关（以及我对它的误解）

请参阅：

（函数（）
{
document.addEventListener（'DOMContentLoaded'，function（）
{
PIXI.Point=window.Vector；
var阶段=新PIXI.阶段（0xFFFFFF）；
var renderer=PIXI.autodetectedrenderer（500500）；
document.body.appendChild（renderer.view）；
var resizeWindow=函数（）
{
w=窗宽；
h=窗内高度；
渲染器。调整大小（w，h）；
renderer.view.height=h；
renderer.view.width=w；
}
调整窗口大小（）
addEventListener（'resize'，resizeWindow）
变形金刚、绳索、骨架；
var isDrawing=true，points=[]，pointsSkeleton=[]，threshold_lower=10，threshold_upper=15，lineLength=1000；
变量动画；
tRope=PIXI.Texture.fromImage（“http://new.wethecollective.com/junk/rope2.png");
比喻高度=22；
宽度=1000；
tBone=PIXI.Texture.fromImage（“http://new.wethecollective.com/junk/bone.png");
tBone.height=10；
tBone.width=10；
var addPoint=函数（点，addToSkeleton）
{
如果（addToSkeleton！==false）
{
addToSkeleton=true
}
点。推（点）；
如果（addToSkeleton）
{
var bone=新的PIXI.Sprite（tBone）；
骨骼x=点x-5；
bone.y=点.y-5；
pointsSkeleton[points.length-1]=skeleton.addChild（bone）；
}
}
var removePoint=函数（索引）
{
拼接点（索引1）；
skeleton.removeChild（pointsSkeleton[index]）；
拼接点（索引1）；
}
动画=函数（）
{
请求动画帧（动画）；
//上台
渲染器。渲染（舞台）；
}
var rlength=0
while（长度<线宽）
{
rlength+=阈值上限；
addPoint（新PIXI.Point（rlength，100），false）；
}
rope=新的PIXI.rope（比喻，点）；
skeleton=new PIXI.DisplayObjectContainer（）；
舞台。添加儿童（绳索）；
阶段。添加儿童（骨架）；
document.body.addEventListener（'mousemove'，函数（e）
{
var pos=新的PIXI.点（e.clientX，e.clientY）；
var v=pos.clone（）.sub（points[points.length-1]）；
l=v.长度（）
如果（l>阈值较低）
{
if（l0）
{
totalLength+=点[i-1].clone（）.sub（点[i]）.length（）
}
}
如果（总长度>线宽）
{
var pointsnum=points.length；
对于（变量i=0；iif（totalLength我通过从舞台上物理移除绳索并在每次渲染过程中重新初始化来修复此问题。我觉得有点不舒服，但确实有效

animate = function()
{
  requestAnimationFrame(animate);

  stage.removeChild(rope);
  rope = new PIXI.Rope(tRope, points);
  stage.addChildAt(rope,0);

  // render the stage   
  renderer.render(stage);
}

animate = function()
{
  requestAnimationFrame(animate);

  stage.removeChild(rope);
  rope = new PIXI.Rope(tRope, points);
  stage.addChildAt(rope,0);

  // render the stage   
  renderer.render(stage);
}