0
288
ViewsHow to draw dashed line between two points in PIXI.js
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 
What I want is 
2 answers
Answer question0
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
0
Try "PixiJS Smooth Graphics" package - for example like described here: https://github.com/pixijs/pixijs/issues/7897#issuecomment-948493891