Javascript 求给定Konva.线的等间距点

我已经创建了一条Konva.线，并希望沿着这条线以相等的间隔绘制一颗星星。这并不重要，但这条线很少是直的。作为替代方案，我有一个点列表{x，y}来定义这条线，而不是创建Konva.线，我可以沿着不等距的点列表绘制等距的星星

this.lastPointerPosition = this.stage.getPointerPosition();
this.mouseDownCache.push({x: this.lastPointerPosition.x, y: this.lastPointerPosition.y});
let i = 0;
let interval = this.parent.scaleValue / 2;
let currentTravel = 0;
let storedSegments = 0;
let point = {};

for(let p of this.mouseDownCache){
  if(i > 0){
    let startx = numeral(this.mouseDownCache[i-1].x).value();
    let starty = numeral(this.mouseDownCache[i-1].y).value();
    let endx = numeral(p.x).value();
    let endy = numeral(p.y).value();
    let segmentLength = (Math.sqrt((startx - endx) * (startx - endx) + (starty - endy) * (starty - endy)));
    currentTravel += segmentLength;
    if(currentTravel >= interval){
      let n = Math.floor(currentTravel / interval);
      let offsetlength = interval - storedSegments;
      let xlen = endx - startx;
      let ylen = endy - starty;
      let hlen = Math.sqrt(Math.pow(xlen,2) + Math.pow(ylen,2));
      let ratio = offsetlength / hlen;
      let smallerXLen = xlen * ratio;
      let smallerYLen = ylen * ratio;
      for(let s=0;s<n;s++){
        let fromx = startx, fromy = starty;
        if(s > 0){
          fromx = point.x; fromy = point.y;
          xlen = endx - point.x;
          ylen = endy - point.y;
          hlen = Math.sqrt(Math.pow(xlen,2) + Math.pow(ylen,2));
          if(hlen > 0){
            ratio = interval / hlen;
            smallerXLen = xlen * ratio;
            smallerYLen = ylen * ratio;
            point = {x: fromx+smallerXLen, y: fromy+smallerYLen};
            this.drawStarAtPoint(this.layer, point);
          }
        }else{
          point = {x: fromx+smallerXLen, y: fromy+smallerYLen};
          this.drawStarAtPoint(this.layer, point);
        }
      }
      currentTravel = (Math.sqrt((point.x - endx) * (point.x - endx) + (point.y - endy) * (point.y - endy)));
      storedSegments = 0;
    }else{
      storedSegments += segmentLength;
    }
  }
  i++
}
this.layer.draw();

这是我到目前为止的函数。它确实画出了星星，但它们的间隔并不相等

this.lastPointerPosition = this.stage.getPointerPosition();
this.mouseDownCache.push({x: this.lastPointerPosition.x, y: this.lastPointerPosition.y});
let i = 0;
let interval = this.parent.scaleValue / 2;
let currentTravel = 0;
let storedSegments = 0;
let point = {};

for(let p of this.mouseDownCache){
  if(i > 0){
    let startx = numeral(this.mouseDownCache[i-1].x).value();
    let starty = numeral(this.mouseDownCache[i-1].y).value();
    let endx = numeral(p.x).value();
    let endy = numeral(p.y).value();
    let segmentLength = (Math.sqrt((startx - endx) * (startx - endx) + (starty - endy) * (starty - endy)));
    currentTravel += segmentLength;
    if(currentTravel >= interval){
      let n = Math.floor(currentTravel / interval);
      let offsetlength = interval - storedSegments;
      let xlen = endx - startx;
      let ylen = endy - starty;
      let hlen = Math.sqrt(Math.pow(xlen,2) + Math.pow(ylen,2));
      let ratio = offsetlength / hlen;
      let smallerXLen = xlen * ratio;
      let smallerYLen = ylen * ratio;
      for(let s=0;s<n;s++){
        let fromx = startx, fromy = starty;
        if(s > 0){
          fromx = point.x; fromy = point.y;
          xlen = endx - point.x;
          ylen = endy - point.y;
          hlen = Math.sqrt(Math.pow(xlen,2) + Math.pow(ylen,2));
          if(hlen > 0){
            ratio = interval / hlen;
            smallerXLen = xlen * ratio;
            smallerYLen = ylen * ratio;
            point = {x: fromx+smallerXLen, y: fromy+smallerYLen};
            this.drawStarAtPoint(this.layer, point);
          }
        }else{
          point = {x: fromx+smallerXLen, y: fromy+smallerYLen};
          this.drawStarAtPoint(this.layer, point);
        }
      }
      currentTravel = (Math.sqrt((point.x - endx) * (point.x - endx) + (point.y - endy) * (point.y - endy)));
      storedSegments = 0;
    }else{
      storedSegments += segmentLength;
    }
  }
  i++
}
this.layer.draw();

this.lastPointerPosition=this.stage.getPointerPosition（）；
this.mouseDownCache.push（{x:this.lastPointerPosition.x，y:this.lastPointerPosition.y}）；
设i=0；
让interval=this.parent.scaleValue/2；
设currentTravel=0；
设storedSegments=0；
设点={}；
for（让p表示这个.mouseDownCache）{
如果（i>0）{
设startx=numeric（this.mouseDownCache[i-1].x）.value（）；
设starty=numeric（this.mouseDownCache[i-1].y）.value（）；
设endx=数字（p.x）.value（）；
设endy=数字（p.y）.value（）；
设segmentLength=（Math.sqrt（（startx-endx）*（startx-endx）+（starty-endy）*（starty-endy））；
当前行程+=分段长度；
如果（当前行程>=间隔）{
设n=数学楼层（当前行程/间隔）；
let offsetlength=间隔-存储段；
设xlen=endx-startx；
设ylen=endy-starty；
设hlen=Math.sqrt（Math.pow（xlen，2）+Math.pow（ylen，2））；
let比率=偏移长度/hlen；
设smallerXLen=xlen*比值；
设smallerYLen=ylen*比；
for（设s=0；s0）{
fromx=点.x；fromy=点.y；
xlen=端点x-点x；
ylen=endy-点y；
hlen=Math.sqrt（Math.pow（xlen，2）+Math.pow（ylen，2））；
如果（hlen>0）{
比率=间隔/hlen；
smallerXLen=xlen*比值；
smallerYLen=ylen*比值；
点={x:fromx+smallerXLen，y:fromy+smallerYLen}；
this.drawStarAtPoint（this.layer，point）；
}
}否则{
点={x:fromx+smallerXLen，y:fromy+smallerYLen}；
this.drawStarAtPoint（this.layer，point）；
}
}
currentTravel=（Math.sqrt（（point.x-endx）*（point.x-endx）+（point.y-endy）*（point.y-endy））；
storedSegments=0；
}否则{
存储分段+=分段长度；
}
}
我++
}
这个.layer.draw（）；

您尝试了什么？我更新了问题以包含我当前拥有的功能。