0

Konva.Line を作成しました。この線に沿って等間隔に星を描きたいと思います。それは問題ではありませんが、線がまっすぐになることはめったにありません。別の方法として、線を定義する点 {x,y} のリストがあり、Konva.Line を作成するのではなく、等間隔でない点のリストに沿って等間隔の星を描くことができます。

これが私がこれまで持っている機能です。星は描画されますが、等間隔にはなりません。

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

0 に答える 0