H5画布 canvas（三）canvas 库 Konva.js 的使用

本文详细介绍了HTML5 2d canvas 库 Konva.js的使用方法。

敬之

98523人浏览 · 2022-02-24 09:12:40

敬之 · 2022-02-24 09:12:40 发布

一、Konva 基本概念

轻量，使用方便，可适用于 PC 端和移动端；
支持丰富的事件处理操作；
支持类似于 jQuery 的操作方式；
开源，可以随意更改；
性能好。

Konva 中文文档中文APIKonva Konvajs 中文文档, Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能.http://konvajs-doc.bluehymn.com/ 在 Konva 的使用中，整个视图可以看成一个舞台 stage，舞台中可以有多个层次 layer，每一层下面又可以有各种形状或者很多组 group，组下面也可以有分组或各种各样的形状 shape，如下示意图：

二、Konva 的使用

1. 引入 Konva

在我们的项目中使用 Konva 前需要先引入 .js 包，可以通过 <script> 标签在线引入，也可以从 CDN 下载至本地后引入；

在线引入：

<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>

从 CDN 下载官网 Konva.js 包：

Konva.js 完整版

Konva.js 压缩版

2. Konva 基本绘制步骤

（1）创建一个具有 id 名的 div，用于放置舞台；

<div id="container"></div>

（2）创建舞台 stage

var stage = new Konva.Stage({
    container: 'container', //指定放置舞台的容器
    width: window.innerWidth, //设置宽高
    height: window.innerHeight,
  })

（3）创建层 layer 并将层添加至舞台；

var layer = new Konva.Layer(); //创建层 layer

stage.add(layer); //将层添加至舞台

（4）创建要绘制的图形(此处以矩形为例)；

  var rect = new Konva.Rect({ //创建矩形
    x: 100,
    y: 100,
    opactity: 0.5,
    draggable: true,
    fill: 'red'
    //其余相关属性...
  })

（5）将创建的形状添加至层并将层渲染到舞台中；

layer.add(rect); //将图形添加至层

layer.draw(); //将层渲染到舞台

接下来我们结合以上步骤使用 Konva 绘制一个矩形：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>使用konva库制作一个矩形</title>
  <style></style>
  <!-- 引入Konva包 -->
  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
</head>

<body>
  <!-- 放置舞台 -->
  <div id="container"></div>
</body>
<script>
  //1.创建舞台
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth, //宽高（全屏）
    height: window.innerHeight,
  })
  //2.创建层
  var layer = new Konva.Layer();
  //3.将层添加至舞台
  stage.add(layer);
  //4.创建矩形
  var rect = new Konva.Rect({
    x: 100, //起始坐标
    y: 100,
    width: 200, //宽高
    height: 100,
    scaleX: 1.3,
    scaleY: 1.3,
    draggable: true,
    fill: 'red' //填充
  })
  //5.将矩形添加至层
  layer.add(rect);
  //6.将层渲染至舞台
  layer.draw();
</script>

</html>

效果如下：

三、Konva 动画

1. tween 对象

使用动画时必须先实例化 Konva.tween 对象创建补间动画，然后执行 play() 运行动画；tween 是控制 Konva 对象进行动画的核心对象，它可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等。

如下是一个基本的 tween 创建动画的例子：

var tween = new Konva.Tween({
    node: rect, //要使用动画的Konva对象
    x: 300,
    y:300,
    rotation: 360, //旋转
    duration: 1, //持续时间
    easing: Konva.Easings.EaseIn, //动画效果
    yoyo: true, //是否进行循环播放
    ......
    onFinish: function() { //动画执行结束后，执行此方法

    }
});

tween.play(); //启动动画

除用 play() 方法启动动画之外，tween 还有以下参数可供使用：

tween.play()；播放动画
tween.pause()；暂停动画
tween.reverse()；动画逆播放
tween.reset()；重置动画
tween.finish()；立即结束动画

动画的效果也有多种：

