Pixi.js: Caractéristique manquante : ligne en pointillés

+1 pour cette fonctionnalité. Ce serait très bien d'avoir.

Une fonction qui effectue beaucoup d'opérations lineTo + moveTo pourrait obtenir une ligne en pointillés.

En interne, c'est probablement ainsi que cela se ferait dans canvas2D. Dans WebGL, vous pouvez faire la même chose, ou vous pouvez appliquer le tiret dans le fragment shader. Ce dernier est plus compliqué et conduit également à un taux de remplissage inutile, mais coûte moins cher en termes de bande passante de vertex. Une autre approche consiste à utiliser un motif de texture répétitif pour créer le pointillé.

À mon humble avis, cela n'a pas besoin de faire partie de Pixi, car il existe de nombreuses façons de l'implémenter et la solution exacte que vous choisissez peut fortement dépendre de votre application.

Je peux comprendre le point de vue de @mattdesl et il n'est pas trop difficile d'implémenter une ligne en pointillés, par exemple une ligne droite. Mais comme je travaille sur un projet avec des graphismes assez complexes, y compris des courbes et des splines, ce serait très bien d'avoir cette fonctionnalité incluse dans pixi.

Après l'annonce des primitives pour pixi @GoodBoyDigital a dit que c'était sur la todo list (ici dans un commentaire : http://www.goodboydigital.com/pixi-webgl-primitives/). J'espérais donc qu'il arriverait bientôt.

Et je pense aussi qu'il serait bien que pixi supporte au moins les opérations de dessin disponibles pour canvas.

fermer ceci pour l'instant car nous n'avons pas encore l'intention d'implémenter des lignes pointillées. Merci!

J'ai également rencontré ce problème et l'ai résolu de manière simple.
voici le 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;
});

peut-il aider?

Est-il prévu de revoir cette fonctionnalité ? Ce serait bien d'avoir la parité fonctionnelle avec le CanvasRenderingContext2D.

Si quelqu'un recherche cette fonctionnalité, voici mon implémentation en pointillés pour dessiner des polygones.
https://codepen.io/unrealnl/pen/aYaxBW

Un autre exemple simple de ligne pointillée :

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

Ce fil a été automatiquement verrouillé puisqu'il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues associés.