大家好,我是前端西瓜哥,我们今天来看看图形的一些常见属性。
几何属性
{
x: 10,
y: 10,
width: 50,
height: 50
}
x 和 y 代表的是图形的 位置,对于矩形来说,是左上角。对于圆形、圆环这些来说,则是在圆心处。
这个位置也是图形进行变形的参考点,或者说是旋转时的中心。
offsetX 和 offsetY 可以改变图形的位置。offset 其实是将画布坐标系的原点移动一定距离,再绘制图形。
比如对矩形,我们将 offsetX 和 offsetY 设置为 width/2 和 height/2,我们就能让矩形的位置跑到矩形的中点。
width 和 height 为图形的宽高。但对于圆形类图形,则是通过半径 radius 来设置大小。
填充(fill)
用法:fill: #f04
修改图形颜色:
rect.fill('green');
fill 方法不仅可以设置颜色,还可以获取颜色,只要不传入参数即可:
const fill = rect.fill();
当然我们还可以使用高级的填充图片、渐变色的功能,需要用到 fillPatternImage
、fillLinearGradientStartPoint
、fillLinearGradientEndPoint
、fillLinearGradientColorStops
等方法,内容有点多,这里就不展开讲了。
描边(stroke)
描边相关的样式很多,这里只介绍最常用的 stroke 和 strokeWidth。
用法:stroke: '#000'
strokeWidth: 4
修改图形的描边颜色、线宽:
rect.stroke('blue').strokeWidth(8);
konva 支持链式写法。
链式写法,其实就是一个对象,执行了方法后,又返回了这个对象。
这样的话我们就可以将多个方法的调用链接起来,提高代码可读性,常见于修改对象属性值。
获取描边颜色、线宽
const stroke = rect.stroke();
const strokeWidth = rect.strokeWidth();
不透明度(opacity)
用法:opcity: 0.5
设置透明度:
rect.opcity(0.3)
获取不透明度的值:
const opcity = rect.opcity();
显示/隐藏(visible)
用法:visible: true
显示图形:
rect.show();
// 或者
rect.visible(true);
隐藏图形:
rect.hide();
// 或
rect.visible(false);
本质其实是修改图形的 visible 属性,然后重新渲染。show 和 hide 只是语义化的封装。
鼠标样式
我们不能像操作 DOM 元素一样,直接给图形元素设置 cursor 属性。
但我们可以在光标移动到图形上的时候,动态改变 canvas 挂载的 DOM 元素的 cursor 属性。
rect.addEventListener('mouseenter', () => {
stage.container().style.cursor = 'move'
})
rect.addEventListener('mouseleave', () => {
stage.container().style.cursor = ''
})
结尾
不同形状有各自的属性,具体可以看 konva 的文档:
https://konvajs.org/api/Konva.html