Pixi.js: Отсутствует функция: пунктирная линия

+1 за эту функцию. Было бы очень приятно иметь.

Функция, которая выполняет много операций lineTo + moveTo, может получить пунктирную линию.

Внутренне это, вероятно, будет сделано в canvas2D. В WebGL вы можете сделать то же самое или применить тире во фрагментном шейдере. Последнее сложнее и тоже приводит к лишнему филлрейту, но стоит меньше с точки зрения пропускной способности вершин. Другой подход заключается в использовании повторяющегося узора текстуры для создания штриховки.

ИМХО, это не обязательно должно быть частью Pixi, поскольку существует множество способов его реализации, и какое именно решение вы выберете, может сильно зависеть от вашего приложения.

Я могу понять точку зрения @mattdesl , и не так уж сложно реализовать пунктирную линию, например, для прямой линии. Но поскольку я работаю над проектом с довольно сложной графикой, включая кривые и сплайны, было бы очень неплохо включить эту функцию в pixi.

После анонса примитивов для pixi @GoodBoyDigital сказал, что это в списке задач (здесь в комментарии: http://www.goodboydigital.com/pixi-webgl-primitives/). Так что я очень надеялся, что он скоро появится.

И я также думаю, что было бы неплохо, чтобы пикси поддерживали хотя бы те операции рисования, которые доступны для холста.

пока закрываем это, поскольку у нас пока нет планов по реализации пунктирных линий. Спасибо!

Я также столкнулся с этой проблемой и решил ее простым способом.
вот код:

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

Эта ветка была автоматически заблокирована, так как после ее закрытия не было никаких действий в последнее время. Пожалуйста, откройте новую проблему для связанных ошибок.