Pixi.js: Missing feature: dash line

Created on 8 Jan 2015  ·  9Comments  ·  Source: pixijs/pixi.js

Can not draw dashed line?

🙏 Feature Request

Most helpful comment

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

All 9 comments

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

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.

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.

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

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?

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

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

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

madroneropaulo picture madroneropaulo  ·  3Comments

Makio64 picture Makio64  ·  3Comments

gaccob picture gaccob  ·  3Comments

softshape picture softshape  ·  3Comments

lunabunn picture lunabunn  ·  3Comments