konva系列教程4:图形属性
大家好,我是前端西瓜哥,我们今天来看看图形的一些常见属性。
几何属性
{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
konva系列教程4:图形属性相关推荐
- konva系列教程2:绘制图形
大家好,我是前端西瓜哥,今天继续学习 konva. konva 库为我们提供了很多基础的图形,我们来看看具体都有哪些. 绘制矩形(Rect) // 舞台对象,会找到对应元素,在其下创建 canvas ...
- konva系列教程3:自定义图形
大家好,我是前端西瓜哥. 我们来看下怎么用 kanva 绘制自定义图形. 现在我们要绘制一个菱形.所谓菱形,就是所有边相等的四边形. 我们需要传入 (x, y) 设置菱形的左上角,并用 width 和 ...
- konva 系列教程 1:konva 是什么?
konva 是一个对 canvas API 做了封装增强的 JavaScript 库. HTML 原生的 canva 提供的 API 比较底层,用法上像是操纵一支画笔进行各种操作,画完就结束了. ca ...
- 【EASYDOM系列教程】之属性操作
Element 对象提供了一些方法实现 HTML 元素的属性操作,这种操作要比 Node 对象提供的方法操作属性节点要更便捷. 获取指定元素的属性 Element 对象提供了 getAttribute ...
- Python编程系列教程第12讲——属性和方法
视频地址:http://v.youku.com/v_show/id_XNTgyOTg4NjQ4.html 普及网络安全知识,推动信息技术发展. 为祖国的网络安全撑起一片蓝天,为网络安全爱好者构建一方家 ...
- sprinboot中编程式事务_SpringBoot系列教程之事务传递属性
200202-SpringBoot系列教程之事务传递属性 对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文 ...
- js系列教程2-对象、对象属性全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- 【AD系列教程】在PCB中加入任意图形
[AD系列教程] 在PCB中加入任意图形 # 首先制作要加入到PCB板中的LOGO,保存为BMP位图格式.这里我要插入的是我的微博的二维码,为了增加二维码的辨识度,将二维码生成工具生成的二维码用 ...
- c语言输出漏斗图形7层,ECharts 教程 漏斗图属性与实例介绍 - 闪电教程JSRUN
漏斗图属性与实例介绍 ECharts漏斗图 在 ECharts 系列中,漏斗图使用 series[i]-funnel 表示.漏斗图适用于业务流程比较规范.周期长.环节多的流程分析,通过漏斗各环节业务数 ...
最新文章
- 小程序在wxml使用indexOf
- CodeSmith(9)访问数据库多个表
- 容器编排技术 -- Kubernetes kubectl create service clusterip 命令详解
- IDEA打开clone的项目编译时出现java: 程序包org.springframework.boot不存在。
- 移动端日历插件_小程序日历组件开发教程!
- docker 安装与常用命令与常用容器(containers)环境
- 触控屏c语言程序,触摸屏编程软件 C-more Micro Programming Software V3.0
- 转. Dynamics AX 20年简史
- PS 快捷键大全(psshortcut)
- 数字化转型中平台思维的十大要素-《数字化转型的道与术》
- PS入门(1-7) HSB色彩模式
- 群晖nas安装监控后台SurveillanceStation
- 破解access密码
- Linux查看程序端口占用情况 netstat -apn | grep 8080
- auto.js B0012 进入各频道 查找父控件 子控件 2021-10-03
- 【CTF WriteUp】2020电信和互联网行业赛个人赛部分Crypto题解
- 笔记本控制台开启热点
- 数字图像处理第八章----图像压缩
- Opencv中Mat类详细解读(学习笔记)
- 《Python渗透测试编程技术:方法与实践》:信息的利用