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 starting position x, y.

从起始位置x，y绘制圆弧。

Usage:

用法：

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

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

• x — X coordinate of the starting point

  x —起点的X坐标

• y — Y coordinate of the starting point

  y —起点的Y坐标

• radius — Radius of the arc

  radius —弧的半径

• arc — Sweep of the arc (negative values draw clockwise)

  arc — arc扫描(负值顺时针绘制)

• startAngle — Starting offset angle in degrees

  startAngle —以角度为单位的起始偏移角度

• yRadius — Y radius of the arc, if different than radius will draw an oval

  yRadius —圆弧的Y半径，如果与半径不同，将绘制一个椭圆

function drawArc(target, 
                 x, 
                 y, 
                 radius, 
                 arc, 
                 startAngle = 0, 
                 yRadius = 0) {
  
  if (yRadius === 0)
    yRadius = radius;  let segs = Math.ceil(Math.abs(arc) / 45);
  let segAngle = arc / segs;
  let theta = -(segAngle / 180) * Math.PI;
  let angle = -(startAngle / 180) * Math.PI;
  let ax = x - Math.cos(angle) * radius;
  let ay = y - Math.sin(angle) * yRadius;
  let angleMid, bx, by, cx, cy;
  
  if (segs > 0) {
    target.moveTo(x, y);
    for (let i = 0; i < segs; ++i) {
      angle += theta;
      angleMid = angle - (theta / 2);
      bx = ax + Math.cos(angle) * radius;
      by = ay + Math.sin(angle) * yRadius;
      cx = ax + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
      cy = ay + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
      target.quadraticCurveTo(cx, cy, bx, by);
    }
  }
}

绘图楔 (Drawing Wedges)

Draws pie shaped wedges, such as in pie charts.

绘制饼状的楔形图，例如在饼图中。

Usage:

用法：

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

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

• x — X coordinate of the center point

  x —中心点的X坐标

• y — Y coordinate of the center point

  y中心点的Y坐标

• radius — Radius of the wedge

  radius —楔形的半径

• arc — Sweep of the arc (negative values draw clockwise)

  arc — arc扫描(负值顺时针绘制)

• startAngle — Starting angle in degrees

  startAngle —起始角度(度)

• yRadius — Y radius of the wedge

  yRadius —楔的Y半径

function drawWedge(target,
                   x,
                   y,
                   radius,
                   arc,
                   startAngle = 0,
                   yRadius = 0) {
  let segs = Math.ceil(Math.abs(arc) / 45);
  let segAngle = arc / segs;
  let theta = -(segAngle / 180) * Math.PI;
  let angle = -(startAngle / 180) * Math.PI;
  let ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
  let ay = y + Math.sin(-startAngle / 180 * Math.PI) * yRadius;
  let angleMid, bx, by, cx, cy;  if (yRadius === 0)
    yRadius = radius;  target.moveTo(x, y);
  target.lineTo(ax, ay);  for (let i = 0; i < segs; ++i) {
    angle += theta;
    angleMid = angle - (theta / 2);
    bx = x + Math.cos(angle) * radius;
    by = y + Math.sin(angle) * yRadius;
    cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
    cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
    target.quadraticCurveTo(cx, cy, bx, by);
  }  target.lineTo(x, y);
}

绘制多边形 (Drawing Polygons)

Draws polygon shapes of specified number of sides.

绘制指定边数的多边形形状。

Usage:

用法：

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

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

• x — X coordinate of the center point

  x —中心点的X坐标

• y — Y coordinate of the center point

  y中心点的Y坐标

• sides — Number of sides (must be greater than 2)

  sides数—边数(必须大于2)

• radius — Radius from the center point to points on the polygon

  radius —从中心点到多边形上各点的半径

• angle — Starting angle offset in degrees

  angle —以角度为单位的起始角度偏移量

function drawPolygon(target,
                     x,
                     y,
                     sides,
                     radius,
                     angle = 0) {
  let step = (Math.PI * 2) / sides;
  let start = (angle / 180) * Math.PI;
  let n, dx, dy;  target.moveTo(
    x + (Math.cos(start) * radius),
    y - (Math.sin(start) * radius)
  );  for (n = 1; n <= sides; ++n) {
    dx = x + Math.cos(start + (step * n)) * radius;
    dy = y - Math.sin(start + (step * n)) * radius;
    target.lineTo(dx, dy);
  }
}

绘图星 (Drawing Stars)

Draws a star shaped pattern with specified number of points

绘制具有指定点数的星形图案

Usage:

用法：

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

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

• x — X coordinate of the center point

  x —中心点的X坐标

• y — Y coordinate of the center point

  y中心点的Y坐标

• points — Number of points on the star

  points —星点数

• innerRadius — Radius of the inside angles of the star

  innerRadius —恒星内角的半径

• outerRadius — Radius of the outside angles of the star

  outerRadius —恒星outerRadius半径

• angle — Starting angle offset in degrees

  angle —以角度为单位的起始角度偏移量

