Konva.js
1.前言
- 简介：Konva.js - 适用于桌面/移动端应用的 HTML5 2d canvas 库
- 个人体验：原生的canvas只支持绘制基本的直线，矩形，文字，图片，扇形等，如果要支持更复杂的功能，无法支持复杂的图形，移动，动画等，所以得引用相关库来实现，提示开发效率
- 本篇文章只是初步使用，更详细的功能请查阅 官方文档
2.基本说明
- 无论是网页还是游戏引擎，其本质都是节点嵌套，最终组合到一起进行渲染，Konva也一样
- Konva有以下对象Stage（舞台），layers（图层），groups（组），和 shapes（图形）
- 节点结构图：groups（组）不是必须的，它可以看作是多个shapes（图形）的一个组合
3.基本使用
- Konva的对象虽然父子结构是固定的，但是对象创建时是彼此独立的，等创建完毕后再添加到对应的父节点即可
<script>
//创建Stage（舞台）
var stage = new Konva.Stage({
container: 'box',//传入容器id，一般对应的元素是div，Konva会创建的dom结构放入这个容器中
width: 500,//必填 画布大小
height: 500,//必填 画布大小
})
//创建layers（图层）
var layer = new Konva.Layer()
//创建groups（组）
//创建shapes（图形）
var circle = new Konva.Circle({
x: stage.width() / 2,//圆心坐标
y: stage.height() / 2,//圆心坐标
radius: 70,//半径
fill: 'red',//填充色
stroke: 'black',//描边色
strokeWidth: 4,//描边大小
})
</script>
- 将创建的节点添加到对应的位置，并执行渲染
<script>
//将图形添加到layers（图层）
layer.add(circle)
//将layers（图层）添加到舞台
stage.add(layer)
//执行渲染
layer.draw()
</script>
- 渲染结果
3.groups（组）
- 创建groups（组）
//创建groups（组）
var group = new Konva.Group({
x: 0,//位置坐标
y: 0,//位置坐标
//宽高非必填
})
- 将shapes（图形）添加到创建groups（组）中
//将图形添加到组
group.add(circle)
- 完整代码
<script>
//创建Stage（舞台）
var stage = new Konva.Stage({
container: 'box',//传入容器id，一般对应的元素是div，Konva会创建的dom结构放入这个容器中
width: 500,//必填 画布大小
height: 500,//必填 画布大小
})
//创建layers（图层）
var layer = new Konva.Layer()
//创建groups（组）
var group = new Konva.Group({
x: stage.width() / 2,//位置坐标
y: stage.height() / 2,//位置坐标
//宽高非必填
})
//创建shapes（图形）
var circle = new Konva.Circle({
x: 0,//圆心坐标
y: 0,//圆心坐标
radius: 30,//半径
fill: 'red',//填充色
})
//创建shapes（图形）
var circle2 = new Konva.Circle({
x: 50,//圆心坐标
y: 50,//圆心坐标
radius: 30,//半径
fill: 'blue',//填充色
})
//将图形添加到组
group.add(circle)
group.add(circle2)
//将组添加到layers（图层）
layer.add(group)
//将layers（图层）添加到舞台
stage.add(layer)
//执行渲染
layer.draw()
</script>
- 关于坐标：shapes（图形） 的坐标是其实就是相对于他们父节点原点的偏移量
4.使用vue渲染
- 可以把Konva的对象Stage（舞台），layers（图层），groups（组），和 shapes（图形） 当成一个个组件进行调用，使用插槽的形式代替add()方法，让代码结构更加直观
- 需要引入对应的插件vue-konva，下载地址
<body>
<div id="app" v-cloak>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</div>
</body>
<script src="./libs/vue/2.6.14/vue.min.js"></script>
<script src="./libs/konva/konva.min.js"></script>
<script src="./libs/konva/vue-konva.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
//Stage（舞台）配置参数
configKonva: {
width: 500,//必填 画布大小
height: 500,//必填 画布大小
},
//图形配置参数
configCircle: {
x: 50,//圆心坐标
y: 50,//圆心坐标
radius: 30,//半径
fill: 'red',//填充色
}
}
})
</script>
- 渲染结果：
Konva.js的更多相关文章
- 利用面向对象思想封装Konva动态进度条
1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 使用Konva创建进度条
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用konva来绘制一个矩形
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Konva的使用
KonvaJS 快速入门 Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点 ...
- canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JS学习-常用的Web API
web API web-api 分类 链接 描述 操作文档的API 操作document dom,html,svg 从服务器获取数据的API XMLHttpRequest XMLHttpRequest ...
- 第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- 封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...
- Canvas开发库封装
一.Canvas第三方类库 1.常见的第三方类库 konva.js <style> body{ margin:0; } </style> </head> <b ...
- HTML5 Canvas 2D library All In One
HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...
随机推荐
- 搭建本地nginx-rtmp服务，初体验rtmp推流、拉流
实验环境说明: ubuntu 16.04 进行本实验的前提:需要在ubuntu上搭建好ffmpeg环境,参考我的另一篇博文 ffmpeg编译过程经历的99八十一难 下面开始本文内容 PART1 编译安 ...
- 记一次 RabbitMQ 消费者莫名消失问题的排查
开心一刻 今天好哥们找我借钱哥们:兄弟,我最近手头紧,能不能借我点...我:我手头也不宽裕,要不你试试银行贷款或者花呗?哥们:不行,那个借了要还的我:... 问题回顾 某天下午,生产监控告警:消息积压 ...
- 使用pxe安装ARM服务器(鲲鹏920)遇到的坑
一.关于PXE获取到IP之后无ACK,无法获取引导文件. 目前ARM服务器基本都是使用UEFI的方式进行引导,我们只需要关注EFI方式引导即可,Legacy引导已经随着时代的发展被扫进历史的垃圾桶. ...
- PasteForm最佳CRUD实践，实际案例PasteTemplate详解之3000问(二)
作为"贴代码"力推的一个CRUD实践项目PasteTemplate,在对现有的3个项目进行实战后效果非常舒服!下面就针对PasteForm为啥我愿称为最佳CRUD做一些回答: 哪里 ...
- 将ASD光谱仪的.asd文件转为文本文件
本文介绍基于ViewSpec Pro软件,将ASD地物光谱仪获取到的.asd格式文件,批量转换为通用的.txt文本格式文件的方法. ASD光谱仪是英国Malvern Panalytical公司 ...
- 揭秘！尤雨溪成立的VoidZero如何改变前端世界
前言 Vue和Vite之父尤雨溪宣布成立公司 VoidZero,目前已经融资3200万.这篇文章欧阳将带你了解VoidZero是如何改变javascript的世界! 关注公众号:[前端欧阳],给自己一 ...
- USB type-c CC管脚如何做到正反接检测功能
USB Type-C 连接器的 CC (Configuration Channel) 管脚用于实现插头方向检测和电源管理.具体来说,USB Type-C 连接器具有两个 CC 管脚:CC1 和 CC2 ...
- 关于set实现结构体自动去重原理的推论
转自本人博客,原文链接 先说结论 在每个操作均为log复杂度的前提下,set无法在判断顺序和重复关键字不同时完成对结构体元素的去重. 首先我们先看这段结构体定义,目的是先按num相等进行去重,再按ke ...
- 什么是变量污染？ let、const、var的区别？
变量污染就是全局变量滥用,造成报错,覆盖等问题:简单讲就是使用了相同的标识符声明了全局变量,var关键字声明相同的变量名会覆盖,let.const重复声明相同的变量名会直接报错: var 可以声明提升 ...
- C# efcode 新建表格数据 增删改查
using TestDbContext ctx = new TestDbContext(); var b1 = new Book { AuthorName = "杨中科", Tit ...