用 Konva.js 从线条绘制多边形：实现旋转与缩放

2024-03-03 04:03:41

用 Konva.js 从线条绘制多边形：旋转与缩放

介绍

Konva.js 是一款强大的 JavaScript 库，用于创建交互式、可视化化的 2D 图形和动画。它提供全面的 API，可以绘制各种形状，例如线条、矩形、圆形和多边形。本指南将向你展示如何使用 Konva.js 从线条绘制多边形，并应用变换（旋转和缩放）到该多边形。

步骤 1：设置画布

首先，创建一个 Konva.js 画布，它将容纳多边形。

const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});

步骤 2：创建线条

创建要用于绘制多边形的线条。

const line1 = new Konva.Line({
  points: [0, 0, 100, 0],
  stroke: 'black',
  strokeWidth: 2
});

步骤 3：创建多边形

使用线条创建一个多边形。

const polygon = new Konva.Polygon({
  points: [],
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});

将线条的点填充到多边形的 points 属性中。

步骤 4：将线条连接到多边形

使用 add 方法将线条添加到多边形中。

for (let i = 0; i < lines.length; i++) {
  polygon.add(lines[i]);
}

步骤 5：应用变换

旋转和缩放多边形。

polygon.rotate(45);
polygon.scale({ x: 0.5, y: 0.5 });

步骤 6：将多边形添加到画布

将多边形添加到画布中。

stage.add(polygon);

完整代码示例

const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});

const lines = [];

for (let i = 0; i < 4; i++) {
  const line = new Konva.Line({
    points: [Math.random() * 500, Math.random() * 500, Math.random() * 500, Math.random() * 500],
    stroke: 'black',
    strokeWidth: 2
  });

  lines.push(line);
  stage.add(line);
}

const polygon = new Konva.Polygon({
  points: [],
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});

for (let i = 0; i < lines.length; i++) {
  polygon.add(lines[i]);
}

polygon.rotate(45);
polygon.scale({ x: 0.5, y: 0.5 });

stage.add(polygon);