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. CSS – Houdini

    介绍 简单说这个 Houdini 是一系列 CSS 底层 API,它可以让我们扩展 CSS,做出一些 Polyfill. 举一个例子,让大家有个画面. 我们可以通过 CSS + JS + Canvas ...

  2. Unity中的光源类型(向前渲染路径进行光照计算)

    Unity中的光源类型 Unity中共支持4种光源类型: 平行光 点光源 聚光灯 面光源(在光照烘焙时才可以发挥作用) 光源的属性: 位置 方向(到某个点的方向) 颜色 强度 衰减(到某个点的衰减) ...

  3. [TK] 矩阵取数游戏<简单版> hzoi-tg-906-2

    本题是一个坐标DP问题 状态转移 首先我们注意到,一个状态只能由两种前置状态得到:取左边的数和取右边的数,因此我们以状态为阶段定义如下: \(f[a][b][c]\) 为状态转移数组,其中 \(a\) ...

  4. 全网最适合入门的面向对象编程教程：56 Python字符串与序列化-正则表达式和re模块应用

    全网最适合入门的面向对象编程教程:56 Python 字符串与序列化-正则表达式和 re 模块应用 摘要: Python 的 re 模块提供了强大的正则表达式操作功能,用于在字符串中搜索.匹配.替换等 ...

  5. excel江湖异闻录--自序

    本书原名<excel从高手到小白>,取这个名字是因为,当我只会几个有关excel的快捷键和简单函数时我放眼我所在的"井口",当真有种天下谁与争锋的感觉,的确就我周围的伙 ...

  6. ARM64 SMP多核启动（下）-　PSCI

    4.支持psci情况 上面说了pin-table的多核启动方式,看似很繁琐,实际上并不复杂,无外乎主处理器唤醒从处理器到指定地址上去执行指令,说他简单是相对于功能来说的,因为他只是实现了从处理器的启动 ...

  7. Linux：/proc/meminfo参数详细解释

    Linux:/proc/meminfo参数详细解释 一.Linux内存总览图 二.meminfo参数的详细介绍 /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的&qu ...

  8. 鸿蒙NEXT开发声明式UI是咋回事？

    大家好,我是 V 哥,ArkTS 是 HarmonyOS 优选的主力应用开发语言,它在 TypeScript 的基础上进行了扩展,提供了声明式 UI 描述.自定义组件和动态扩展 UI 元素的能力.这些 ...

  9. 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-2-环境准备与搭建-基于Maven（详细教程）

    1.简介 上一篇宏哥已经讲解和分享了如何通过引入jar包来搭建Java+Playwright自动化测试环境,这一种是比较老的方法,说白了就是过时的老古董,但是我们必须了解和知道,其实maven搭建无非 ...

  10. MYSQL 批量删除以特定前缀开头的表

    前言 这是工作中确实会用到,比如分库分表后有t_order_01.t_order_02.t_order_03...t_order_08 这样的表. 测试过程中造了大量数据进行测试,其中可能含有部分脏数 ...