konva系列教程4：图形属性

大家好，我是前端西瓜哥，我们今天来看看图形的一些常见属性。

几何属性

{
  x: 10,
  y: 10,
  width: 50,
  height: 50
}

1
2
3
4
5
6
7

x 和 y 代表的是图形的 位置，对于矩形来说，是左上角。对于圆形、圆环这些来说，则是在圆心处。

这个位置也是图形进行变形的参考点，或者说是旋转时的中心。

offsetX 和 offsetY 可以改变图形的位置。offset 其实是将画布坐标系的原点移动一定距离，再绘制图形。

比如对矩形，我们将 offsetX 和 offsetY 设置为 width/2 和 height/2，我们就能让矩形的位置跑到矩形的中点。

width 和 height 为图形的宽高。但对于圆形类图形，则是通过半径 radius 来设置大小。

填充（fill）

用法：fill: #f04

修改图形颜色：

rect.fill('green');

1
2

fill 方法不仅可以设置颜色，还可以获取颜色，只要不传入参数即可：

const fill = rect.fill();

1
2

当然我们还可以使用高级的填充图片、渐变色的功能，需要用到 fillPatternImage 、fillLinearGradientStartPoint 、fillLinearGradientEndPoint 、fillLinearGradientColorStops 等方法，内容有点多，这里就不展开讲了。

描边（stroke）

描边相关的样式很多，这里只介绍最常用的 stroke 和 strokeWidth。

用法：stroke: '#000' strokeWidth: 4

修改图形的描边颜色、线宽：

rect.stroke('blue').strokeWidth(8);

1
2

konva 支持链式写法。

链式写法，其实就是一个对象，执行了方法后，又返回了这个对象。

这样的话我们就可以将多个方法的调用链接起来，提高代码可读性，常见于修改对象属性值。

获取描边颜色、线宽

const stroke = rect.stroke();
const strokeWidth = rect.strokeWidth();

1
2
3

不透明度（opacity）

用法：opcity: 0.5

设置透明度：

rect.opcity(0.3)

1
2

获取不透明度的值：

const opcity = rect.opcity();
1

显示/隐藏（visible）

用法：visible: true

显示图形：

rect.show();
// 或者
rect.visible(true);

1
2
3
4

隐藏图形：

rect.hide();
// 或
rect.visible(false);

1
2
3
4

本质其实是修改图形的 visible 属性，然后重新渲染。show 和 hide 只是语义化的封装。

鼠标样式

我们不能像操作 DOM 元素一样，直接给图形元素设置 cursor 属性。

但我们可以在光标移动到图形上的时候，动态改变 canvas 挂载的 DOM 元素的 cursor 属性。

rect.addEventListener('mouseenter', () => {
  stage.container().style.cursor = 'move'
})

rect.addEventListener('mouseleave', () => {
  stage.container().style.cursor = ''
})

1
2
3
4
5
6
7
8

结尾

不同形状有各自的属性，具体可以看 konva 的文档：

https://konvajs.org/api/Konva.html