pixi.js 5.0_使用Pixi.js进行高级绘图

pixi.js 5.0

Stars, bursts, gears, wedges, polygons, arcs, and dashes all drawn using Pixi.js, the HTML5 creation engine with the fastest, most flexible 2D WebGL renderer.

使用Pixi.js(具有最快，最灵活的2D WebGL渲染器HTML5创建引擎)绘制的星形，爆炸，齿轮，楔形，多边形，弧形和破折号。

It was many years ago when adding a burst to a graphic I stumbled upon the Funky Monkey drawing script by Ric Ewing. Comments embedded in the function immediately resonated with me:

多年前，当在图形中添加连拍时，我偶然发现了Ric Ewing的Funky Monkey绘图脚本。 函数中嵌入的注释立即引起了我的共鸣：

Burst is a method for drawing star bursts. If you’ve ever worked with an advertising department, you know what they are ;-)

爆发是一种绘制星爆发的方法。 如果您曾经在广告部门工作过，您就会知道他们是什么;-)

Clients tend to want them, Developers tend to hate them…

客户倾向于想要它们，开发人员倾向于讨厌它们……

Thought I’d bring these back to life leveraging modern web.

以为我会利用现代网络将它们重新带回生活。

Here are seven of those drawing shapes ported to Pixi.js.

这是移植到Pixi.js的七个图形。

划线 (Drawing Dashes)

Draws a dashed line from point x1, y1 to point x2, y2.

从点x1，y1到点x2，y2绘制一条虚线。

Usage:

用法：

• target — Graphics instance on which dashed line will be drawn

  target —将在其上绘制虚线的图形实例

• x1 — Starting position along x-axis

  x1 —沿x轴的起始位置

• y1 — Starting position along y-axis

  y1沿y轴的起始位置

• x2 — Final position along x-axis

  x2 —沿x轴的最终位置

• y2 — Final position along y-axis

  y2沿y轴的最终位置

• dashLength — Length of each dash, in pixels

  dashLength —每个破折号的长度，以像素为单位

• spaceLength — Space between dashes, in pixels

  spaceLength —破折号之间的间隔，以像素为单位

function drawDash(target,
                  x1,
                  y1,
                  x2,
                  y2,
                  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;  target.moveTo(x1, y1);  while (hyp > 0) {
       
    x1 += dashX;
    y1 += dashY;
    hyp -= dashLength;
    if (hyp < 0) {
       
      x1 = x2;
      y1 = y2;
    }
    target.lineTo(x1, y1);
    x1 += spaceX;
    y1 += spaceY;
    target.moveTo(x1, y1);
    hyp -= spaceLength;
  }
  target.moveTo(x2, y2);
}

绘制弧 (Drawing Arcs)

Draws an arc from star