Konva简单实例

一、简介

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

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

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

官网：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);

文本属性：

Name	Type	Argument	Description
fontFamily	String		字体，默认是Arial
fontSize	Number		像素。默认值为12
fontStyle	String		可以是normal、 bold、talic。默认是normal
fontVariant	String		可以是normal 、small-caps。默认是normal
textDecoration	String		可以是line-through、underline 、string。默认是 string.
text	String
align	String		可以是 left、center、right
verticalAlign	String		可以是top、middle、bottom
padding	Number
lineHeight	Number		默认值为1
wrap	String		可以是word、char、none。默认是 word
ellipsis	Boolean		可以是true、false。 默认是 false

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);

属性介绍：

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

 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值。

三、实例代码

欢迎关注