Pixi.js: 缺失特征：虚线

+1 此功能。 会很高兴。

执行大量 lineTo + moveTo 操作的函数可以实现虚线。

在内部，这可能是在 canvas2D 中完成的方式。 在 WebGL 中你可以做同样的事情，或者你可以在片段着色器中应用破折号。 后者更复杂，也会导致一些不必要的填充率，但在顶点带宽方面成本更低。 另一种方法是使用重复的纹理图案来创建点画。

恕我直言，这不需要成为 Pixi 的一部分，因为它可以实现的方式很多，而您选择的解决方案可能在很大程度上取决于您的应用程序。

我可以理解@mattdesl的观点，并且为例如直线实现虚线并不难。 但是当我正在处理一个包含曲线和样条曲线在内的非常复杂的图形的项目时，将这个功能包含在 pixi 中会非常好。

在宣布 pixi 的原语后，@ GoodBoyDigital说它在待办事项列表中（这里有评论：http://www.goodboydigital.com/pixi-webgl-primitives/）。 所以我真的希望它快点到来。

而且我也认为pixi至少支持画布可用的绘图操作会很好。

暂时关闭它，因为我们还没有计划实施虚线。 谢谢！

我也遇到了这个问题，用简单的方法解决了。
这是代码：

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

有帮助吗？

是否有任何重新访问此功能的计划？ 与 CanvasRenderingContext2D 功能相同会很好。

如果有人在寻找这个功能，这里是我绘制多边形的虚线实现。
https://codepen.io/unrealnl/pen/aYaxBW

虚线的另一个简单示例：

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

该线程已被自动锁定，因为它关闭后没有任何最近的活动。 请针对相关错误打开一个新问题。