自定义图形

获取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) 自动填充、描边、添加阴影。这里提供了两个方法来绘制自定义图形:sceneFunchitFunc

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

关于 sceneFunchitFunc 的最佳实践:

  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>