Konva简单实例

拼搏现实的明天。 2021-11-05 14:20 611阅读 0赞

### 一、简介 ###

Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果，可以高效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用。允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的。

**理念**：任何图形都存在于舞台中( Konva.Stage )， 这个舞台中又可以包多个用户层( Konva.Layer )。每一个层中都含有两个<canvas> 着色器： 一个前台渲染器, 一个后台渲染器。前台渲染器是可以看见的部分，而后台渲染器是一个隐藏的 canvas。 后台渲染器为了提高效率实现事件监听的工作。

每一个层可以包含形状( Shape ), 形状的组( Group ), 甚至是由组组成的组. 舞台, 层, 组, 以及形状都是虚拟的节点( node ). 类似于 HTML 页面中的 DOM 节点.

**官网**：[https://konvajs.org/][https_konvajs.org]

### 二、实例 ###

**1、Stage和Layer ：**创建舞台和层，并将层添加至舞台中。

$(function () {
            var container = $("#container");
            var width = 800;
            var height = 600;
    
            // 1、创建舞台 Stage
            var stage = new Konva.Stage({
                container:'container', // 设置容器的 id
                width:width, // 宽度
                height:height, // 高度
            });
    
            // 2、创建层 Layer
            var  layer = new Konva.Layer();
            layer.batchDraw();
    
            // 3、将层添加至舞台容器中
            stage.add(layer);
            stage.batchDraw();
        });

**2、创建文本**

// 创建文本
            var text = new Konva.Text({
                x: 10,
                y: 5,
                text: '使用konvajs实例：',
                fontSize: 14, // 默认值为12
                fontFamily: 'Calibri', // 默认是Arial
                fill: 'green'
            });
            // 添加到层
            layer.add(text);

文本属性：

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Argument</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>fontFamily</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td>&nbsp;字体，默认是Arial</td> 
  </tr> 
  <tr> 
   <td><code>fontSize</code></td> 
   <td>Number</td> 
   <td>&lt;optional&gt;</td> 
   <td>像素。默认值为12</td> 
  </tr> 
  <tr> 
   <td><code>fontStyle</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td>可以是normal、 bold、talic。默认是normal</td> 
  </tr> 
  <tr> 
   <td><code>fontVariant</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td>可以是normal 、small-caps。默认是normal</td> 
  </tr> 
  <tr> 
   <td><code>textDecoration</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>可以是line-through、underline 、string。默认是 string.</p> </td> 
  </tr> 
  <tr> 
   <td><code>text</code></td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>align</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>可以是 left、center、right</p> </td> 
  </tr> 
  <tr> 
   <td><code>verticalAlign</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>可以是top、middle、bottom</p> </td> 
  </tr> 
  <tr> 
   <td><code>padding</code></td> 
   <td>Number</td> 
   <td>&lt;optional&gt;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><code>lineHeight</code></td> 
   <td>Number</td> 
   <td>&lt;optional&gt;</td> 
   <td>默认值为1</td> 
  </tr> 
  <tr> 
   <td><code>wrap</code></td> 
   <td>String</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>可以是word、char、none。默认是 word</p> </td> 
  </tr> 
  <tr> 
   <td><code>ellipsis</code></td> 
   <td>Boolean</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>可以是true、false。&nbsp;默认是 false</p> </td> 
  </tr> 
 </tbody> 
</table>

**3.1、线**

var curve = new Konva.Line({
                x:10,
                y:20,
                points:[50,20,100,30,200,20,300,30,400,20,500,30,600,20],
                stroke:'red',
                tension:2
            });
            layer.add(curve);

**3.1、线：直线**

var straight = new Konva.Line({
                x:10, // x轴的位置
                y:10, // y轴的位置
                points:[10,10,700,10], // 排列：平面阵列的点坐标，定义[x1，y1，x2，y2，x3，y3]。
                stroke:'red', // 颜色
                tension:1 // 数：较高的值将导致更曲线,默认值为0。
            });
            layer.add(straight);

属性介绍：

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Argument</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>points</code></td> 
   <td>Array</td> 
   <td>&nbsp;</td> 
   <td> <p>平面阵列的点坐标，例如 [x1, y1, x2, y2, x3, y3]</p> </td> 
  </tr> 
  <tr> 
   <td><code>tension</code></td> 
   <td>Number</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>线的弯曲程度，默认为0</p> </td> 
  </tr> 
  <tr> 
   <td><code>closed</code></td> 
   <td>Boolean</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>定义线形是否闭合，创建&nbsp;polygon&nbsp;或者&nbsp;blob</p> </td> 
  </tr> 
  <tr> 
   <td><code>bezier</code></td> 
   <td>Boolean</td> 
   <td>&lt;optional&gt;</td> 
   <td> <p>如果没有提供tension，但bezier为true，则使用通过的点将该线绘制为bezier。</p> </td> 
  </tr> 
 </tbody> 
</table>

** 4、矩形**

var rect = new Konva.Rect({
                x:10,
                y:100,
                width: 100, // 宽度
                height: 50, // 高度
                fill: 'red', // 填充颜色
                stroke: 'black', // 描边颜色
                strokeWidth: 1 // 边框的宽度
            });
            layer.add(rect);

**5、圆**

var circle = new Konva.Circle({
                x:200,
                y:120,
                radius:35, // 半径
                fill: 'pink', // 填充颜色
                stroke: 'blue' // 边框的宽度
            });
            layer.add(circle);

**6、椭圆**

var ellipse = new Konva.Ellipse({
                x:300,
                y:120,
                radius : {
                    x : 50, // x轴半径
                    y : 30 // y轴半径
                },
                fill: 'red',
                stroke: 'blue'
            });
            layer.add(ellipse);

**7、图片**

var imgs ="data:image/jpeg;base64,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";
    var imageObj010 = new Image();
    imageObj010.src = imgs; // 图片的路径
    var image = new Konva.Image({
          x: 10,
          y: 200,
          image: imageObj010, 
          width: 750,
          height: 10
    });
    layer.add(image);

注： imageObj010.src是指图片的路径，也可以值图片的base64值。

### 三、实例代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>konvajs实例</title>
        <style>
            body{margin: 0px;padding: 0px;}
            .container{width: 800px;height: 600px;border: 1px solid #726e6f;margin-left: auto;margin-right: auto;}
        </style>
        <link rel="stylesheet" href="konva/smartMenu.css"/>
        <script type="text/javascript" src="konva/konva.min.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
        <div id="container" class="container"></div>
    </body>
    <script>
        $(function () {
            var container = document.getElementById("container");
            var width = 800;
            var height = 600;
            // 1、创建舞台 Stage
            var stage = new Konva.Stage({
                container:'container', // 设置容器的 id
                width:width, // 宽度
                height:height, // 高度
            });
            // 2、创建层 Layer
            var  layer = new Konva.Layer();
    
            // 2.1、创建文本
            var text = new Konva.Text({
                x: 10,
                y: 5,
                text: '使用konvajs实例：',
                fontSize: 14, // 默认值为12
                fontFamily: 'Calibri', // 默认是Arial
                fill: 'green'
            });
            // 添加到层
            layer.add(text);
    
            // 2.2、创建一条直线
            var straight = new Konva.Line({
                x:10, // x轴的位置
                y:10, // y轴的位置
                points:[10,10,700,10], // 排列：平面阵列的点坐标，定义[x1，y1，x2，y2，x3，y3]。
                stroke:'red', // 颜色
                tension:1 // 数：较高的值将导致更曲线,默认值为0。
            });
            layer.add(straight);
    
            // 2.3、创建曲线
            var curve = new Konva.Line({
                x:10,
                y:20,
                points:[50,20,100,30,200,20,300,30,400,20,500,30,600,20],
                stroke:'red',
                tension:2
            });
            layer.add(curve);
    
            // 2.4、创建矩形
            var rect = new Konva.Rect({
                x:10,
                y:100,
                width: 100, // 宽度
                height: 50, // 高度
                fill: 'red', // 填充颜色
                stroke: 'black', // 描边颜色
                strokeWidth: 1 // 边框的宽度
            });
            layer.add(rect);
    
            // 2.5、创建圆
            var circle = new Konva.Circle({
                x:200,
                y:120,
                radius:35, // 半径
                fill: 'pink', // 填充颜色
                stroke: 'blue' // 边框的宽度
            });
            layer.add(circle);
    
            // 2.6、创建椭圆
            var ellipse = new Konva.Ellipse({
                x:300,
                y:120,
                radius : {
                    x : 50, // x轴半径
                    y : 30 // y轴半径
                },
                fill: 'red',
                stroke: 'blue'
            });
            layer.add(ellipse);
    
            // 2.7、图片（渐变的图片）
            var imgs ="data:image/jpeg;base64,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";
            var imageObj010 = new Image();
            imageObj010.src = imgs; // 图片的路径
            var image = new Konva.Image({
                x: 10,
                y: 200,
                image: imageObj010,
                width: 750, // 宽度
                height: 10 // 高度
            });
            layer.add(image);
            layer.batchDraw();
            // 将层添加至舞台容器中
            stage.add(layer);
            stage.batchDraw();
        });
    </script>
    </html>

**欢迎关注**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70][]

[https_konvajs.org]: https://konvajs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70]: /images/20211105/0c26a61244f84bf795caa75223a2f9f0.png