0
293
VistasCómo dibujar una línea discontinua entre dos puntos en PIXI.js
Necesito dibujar un polígono discontinuo usando las coordenadas de las esquinas del polígono. Para esto, iteraré sobre las esquinas y seguiré dibujando una línea discontinua entre las dos esquinas (esquina [i] y esquina [i+1]) en todas las iteraciones. Encontré un código en la red para hacerlo, así que actualmente estoy haciendo esto:
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); } Pero esto dibuja la línea discontinua así 
lo que quiero es 
2 Respuestas
Responde la pregunta0
Puedes hacer eso con setLineDash:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
Aquí hay una muestra de código:
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>Eso es solo JS puro sin Pixi involucrado, imagino que lo mismo está disponible en esa biblioteca, si no, debería poder hacerlo directamente con JS en el lienzo
0
Pruebe el paquete "PixiJS Smooth Graphics" , por ejemplo, como se describe aquí: https://github.com/pixijs/pixijs/issues/7897#issuecomment-948493891