How to draw dashed line between two points in PIXI.js

user_6660796 0
Viewed 63

I need to draw a dashed polygon using corner coordinates of the polygon. For this I will be iterating over the corners and keep drawing dashed line between the two corners(corner[i] and corner[i+1]) in all iterations. I found some code over the net to do so so I am currently doing this:

offSetCorners.forEach((point, i) => {
      let endPoint = i < offSetCorners.length - 1 ? offSetCorners[i + 1] : offSetCorners[0];

      zoneGraphic.drawDash(point.x, point.y, endPoint.x, endPoint.y);
    });


drawDash(x1: number, y1: number, x2: number, y2: number, dashLength = 5, spaceLength = 5) {
    let x = x2 - x1;
    let y = y2 - y1;
    let hyp = Math.sqrt(x * x + y * y);
    let units = hyp / (dashLength + spaceLength);
    let dashSpaceRatio = dashLength / (dashLength + spaceLength);
    let dashX = (x / units) * dashSpaceRatio;
    let spaceX = x / units - dashX;
    let dashY = (y / units) * dashSpaceRatio;
    let spaceY = y / units - dashY;
    zoneGraphic.moveTo(x1, y1);
    while (hyp > 0) {
      x1 += dashX;
      y1 += dashY;
      hyp -= dashLength;
      if (hyp < 0) {
        x1 = x2;
        y1 = y2;
      }
      zoneGraphic.lineTo(x1, y1);
      x1 += spaceX;
      y1 += spaceY;
      zoneGraphic.moveTo(x1, y1);
      hyp -= spaceLength;
    }
    zoneGraphic.moveTo(x2, y2);
  }

But this draws the dashed line like this enter image description here

What I want is enter image description here

pixi.js canvas javascript
2 Answers

You can do that with setLineDash:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

Here is a code sample:

var ctx = document.getElementById("c").getContext("2d");
ctx.font = "60px Arial";

ctx.setLineDash([5, 5]);
ctx.strokeText("ABC", 50, 60);

ctx.rect(5, 5, 190, 90);
ctx.lineTo(40,80);
ctx.stroke();
<canvas id="c" width=200 height=100></canvas>

That is just pure JS no Pixi involved, I imagine the same is available in that library, if not you should be able to do it directly with JS on the canvas

user_75998330
user_31747310
Related