Pixi.js: 누락된 기능: 대시 라인

이 기능에 대해 +1입니다. 있으면 매우 좋을 것입니다.

많은 lineTo + moveTo 작업을 수행하는 함수는 점선을 얻을 수 있습니다.

내부적으로 이것은 아마도 canvas2D에서 수행되는 방식일 것입니다. WebGL에서 동일한 작업을 수행하거나 프래그먼트 셰이더에 대시를 적용할 수 있습니다. 후자는 더 복잡하고 불필요한 채우기 속도를 유발하지만 정점 대역폭 측면에서 비용이 적게 듭니다. 또 다른 접근 방식은 반복되는 텍스처 패턴을 사용하여 점선을 만드는 것입니다.

IMHO 이것은 구현될 수 있는 많은 방법이 있고 정확히 어떤 솔루션을 선택하는지가 애플리케이션에 크게 의존할 수 있기 때문에 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);
  }
};

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.