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 ...
随机推荐
- 鸿蒙应用开发：环境搭建(Mac)与项目构建
2021年6月2日,华为发布了鸿蒙操作系统-HarmonyOS.它是一款"面向未来".面向全场景(移动办公.运动健康.社交通信.媒体娱乐等)的分布式操作系统.我们要基于Harm ...
- Open Graph protocol
大纲介绍 Open Graph protocol 是 facebook 2010 年推出的一套规范, 用途是通过一些简单的 meta tag 来描述网站的内容. 这样在 sharing 网址的时候就可 ...
- 十种SQL的语法
一.ORDER BY FIELD()自定义排序逻辑 ORDER BY FIELD(str,str1,...) 自定义排序sql如下: SELECT * from order_diy ORDER BY ...
- 【QT界面美化】QT界面美化效果截图QSS+QML
贴几个QT做的界面美化效果截图. 先来一张动图,有一些画面是QT Widgets + QSS实现的:另外一些画面是QT QML实现的. QT界面美化效果图QT QSS QML 补天云QT技术培训专家 ...
- 使用.NET并行任务库(TPL)与并行Linq(PLINQ)充分利用多核性能
前言 最近比较闲,(项目要转Java被分到架构组,边缘化人员,无所事事 哈哈哈哈) 记录一下前段时间用到的.NET框架下采用并行策略充分利用多核CPU进行优化的一个方法 起因是项目中有个结算的方法,需 ...
- 暑假集训CSP提高模拟5
听好了: 7 月 22 日,比样的学长就此陷落.每个陷落的学长都将迎来一场模拟赛,为这些模拟赛带来全新的题面. 你所熟知的一切都将改变,你所熟悉的算法都将加诸比样的考验. 至此,一锤定音. 尘埃,已然 ...
- 交通网络分析性能再升级，SuperMap iServer新增开启SSC分析模型
导语 SSC分析模型,全名SuperMap Short Cut,底层采用Contraction Hierarchies(简称CH)算法,该算法旨在通过对图形进行预处理和优化来降低最佳路径分析的时间复杂 ...
- 北京智和信通亮相2023IT运维大会，共话数智浪潮下自动化运维新生态
2023年9月21日,由IT运维网.<网络安全和信息化>杂志社联合主办的"2023(第十四届)IT运维大会"在北京成功举办.大会以"以数为基 智引未来&quo ...
- 关于 JS 函数的一切
本文基于: Bilibili - 自由的加百利 前置条件: 需掌握函数的编写.传参.返回.调用 理解作用域.掌握定时器的用法 知道引用类型和基本数据类型的区别 知道函数也是引用类型 听说过同步异步的概 ...
- ORM底层逻辑
1 数据库必然是只认识Sql语句 2 ORM的底层必然是ADO.NET 3 ORM也可以说是ADO的一种封装 ORM: 1 通过实体生成Sql语句-大量的反射 2 对应映射关系