HTML5 canvas 自定义形状教程

要使用 Konva 创建自定义形状，可以使用 Konva.Shape() 对象并定义一个自定义绘制函数。

创建自定义形状时，您需要定义一个绘制函数，该函数接收一个 Konva.Context 渲染器和一个形状实例。以下是一个简单的矩形示例：

const rect = new Konva.Shape({
  x: 10,
  y: 20,
  fill: '#00D2FF',
  width: 100,
  height: 50,
  sceneFunc: function (context, shape) {
    context.beginPath();
    // 不需要设置矩形的位置，Konva 会处理它
    context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
    // (!) Konva 特定方法，非常重要
    // 它会应用所有所需的样式
    context.fillStrokeShape(shape);
  }
});

Konva.Context 是对原生 2D 画布上下文的封装，它具有相同的属性和方法，并具有一些额外的 API。

可以用于绘制自定义形状的两个属性是：

• sceneFunc - 定义形状的视觉外观
• hitFunc - 可选函数，用于定义事件的自定义命中区域（请参见 自定义命中区域演示）

编写 sceneFunc 和 hitFunc 的最佳实践：

1. 优化函数，因为它每秒可能被调用多次。避免创建图像或大型对象。
2. 函数不应有副作用，例如移动形状、附加事件或更改应用状态。
3. 在应用复杂样式或绘制图像时，定义自定义 hitFunc。
4. 不要在 sceneFunc 中手动应用位置和缩放。让 Konva 通过形状属性处理它。
5. 避免在 sceneFunc 中手动设置样式。使用 context.fillStrokeShape(shape) 进行样式设置。
6. 参考 Konva 核心形状实现 获取更多示例。

有关属性和方法的完整列表，请参见 Shape API 参考。

Vanilla

import Konva from 'konva';

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

const layer = new Konva.Layer();
stage.add(layer);

const triangle = new Konva.Shape({
  sceneFunc: function (context, shape) {
    context.beginPath();
    context.moveTo(20, 50);
    context.lineTo(220, 80);
    context.lineTo(100, 150);
    context.closePath();
    context.fillStrokeShape(shape);
  },
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
});

layer.add(triangle);

Open Sandbox

React

import { Stage, Layer, Shape } from 'react-konva';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Shape
          sceneFunc={(context, shape) => {
            context.beginPath();
            context.moveTo(20, 50);
            context.lineTo(220, 80);
            context.lineTo(100, 150);
            context.closePath();
            context.fillStrokeShape(shape);
          }}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-shape :config="shapeConfig" />
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const shapeConfig = {
  sceneFunc: (context, shape) => {
    context.beginPath();
    context.moveTo(20, 50);
    context.lineTo(220, 80);
    context.lineTo(100, 150);
    context.closePath();
    context.fillStrokeShape(shape);
  },
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
};
</script>

Open Sandbox