Missing feature: dash line

[hmilyyang]

Can not draw dashed line?

[stbaer]

+1 for this feature. Would be very nice to have.

[mattdesl]

A function that does a lot of lineTo + moveTo operations could achieve a dashed line.

Internally, this is probably how it would be done in canvas2D. In WebGL you could do the same, or you could apply the dash in the fragment shader. The latter is more complicated and also leads to some unnecessary fill-rate, but costs less in terms of vertex bandwidth. Another approach is to use a repeating texture pattern to create the stippling.

IMHO this doesn't need to be part of Pixi, since there's so many ways that it can be implemented and exactly which solution you choose may heavily depend on your application.

[stbaer]

I can understand @mattdesl point of view and it's not too hard to implement a dash line for e.g. a straight line. But as I'm working on a project with pretty complex graphics including curves and splines it would be very nice to have this feature included in pixi.

After the announcement of primitives for pixi @GoodBoyDigital said that it's on the todo list (here in a comment: http://www.goodboydigital.com/pixi-webgl-primitives/). So I really hoped for it to arrive soon.

And I also think that it would be nice for pixi to support at least the drawing operations that are available for canvas.

[GoodBoyDigital]

closing this for now as we have no plans to implement dotted lines just yet. Thanks!

[jeensshi]

i also met this problem,and solved it by simple way.
here is the 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;
});

can it help?

[josephmcasey]

Is there any plan of revisiting this feature? It would be nice to have the functional parity with the CanvasRenderingContext2D.

[ErikSom]

If anyone is looking for this feature, here is my dashed-line implementation for drawing polygons.
https://codepen.io/unrealnl/pen/aYaxBW

[martinboksa]

Another simple example of dashed line:

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

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.