1.前言
- 简介:Konva.js - 适用于桌面/移动端应用的 HTML5 2d canvas 库
- 个人体验:原生的canvas只支持绘制基本的直线,矩形,文字,图片,扇形等,如果要支持更复杂的功能,无法支持复杂的图形,移动,动画等,所以得引用相关库来实现,提示开发效率
- 本篇文章只是初步使用,更详细的功能请查阅 官方文档
2.基本说明
- 无论是网页还是游戏引擎,其本质都是节点嵌套,最终组合到一起进行渲染,Konva也一样
- Konva有以下对象Stage(舞台),layers(图层),groups(组),和 shapes(图形)
- 节点结构图:groups(组)不是必须的,它可以看作是多个shapes(图形)的一个组合
![](https://img2024.cnblogs.com/blog/1813302/202404/1813302-20240412172034640-1475157295.png)
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>
- 渲染结果
![](https://img2024.cnblogs.com/blog/1813302/202404/1813302-20240412174858237-851009521.png)
3.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(图形) 的坐标是其实就是相对于他们父节点原点的偏移量
![](https://img2024.cnblogs.com/blog/1813302/202404/1813302-20240412181534662-1286196875.png)
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>
- 渲染结果:
![](https://img2024.cnblogs.com/blog/1813302/202404/1813302-20240412184909516-2044388072.png)