function drawStar(target,
                  x,
                  y,
                  points,
                  innerRadius,
                  outerRadius,
                  angle = 0) {  let step = (Math.PI * 2) / points;
  let halfStep = step / 2;
  let start = (angle / 180) * Math.PI;
  let n, dx, dy;  target.moveTo(
    x + (Math.cos(start) * outerRadius),
    y - (Math.sin(start) * outerRadius)
  );
  
  for (n = 1; n <= points; ++n) {
    dx = x + Math.cos(start + (step * n) - halfStep) * innerRadius;
    dy = y - Math.sin(start + (step * n) - halfStep) * innerRadius;
    target.lineTo(dx, dy);
    dx = x + Math.cos(start + (step * n)) * outerRadius;
    dy = y - Math.sin(start + (step * n)) * outerRadius;
    target.lineTo(dx, dy);
  }
}

牵引齿轮 (Drawing Gears)

Draws a gear shape with the specified number of sides.

绘制具有指定边数的齿轮形状。

Usage:

用法：

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

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

• x — X coordinate of the center point

  x —中心点的X坐标

• y — Y coordinate of the center point

  y中心点的Y坐标

• sides — Number of teeth on the gear (must be greater than 2)

  sides —齿轮上的齿数(必须大于2)

• innerRadius — Radius of the indent of the teeth

  innerRadius —牙齿凹痕的半径

• outerRadius — Radius of the teeth

  outerRadius —牙齿的半径

• angle — Starting angle offset in degrees

  angle —以角度为单位的起始角度偏移量

• holeSides — Polygonal hole number of sides (must be greater than 2)

  holeSides —边的多边形Kong数(必须大于2)

• holeRadius — Radius of the hole

  holeRadius —Kong的半径

function drawGear(target,
                  x,
                  y,
                  sides,
                  innerRadius = 80,
                  outerRadius = 4,
                  angle = 0,
                  holeSides = 2,
                  holeRadius = 0) {
  let step = (Math.PI * 2) / sides;
  let qtrStep = step / 4;
  let start = (angle / 180) * Math.PI;
  let n, dx, dy;  target.moveTo(
    x + (Math.cos(start) * outerRadius),
    y - (Math.sin(start) * outerRadius)
  );
  
  for (n = 1; n <= sides; ++n) {
    dx = x + Math.cos(start + (step * n) - (qtrStep * 3)) * innerRadius;
    dy = y - Math.sin(start + (step * n) - (qtrStep * 3)) * innerRadius;
    target.lineTo(dx, dy);
    dx = x + Math.cos(start + (step * n) - (qtrStep * 2)) * innerRadius;
    dy = y - Math.sin(start + (step * n) - (qtrStep * 2)) * innerRadius;
    target.lineTo(dx, dy);
    dx = x + Math.cos(start + (step * n) - qtrStep) * outerRadius;
    dy = y - Math.sin(start + (step * n) - qtrStep) * outerRadius;
    target.lineTo(dx, dy);
    dx = x + Math.cos(start + (step * n)) * outerRadius;
    dy = y - Math.sin(start + (step * n)) * outerRadius;
    target.lineTo(dx, dy);
  }  step = (Math.PI * 2) / holeSides;  target.moveTo(
    x + (Math.cos(start) * holeRadius),
    y - (Math.sin(start) * holeRadius)
  );  for (n = 1; n <= holeSides; ++n) {
    dx = x + Math.cos(start + (step * n)) * holeRadius;
    dy = y - Math.sin(start + (step * n)) * holeRadius;
    target.lineTo(dx, dy);
  }
}

拉爆 (Drawing Bursts)

Draw a star burst with the specified number of sides.

用指定的边数绘制一个星状爆发。

Usage:

用法：

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

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

• x — X coordinate of the center point

  x —中心点的X坐标

• y — Y coordinate of the center point

  y中心点的Y坐标

• sides — Number of teeth on the gear (must be greater than 2)

  sides —齿轮上的齿数(必须大于2)

• innerRadius — Radius of the indent of the curves

  innerRadius —曲线压痕的半径

• outerRadius — Radius of the outermost points

  outerRadius —最外点的半径

• angle — Starting angle offset in degrees

  angle —以角度为单位的起始角度偏移量

function drawBurst(target,
                   x,
                   y,
                   sides,
                   innerRadius,
                   outerRadius,
                   angle = 0) {
  let step = (Math.PI * 2) / sides;
  let halfStep = step / 2;
  let qtrStep = step / 4;
  let start = (angle / 180) * Math.PI;
  let n, dx, dy, cx, cy;  target.moveTo(
    x + (Math.cos(start) * outerRadius),
    y - (Math.sin(start) * outerRadius)
  );   for (n = 1; n <= sides; ++n) {
    cx = x + Math.cos(start + (step * n) - (qtrStep * 3)) * (innerRadius / Math.cos(qtrStep));
    cy = y - Math.sin(start + (step * n) - (qtrStep * 3)) * (innerRadius / Math.cos(qtrStep));
    dx = x + Math.cos(start + (step * n) - halfStep) * innerRadius;
    dy = y - Math.sin(start + (step * n) - halfStep) * innerRadius;
    target.quadraticCurveTo(cx, cy, dx, dy);
    cx = x + Math.cos(start + (step * n) - qtrStep) * (innerRadius / Math.cos(qtrStep));
    cy = y - Math.sin(start + (step * n) - qtrStep) * (innerRadius / Math.cos(qtrStep));
    dx = x + Math.cos(start + (step * n)) * outerRadius;
    dy = y - Math.sin(start + (step * n)) * outerRadius;
    target.quadraticCurveTo(cx, cy, dx, dy);
  }
}

翻译自: https://levelup.gitconnected.com/advanced-drawing-with-pixi-js-cd3fddc1d69e

pixi.js 5.0