Konva.Easings.Linear；线性
Konva.Easings.EaseIn；缓动，先慢后快
Konva.Easings.EaseOut；先快后慢
Konva.Easings.EaseInOut；两头慢，中间快
Konva.Easings.BackEaseIn；往回一点，然后往前冲
Konva.Easings.BackEaseOut
Konva.Easings.BackEaseInOut
Konva.Easings.ElasticEaseIn；橡皮筋
Konva.Easings.ElasticEaseOut
Konva.Easings.ElasticEaseInOut
Konva.Easings.BounceEaseIn；弹跳
Konva.Easings.BounceEaseOut
Konva.Easings.BounceEaseInOut
Konva.Easings.StrongEaseIn；强力
Konva.Easings.StrongEaseOut
Konva.Easings.StrongEaseInOut

2. 动画 to 方法的使用

在实际的开发过程中，如果每次使用动画都先实例化 Konva.tween，在 play() 启动动画，这样是很麻烦的，而且效率不高。而 Konva 也为开发者提供了更为简便的方式，那就是 to，to 其实就是对 tween 的封装。

在使用 to 时我们不必再去实例化 Konva.tween 对象，直接在需要添加动画的对象后面 .to{ } 创建相关属性即可。

如下是使用动画的两种方式对比：

效果如下：

3. 循环播放动画

循环播放主要是结合 tween 配合 onFinish 事件中的 reset()重置动画 和 play()播放动画，达到循环播放的效果。

如下简单案例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>konva动画</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: bisque;
      overflow: hidden;
    }
  </style>
  <!-- 引入Konva包 -->
  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
</head>

<body>
  <!-- 放置舞台 -->
  <div id="container"></div>
</body>
<script>
  //创建舞台
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth, //宽高（全屏）
    height: window.innerHeight,
  })
  //创建层
  var layer = new Konva.Layer();
  //将层添加至舞台
  stage.add(layer);
  //创建矩形
  var rect = new Konva.Rect({
    x: 250,
    y: 250,
    width: 100,
    height: 100,
    fill: 'red'
  });
  layer.add(rect);
  layer.draw();
  //tween为矩形添加动画
  var tween = new Konva.Tween({
    node: rect, //要进行动画的Konva对象
    x: 100,
    y: 100,
    rotation: 360, //旋转360度
    opactity: .1,
    easing: Konva.Easings.Linear, //动画效果
    duration: 2, //持续时间
    yoyo: true, //是否进行循环播放
    onFinish: function () {
      //动画执行结束后执行此方法
      this.reset(); //重置动画
      this.play(); //播放动画
    }
  });

  tween.play(); //启动动画
</script>

</html>

效果如下：

四、案例：使用 Konva 绘制进度条

具体思路就是：绘制一个外部矩形，一个内部矩形，再为内部矩形添加动画，宽度由 0 变为外部矩形的宽度。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>使用konva库制作一个进度条</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: bisque;
      overflow: hidden;
    }
  </style>
  <!-- 引入Konva包 -->
  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
</head>

<body>
  <!-- 放置舞台 -->
  <div id="container"></div>
</body>
<script>
  //创建舞台
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth, //宽高（全屏）
    height: window.innerHeight,
  })
  //创建层
  var layer = new Konva.Layer();
  //将层添加至舞台
  stage.add(layer);
  //设置中心点
  var centerX = stage.width() / 2;
  var centerY = stage.height() / 2;

  var x = 1 / 8 * stage.width();
  var y = centerY;
  var height = 1 / 12 * stage.height();
  var maxWidth = 3 / 4 * stage.width()
  //绘制进度条
  //内部矩形
  var innerRect = new Konva.Rect({
    x: x,
    y: y,
    width: 100,
    height: height,
    opacity: 0.8, //透明度
    fill: '#149985',
    cornerRadius: height / 2, //圆角
  });
  //将内部矩形添加至层
  layer.add(innerRect);

  //外部矩形
  var outerRect = new Konva.Rect({
    x: x,
    y: y,
    width: maxWidth,
    height: height,
    stroke: 'blue',
    strokeWidth: 2,
    cornerRadius: height / 2,
  });
  //将外部矩形添加至层
  layer.add(outerRect);
  //为内部矩形添加动画效果
  innerRect.to({
    width: maxWidth, //内部矩宽度变为最大宽度
    duration: 1.4, //动画持续时间
    easing: Konva.Easings.StrongEaseInOut,
  })

  //将层渲染至舞台
  layer.draw();
</script>

</html>

案例效果：