如何使用Konva.js通过线条绘制多边形并实现变换功能？

要实现用户绘制自定义多边形并支持旋转、缩放等变换，我们可以基于Konva.js的事件监听、图形绘制和Transformer工具来完成，具体步骤如下：

1. 初始化Konva舞台与基础层 #

先创建舞台和两个分层：一个用于承载绘制过程中的临时线条与顶点标记，另一个用于存放最终完成的多边形，避免绘制过程的临时元素干扰成品图形。

<div id="container"></div>

<script src="https://unpkg.com/konva@9.2.0/konva.min.js"></script>
<script>
  // 创建舞台实例
  const stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
  });

  // 临时绘制层（存放引导线、顶点标记）
  const drawLayer = new Konva.Layer();
  // 成品多边形图层
  const shapeLayer = new Konva.Layer();

  stage.add(drawLayer);
  stage.add(shapeLayer);
</script>

2. 实现多边形绘制逻辑 #

通过监听鼠标事件记录顶点坐标，实时预览绘制路径，支持双击或回车完成绘制：

• 鼠标按下：记录第一个顶点，添加顶点标记，开启绘制状态
• 鼠标移动：更新临时引导线，连接最后一个顶点与当前鼠标位置
• 鼠标松开：固定当前顶点
• 双击/回车：完成多边形绘制（需至少3个顶点）

let isDrawing = false;
let points = [];
// 临时引导线
const tempLine = new Konva.Line({
  stroke: '#1abc9c',
  strokeWidth: 2,
  dash: [5, 5]
});
drawLayer.add(tempLine);

// 鼠标按下触发顶点记录
stage.on('mousedown', (e) => {
  if (e.target === stage) {
    isDrawing = true;
    const pos = stage.getPointerPosition();
    points.push(pos.x, pos.y);

    // 添加红色顶点标记
    const dot = new Konva.Circle({
      x: pos.x,
      y: pos.y,
      radius: 4,
      fill: '#e74c3c'
    });
    drawLayer.add(dot);
    drawLayer.draw();
  }
});

// 鼠标移动更新引导线
stage.on('mousemove', () => {
  if (!isDrawing) return;
  const pos = stage.getPointerPosition();
  tempLine.points([...points, pos.x, pos.y]);
  drawLayer.draw();
});

// 鼠标松开固定顶点
stage.on('mouseup', () => {
  if (!isDrawing) return;
  tempLine.points(points);
  drawLayer.draw();
});

// 双击完成绘制
stage.on('dblclick', () => {
  if (points.length < 6) return; // 至少3个顶点（每个顶点含x、y两个值）
  finishPolygon();
});

// 回车完成绘制
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && points.length >= 6) {
    finishPolygon();
  }
});

3. 完成多边形绘制并添加变换功能 #

当顶点数量达标后，创建正式多边形，清空临时绘制元素，并通过Konva.Transformer为多边形添加旋转、缩放、拖拽能力：

function finishPolygon() {
  isDrawing = false;

  // 创建成品多边形
  const polygon = new Konva.Polygon({
    points: points,
    fill: 'rgba(34, 167, 240, 0.5)',
    stroke: '#22a7f0',
    strokeWidth: 2,
    draggable: true // 开启拖拽
  });
  shapeLayer.add(polygon);

  // 添加Transformer组件，支持旋转、缩放
  const transformer = new Konva.Transformer({
    node: polygon,
    rotateEnabled: true,
    scaleEnabled: true,
    borderColor: '#22a7f0'
  });
  shapeLayer.add(transformer);

  // 清空临时绘制内容
  points = [];
  tempLine.points([]);
  drawLayer.destroyChildren();
  drawLayer.draw();
  shapeLayer.draw();
}

效果预览 #

内容的提问来源于stack exchange，提问作者f-accu