Pixi.js: 欠落している機能：破線

この機能の+1。 持っていてとてもいいでしょう。

多くのlineTo + moveTo操作を実行する関数は、破線を実現できます。

内部的には、これはおそらく、canvas2Dで行われる方法です。 WebGLでも同じことができます。または、フラグメントシェーダーでダッシュを適用することもできます。 後者はより複雑で、不必要なフィルレートにもつながりますが、頂点帯域幅の点ではコストが低くなります。 別のアプローチは、繰り返しテクスチャパターンを使用して点刻を作成することです。

私見では、これはPixiの一部である必要はありません。実装できる方法は非常に多く、選択するソリューションはアプリケーションによって大きく異なる可能性があるためです。

@mattdeslの観点を理解でき、直線などの破線を実装するのはそれほど難しくありません。 しかし、曲線やスプラインを含む非常に複雑なグラフィックを使用するプロジェクトに取り組んでいるので、この機能をpixiに含めると非常に便利です。

pixiのプリミティブの発表後、 @ GoodBoyDigitalは、それがToDoリストにあると述べました（コメント：http：//www.goodboydigital.com/pixi-webgl-primitives/）。 だから私はそれがすぐに到着することを本当に望んでいました。

また、少なくともキャンバスで使用できる描画操作をpixiがサポートしていると便利だと思います。

点線を実装する予定はまだないので、今のところこれを閉じます。 ありがとう！

私もこの問題に遭遇し、簡単な方法で解決しました。
コードは次のとおりです。

function drawdash(x0,y0,x1,y1,linewidth){
        var dashed = new PIXI.Graphics();
        dashed.lineStyle(1, 0x59e3e8, 1); // linewidth,color,alpha
        dashed.moveTo(0, 0);
        dashed.lineTo(linewidth,0);
        dashed.moveTo(linewidth*1.5,0);
        dashed.lineTo(linewidth*2.5,0);
        var dashedtexture = dashed.generateCanvasTexture(1,1);
        var linelength=Math.pow(Math.pow(x1-x0,2) + Math.pow(y1-y0,2) , 0.5);
        var tilingSprite = new PIXI.extras.TilingSprite(dashedtexture, linelength, linewidth);
        tilingSprite.x=x0;
        tilingSprite.y=y0;
        tilingSprite.rotation = angle(x0,y0,x1,y1)*Math.PI/180;
        tilingSprite.pivot.set(linewidth/2, linewidth/2);
        return tilingSprite;
        function angle(x0,y0,x1,y1){
                var diff_x = Math.abs(x1 - x0),
                    diff_y = Math.abs(y1 - y0);
                var cita;
               if(x1>x0){
                    if(y1>y0){
                        cita= 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                    }else
                   {
                        if(y1<y0){ 
                            cita=-360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                        }else{  
                            cita=0;
                        }
                    }
                }else
                {
                    if(x1<x0){
                        if(y1>y0){
                            cita=180-360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                        }else
                        {
                            if(y1<y0){ 
                                cita=180+360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                            }else{  
                                cita=180;
                            }
                        } 
                    }else{ 
                        if(y1>y0){ 
                            cita=90;
                        }else
                        {
                            if(y1<y0){ 
                                cita=-90;
                            }else{  
                                cita=0;
                            }
                        }
                    }
                }
                return cita;
        }
}

usage:

var linewidth=5;
var tilingSprite = drawdash(100,100,100,400,linewidth);
app.stage.addChild(tilingSprite);
app.ticker.add(function(delta) {
    tilingSprite.tilePosition.x += 0.5*delta;
});

それは助けることができますか？

この機能を再検討する計画はありますか？ CanvasRenderingContext2Dと機能的に同等であると便利です。

誰かがこの機能を探しているなら、これがポリゴンを描くための私の破線の実装です。
https://codepen.io/unrealnl/pen/aYaxBW

破線の別の簡単な例：

https://codepen.io/bokos/pen/EeBXgR

PIXI.Graphics.prototype.drawDashLine = function(toX, toY, dash = 16, gap = 8) {
  const lastPosition = this.currentPath.shape.points;

  const currentPosition = {
    x: lastPosition[lastPosition.length - 2] || 0,
    y: lastPosition[lastPosition.length - 1] || 0
  };

  const absValues = {
    toX: Math.abs(toX),
    toY: Math.abs(toY)
  };

  for (
    ;
    Math.abs(currentPosition.x) < absValues.toX ||
    Math.abs(currentPosition.y) < absValues.toY;
  ) {
    currentPosition.x =
      Math.abs(currentPosition.x + dash) < absValues.toX
        ? currentPosition.x + dash
        : toX;
    currentPosition.y =
      Math.abs(currentPosition.y + dash) < absValues.toY
        ? currentPosition.y + dash
        : toY;

    this.lineTo(currentPosition.x, currentPosition.y);

    currentPosition.x =
      Math.abs(currentPosition.x + gap) < absValues.toX
        ? currentPosition.x + gap
        : toX;
    currentPosition.y =
      Math.abs(currentPosition.y + gap) < absValues.toY
        ? currentPosition.y + gap
        : toY;

    this.moveTo(currentPosition.x, currentPosition.y);
  }
};

このスレッドは、閉じられた後、最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。