Pixi.js: Recurso ausente: linha tracejada

+1 para este recurso. Seria muito bom ter.

Uma função que faz muitas operações lineTo + moveTo pode obter uma linha tracejada.

Internamente, provavelmente é assim que seria feito no canvas2D. No WebGL, você pode fazer o mesmo ou aplicar o traço no sombreador de fragmento. O último é mais complicado e também leva a uma taxa de preenchimento desnecessária, mas custa menos em termos de largura de banda de vértices. Outra abordagem é usar um padrão de textura repetido para criar o pontilhado.

IMHO isso não precisa fazer parte do Pixi, pois há muitas maneiras de implementá-lo e exatamente qual solução você escolhe pode depender muito do seu aplicativo.

Eu posso entender o ponto de vista @mattdesl e não é muito difícil implementar uma linha tracejada para, por exemplo, uma linha reta. Mas como estou trabalhando em um projeto com gráficos bastante complexos, incluindo curvas e splines, seria muito bom ter esse recurso incluído no pixi.

Após o anúncio de primitivos para pixi @GoodBoyDigital disse que está na lista de tarefas (aqui em um comentário: http://www.goodboydigital.com/pixi-webgl-primitives/). Então eu realmente esperava que chegasse logo.

E também acho que seria bom que o pixi suportasse pelo menos as operações de desenho que estão disponíveis para tela.

fechando isso por enquanto, pois ainda não temos planos de implementar linhas pontilhadas. Obrigado!

Eu também encontrei esse problema e resolvi de maneira simples.
aqui está o 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;
});

pode ajudar?

Existe algum plano de revisitar esse recurso? Seria bom ter a paridade funcional com o CanvasRenderingContext2D.

Se alguém estiver procurando por esse recurso, aqui está minha implementação de linha tracejada para desenhar polígonos.
https://codepen.io/unrealnl/pen/aYaxBW

Outro exemplo simples de linha tracejada:

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 tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Por favor, abra um novo problema para bugs relacionados.