Pixi.js: Característica faltante: línea discontinua

+1 para esta función. Sería muy bueno tener.

Una función que realiza muchas operaciones lineTo + moveTo podría lograr una línea discontinua.

Internamente, probablemente así es como se haría en canvas2D. En WebGL podría hacer lo mismo, o podría aplicar el guión en el sombreador de fragmentos. Este último es más complicado y también conduce a una tasa de relleno innecesaria, pero cuesta menos en términos de ancho de banda de vértice. Otro enfoque consiste en utilizar un patrón de textura repetido para crear el punteado.

En mi humilde opinión, esto no necesita ser parte de Pixi, ya que hay muchas maneras en que se puede implementar y la solución exacta que elija puede depender en gran medida de su aplicación.

Puedo entender el punto de vista de @mattdesl y no es demasiado difícil implementar una línea discontinua, por ejemplo, una línea recta. Pero como estoy trabajando en un proyecto con gráficos bastante complejos que incluyen curvas y splines, sería muy bueno tener esta función incluida en pixi.

Después del anuncio de las primitivas para pixi, @GoodBoyDigital dijo que está en la lista de tareas pendientes (aquí en un comentario: http://www.goodboydigital.com/pixi-webgl-primitives/). Así que realmente esperaba que llegara pronto.

Y también creo que sería bueno que pixi admitiera al menos las operaciones de dibujo que están disponibles para el lienzo.

cerrando esto por ahora ya que no tenemos planes para implementar líneas punteadas todavía. ¡Gracias!

También encontré este problema y lo resolví de manera simple.
aquí está el código:

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

¿Puede ayudar?

¿Hay algún plan para volver a visitar esta función? Sería bueno tener la paridad funcional con CanvasRenderingContext2D.

Si alguien está buscando esta función, aquí está mi implementación de línea discontinua para dibujar polígonos.
https://codepen.io/unrealnl/pen/aYaxBW

Otro ejemplo simple de línea discontinua:

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

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para los errores relacionados.