文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在PIXI.js中绘制两点之间的虚线

问如何在PIXI.js中绘制两点之间的虚线
EN

Stack Overflow用户

提问于 2022-08-10 11:03:39

回答 2查看 176关注 0票数 1

我需要用多边形的角坐标画一个虚线多边形。为此，我将在拐角上迭代，并在所有迭代中在两个角(角点和corneri+1)之间绘制虚线。我在网络上找到了一些代码，因此我目前正在这样做：

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

但是这画了像这样的虚线

我想要的是

javascript

canvas

pixi.js

回答 2

Stack Overflow用户

发布于 2022-08-10 11:11:38

您可以使用setLineDash实现这一点：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

下面是一个代码示例：

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>

那只是纯粹的JS，不涉及Pixi，我想在那个库中也可以使用，如果不是，您应该可以直接在画布上使用JS来完成它。

票数 1

Stack Overflow用户

发布于 2022-08-11 12:06:10

尝试"PixiJS光滑图形“软件包 -例如，如下所述：https://github.com/pixijs/pixijs/issues/7897#issuecomment-948493891

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73305152

复制

相似问题

问如何在PIXI.js中绘制两点之间的虚线
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在PIXI.js中绘制两点之间的虚线EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在PIXI.js中绘制两点之间的虚线
EN