Pixi.js: Fitur yang hilang: garis putus-putus

+1 untuk fitur ini. Akan sangat menyenangkan untuk dimiliki.

Fungsi yang melakukan banyak operasi lineTo + moveTo dapat mencapai garis putus-putus.

Secara internal, ini mungkin akan dilakukan di canvas2D. Di WebGL Anda bisa melakukan hal yang sama, atau Anda bisa menerapkan tanda hubung di shader fragmen. Yang terakhir ini lebih rumit dan juga menyebabkan beberapa fill-rate yang tidak perlu, tetapi biayanya lebih murah dalam hal bandwidth vertex. Pendekatan lain adalah dengan menggunakan pola tekstur berulang untuk membuat stippling.

IMHO ini tidak perlu menjadi bagian dari Pixi, karena ada begitu banyak cara yang dapat diterapkan dan solusi mana yang Anda pilih mungkin sangat bergantung pada aplikasi Anda.

Saya dapat memahami sudut pandang @mattdesl dan tidak terlalu sulit untuk menerapkan garis putus-putus misalnya garis lurus. Tetapi karena saya sedang mengerjakan proyek dengan grafik yang cukup rumit termasuk kurva dan splines, akan sangat menyenangkan jika fitur ini disertakan dalam pixi.

Setelah pengumuman primitif untuk pixi @GoodBoyDigital mengatakan bahwa itu ada di daftar yang harus dilakukan (di sini dalam komentar: http://www.goodboydigital.com/pixi-webgl-primitives/). Jadi saya sangat berharap itu akan segera tiba.

Dan saya juga berpikir bahwa akan lebih baik jika pixi mendukung setidaknya operasi menggambar yang tersedia untuk kanvas.

menutup ini untuk saat ini karena kami belum memiliki rencana untuk menerapkan garis putus-putus. Terima kasih!

saya juga menemui masalah ini, dan menyelesaikannya dengan cara sederhana.
di sini adalah kode:

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;
});

dapatkah itu membantu?

Apakah ada rencana untuk meninjau kembali fitur ini? Akan menyenangkan untuk memiliki paritas fungsional dengan CanvasRenderingContext2D.

Jika ada yang mencari fitur ini, berikut adalah implementasi garis putus-putus saya untuk menggambar poligon.
https://codepen.io/unrealnl/pen/aYaxBW

Contoh sederhana lain dari garis putus-putus:

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);
  }
};

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.