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的更多相关文章

  1. 利用面向对象思想封装Konva动态进度条

    1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 使用Konva创建进度条

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用konva来绘制一个矩形

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Konva的使用

    KonvaJS 快速入门 Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点 ...

  5. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. JS学习-常用的Web API

    web API web-api 分类 链接 描述 操作文档的API 操作document dom,html,svg 从服务器获取数据的API XMLHttpRequest XMLHttpRequest ...

  7. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  8. 封装构造函数，用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  9. Canvas开发库封装

    一.Canvas第三方类库 1.常见的第三方类库 konva.js <style> body{ margin:0; } </style> </head> <b ...

  10. HTML5 Canvas 2D library All In One

    HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...

随机推荐

  1. SpringCloud入门（二）服务间调用和案例

    一.微服务拆分注意事项微服务拆分注意事项:1.单一职责:不同微服务,不要重复开发相同业务2.数据独立:不要访问其它微服务的数据库3.面向服务:将自己的业务暴露为接口,供其它微服务调用 1.微服务需要根 ...

  2. Angular 18+ 高级教程 – 关于本教程

    版本声明 本教程写于 Angular v17,但往后的所有新功能,API 都有更新到相关文章里头,所以教程总是最新的,大家可以安心学习. 前言 光阴飞逝,一转眼,我尽然已经有两年多的时间完全没有接触 ...

  3. ASP.NET Core – Web API Versioning

    前言 项目持续维护, API 就需要版本控制. ASP.NET Core 有官方的插件专门处理 API 版本控制. 主要参考 Your Guide to REST API Versioning in ...

  4. ubuntu22.04安装DBeaver

    要在 Ubuntu22.04 上安装 DBeaver,可以选择使用 Ubuntu 软件中心的图形界面方法或使用命令行方法通过官方 DBeaver 仓库或 Snap 包安装. 方法一:从官方仓库安装 D ...

  5. IDEA 换了电脑，如何导入和导出配置？

    前言 我们在使用IDEA开发时,经常会设置各种各样的配置,时间一长,就会有很多个性化的东西.用起来也越来越顺手.   不过这里可能会有个问题,那就是哪一天我们要换个电脑了,或者想安装新版本的IDEA时 ...

  6. SpringBoot配置多个数据源-详解

    一直在趟坑,从未被超越. 借鉴文章 个人觉得我算是整理的比较详细的了,有些博客老是缺斤少两的.最恶心的是竟然会有人写到,如需下文请关注什么什么公众号. 结构 pom文件 <dependencie ...

  7. ShardingSphere系列（一）——ShardingSphere-JDBC初体验

    Apache ShardingSphere 是一套开源的分布式数据库解决方案组成的生态圈,它由 JDBC.Proxy 和 Sidecar(规划中)这 3 款既能够独立部署,又支持混合部署配合使用的产品 ...

  8. /proc/sys/vm 使用

    这些参数主要是用来调整virtual memory子系统的行为以及数据的写出(从RAM到ROM). 这些节点(参数)的默认值和初始化的过程大部分都可以在mm/swap.c中找到. 目前,/proc/s ...

  9. Spring事务的1道面试题

    每次聊起Spring事务,好像很熟悉,又好像很陌生.本篇通过一道面试题和一些实践,来拆解几个Spring事务的常见坑点. 原理 Spring事务的原理是:通过AOP切面的方式实现的,也就是通过代理模式 ...

  10. 墨天轮访谈 | SelectDB 衣国垒：Apache Doris（incubating）1.0版本特性解析与未来规划

    分享嘉宾:衣国垒 Apache Doris Committer.SelectDB 联合创始人&CTO 整理:墨天轮社区 导读 大家好,我是来自Apache Doris社区的衣国垒,也是Sele ...