自定义图形

获取Konva最新的信息

我们可以通过实例化一个 Konva.Shape() 对象创建自定义图形。

当创建自定义图形时，我们需要定义一个绘图方法，绘图函数包含两个入参 Konva.Context 和 shape 实例：

var rect = new Konva.Shape({
  x: 10,
  y: 20,
  fill: '#00D2FF',
  width: 100,
  height: 50,
  sceneFunc: function (context, shape) {
    context.beginPath();
    // 不用设置rect的位置，框架会自动处理
    context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
    // Konva 扩展的一个非常重要的方法
    // 绘制设置的样式
    context.fillStrokeShape(shape);
  }
});

Konva.Context 是对原生 2d canvas context 的包装，它除了和原生 context 有相同的属性和方法外还增加了一些额外的 API。

我们可以通过 Konva.Context 使用 HTML5 Canvas context，还可以使用一些特殊的方法，例如：使用 context.fillStrokeShape(shape) 自动填充、描边、添加阴影。这里提供了两个方法来绘制自定义图形：sceneFunc 和 hitFunc。

sceneFunc 用来定义图形可视的外观，Konva 使用 sceneFunc 绘制用于图形事件检测的图像。因此通常你只需要定义 sceneFunc。如果你想自己定义事件检测，请查看 Custom Hit Region demo。

关于 sceneFunc 和 hitFunc 的最佳实践:

  1. 因为这个方法每秒钟会调用很多次，所以优化很重要。在方法里不要创建 Image (document.createElement('image') or new window.Image()) 或者其它大型对象。

  2. 方法里面不应该包含一些副作用，像移动图形，绑定事件或者改变应用状态等等。

  3. 如果你想要手动添加复杂的样式或者绘制图片，记得定义自定义 hitFunc。

  4. 在 sceneFunc 里不要手动改变图形位置或者缩放图形，因为只要你设置图形相关属性 Konva 将自动处理，例如： shape.x(10)。

  5. 尽可能不要在 sceneFunc 里面手动添加样式，你只需要绘制一些路径，然后使用 context.fillStrokeShape(shape) 处理样式问题。

  6. 更多示例请查看 Konva core shapes implementations。

点击 Konva.Shape documentation 查看详细属性和方法说明。

Konva Custom Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Custom Shape Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
      });

      var layer = new Konva.Layer();

      /*
       * create a triangle shape by defining a
       * drawing function which draws a triangle
       */
      var triangle = new Konva.Shape({
        sceneFunc: function(context, shape) {
          context.beginPath();
          context.moveTo(20, 50);
          context.lineTo(220, 80);
          context.quadraticCurveTo(150, 100, 260, 170);
          context.closePath();

          // (!) Konva specific method, it is very important
          context.fillStrokeShape(shape);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the triangle shape to the layer
      layer.add(triangle);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>