Pixi.js: Fehlendes Merkmal: Strichlinie

+1 für diese Funktion. Wäre sehr schön zu haben.

Eine Funktion, die viele lineTo + moveTo-Operationen ausführt, könnte eine gestrichelte Linie erzielen.

Intern würde dies wahrscheinlich in canvas2D so gemacht werden. In WebGL könnten Sie dasselbe tun, oder Sie könnten den Bindestrich im Fragment-Shader anwenden. Letzteres ist komplizierter und führt auch zu einer unnötigen Füllrate, kostet aber weniger Vertexbandbreite. Ein anderer Ansatz besteht darin, ein sich wiederholendes Texturmuster zu verwenden, um die Tüpfelung zu erzeugen.

IMHO muss dies nicht Teil von Pixi sein, da es so viele Möglichkeiten gibt, wie es implementiert werden kann, und welche Lösung Sie genau wählen, kann stark von Ihrer Anwendung abhängen.

Ich kann den Standpunkt von @mattdesl verstehen und es ist nicht allzu schwer, eine gestrichelte Linie für zB eine gerade Linie zu implementieren. Aber da ich an einem Projekt mit ziemlich komplexen Grafiken arbeite, einschließlich Kurven und Splines, wäre es sehr schön, wenn diese Funktion in Pixi enthalten wäre.

Nach der Ankündigung von Primitives für Pixi sagte @GoodBoyDigital , dass es auf der Todo-Liste steht (hier in einem Kommentar: http://www.goodboydigital.com/pixi-webgl-primitives/). Also habe ich wirklich gehofft, dass es bald ankommt.

Und ich denke auch, dass es schön wäre, wenn pixi zumindest die Zeichenoperationen unterstützen würde, die für Canvas verfügbar sind.

Wir schließen dies vorerst, da wir noch keine Pläne haben, gepunktete Linien zu implementieren. Danke!

Ich bin auch auf dieses Problem gestoßen und habe es auf einfache Weise gelöst.
hier ist der code:

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

kann es helfen?

Gibt es Pläne, diese Funktion zu überarbeiten? Es wäre schön, die funktionale Parität mit dem CanvasRenderingContext2D zu haben.

Wenn jemand nach dieser Funktion sucht, hier ist meine gestrichelte Implementierung zum Zeichnen von Polygonen.
https://codepen.io/unrealnl/pen/aYaxBW

Ein weiteres einfaches Beispiel für eine gestrichelte Linie:

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

Dieser Thread wurde automatisch gesperrt, da es nach seiner Schließung keine Aktivitäten mehr gegeben hat. Bitte öffnen Sie ein neues Problem für verwandte Fehler.