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>
  • 渲染结果：
posted @   ---空白---  阅读(854)  评论(0)  编辑  收藏  举报
相关博文：
· 个人vue组件合集
· Vue第三方插件
· Konva-前端绘图框架
· 前端的图表绘制框架Konva-基本介绍
· konva系列教程2：绘制图形
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示