使用 Konva 操作 HTML5 Canvas：探索基本形状「第 2 部分」

介绍

Konva是HTML5的2D绘图库，它基于HTML的<canvas>元素。它封装了Canvas API的复杂性，使开发人员更容易地使用和管理图形对象、事件和动画。在前一篇文章中，我们了解了 Konva 的一些基础知识，包括图层、舞台、形状等。在本文中，我们将深入研究 Konva 中的基本形状，了解如何绘制不同的形状，以及如何对它们进行动画和事件处理。

1. 绘制矩形

绘制矩形是 Konva 中最基本的形状之一。我们可以使用 Konva.Rect 类来创建矩形对象，并将它们添加到舞台或图层中。

// 创建矩形对象

var rect = new Konva.Rect({
  x: 100,
  y: 50,
  width: 200,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});
// 将矩形对象添加到层
layer.add(rect);
// 将层添加到舞台
stage.add(layer);

1.1 矩形属性

我们可以设置矩形对象的属性，包括位置、大小、填充颜色、边框颜色和宽度等。下面是一些常用的属性：

x：矩形左上角的X坐标

y：矩形左上角的Y坐标

width：矩形的宽度

height：矩形的高度

fill：矩形的填充颜色

stroke：矩形的边框颜色

strokeWidth：矩形的边框宽度

1.2 矩形动画

我们可以使用 Konva 动画引擎来对矩形进行动画处理。Konva 使用动画帧来控制形状的运动。

// 创建矩形对象

var rect = new Konva.Rect({
  x: 100,
  y: 50,
  width: 200,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});
// 将矩形对象添加到层
layer.add(rect);
// 将层添加到舞台
stage.add(layer);
// 创建动画
var anim = new Konva.Animation(function(frame) {
  var time = frame.time,
      angle = (time / 1000) * 90;
  rect.rotate(angle);
}, layer);
// 启动动画
anim.start();

在上面的代码中，我们创建了一个旋转动画，它会每秒旋转90度。我们使用了Konva.Animation方法创建了一个动画实例，并将其附加到层上。然后启动该动画就可以让矩形旋转了。

1.3 矩形事件

我们可以对矩形对象添加事件监听器，以便在用户与之交互时进行响应。下面是一些常见的事件：

click：当一个对象被单击时触发

mouseover：当鼠标悬停在一个对象上时触发

mouseout：当鼠标离开一个对象时触发

mousedown：当鼠标按下时触发

mouseup：当鼠标松开时触发

// 创建矩形对象

var rect = new Konva.Rect({
  x: 100,
  y: 50,
  width: 200,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});
// 将矩形对象添加到层
layer.add(rect);
// 将层添加到舞台
stage.add(layer);
// 添加事件监听器
rect.on('click', function() {
  console.log('点击了矩形');
});

在上面的代码中，我们创建了一个 click 事件监听器。当用户单击矩形时，控制台将输出一个消息。

2. 绘制圆形

绘制圆形也是 Konva 中基本的形状之一。我们可以使用 Konva.Circle 类来创建圆形对象，并将它们添加到舞台或图层中。

// 创建圆形对象

var circle = new Konva.Circle({
  x: 100,
  y: 50,
  radius: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 2
});
// 将圆形对象添加到层
layer.add(circle);
// 将层添加到舞台
stage.add(layer);

2.1 圆形属性

我们可以设置圆形对象的属性，包括位置、半径、填充颜色、边框颜色和宽度等。下面是一些常用的属性：

x：圆形中心的X坐标

y：圆形中心的Y坐标

radius：圆形的半径

fill：圆形的填充颜色

stroke：圆形的边框颜色

strokeWidth：圆形的边框宽度

2.2 圆形动画

同样，我们可以对圆形对象进行动画处理。下面是一个简单的例子，它将使圆形从屏幕左侧移动到屏幕右侧。

// 创建圆形对象

var circle = new Konva.Circle({
  x: 50,
  y: 50,
  radius: 20,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 2
});
// 将圆形对象添加到层
layer.add(circle);
// 将层添加到舞台
stage.add(layer);
// 创建动画
var anim = new Konva.Animation(function(frame) {
  var time = frame.time,
      dist = time / 10;
  circle.setX(dist);
  // 当圆形达到屏幕右侧时停止动画
  if (dist > stage.getWidth()) {
    anim.stop();
  }
}, layer);
// 启动动画
anim.start();

在上面的代码中，我们使用 Konva 动画引擎创建了一个动画，它将圆形从左侧移到右侧。我们使用 circle.setX() 方法来更新圆形的位置。当圆形达到屏幕右侧时，动画停止。

2.3 圆形事件

同样，我们可以对圆形对象添加事件监听器。下面是一个例子，它将生成一个包含圆形半径的对话框，当用户单击圆形时会显示该对话框。

// 创建圆形对象

var circle = new Konva.Circle({
  x: 100,
  y: 50,
  radius: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});
// 将圆形对象添加到层
layer.add(circle);
// 将层添加到舞台
stage.add(layer);
// 添加事件监听器
circle.on('click', function() {
  var radius = this.getRadius();
  alert('圆形的半径是：' + radius);
});

在上面的代码中，我们创建了一个 click 事件监听器。当用户单击圆形时，它将弹出一个警告框，显示圆形的半径。

3. 绘制线

绘制线也是 Konva 中基本的形状之一。我们可以使用 Konva.Line 类来创建线对象，并将它们添加到舞台或图层中。

// 创建线对象

var line = new Konva.Line({
  points: [100, 50, 200, 100, 50, 200],
  stroke: 'red',
  strokeWidth: 5,
  lineJoin: 'round'
});
// 将线对象添加到舞台
stage.add(line);

3.1 线属性

我们可以设置线对象的属性，包括位置、点的坐标、线的颜色、宽度和线连接方式等。下面是一些常用的属性：

points：点的坐标数组

stroke：线的颜色

strokeWidth：线的宽度

lineJoin：线连接方式

3.2 线动画

我们可以像前面两个例子一样对线对象进行动画处理。下面是一个示例，它会使线沿着屏幕顶部移动，然后返回到原始位置。

// 创建线对象

var line = new Konva.Line({
  points: [50, 50, 200, 50],
  stroke: 'green',
  strokeWidth: 10,
  lineJoin: 'round'
});
// 将线对象添加到舞台
stage.add(line);
// 创建动画
var anim = new Konva.Animation(function(frame) {
  var time = frame.time,
      dist = time / 10,
      points = line.points();
  points[0] += dist;
  points[2] += dist;
  // 当线达到屏幕右侧时
  if (points[0] > stage.getWidth()) {
    // 将线重置到起点
    points[0] = 50;
    points[2] = 200;
  }
  line.points(points);
}, layer);
// 启动动画
anim.start();

在上面的代码中，我们创建了一个动画，它使线沿着屏幕顶部移动。我们使用 line.points() 方法获取线的点数组，然后更新其中的两个点的X坐标。当线达到屏幕右侧时，我们将其中的两个点重置为初始值。

3.3 线事件

同样，我们可以对线对象添加事件监听器。下面是一个例子，它将在用户单击线时在控制台中显示线中心点的坐标。

// 创建线对象

var line = new Konva.Line({
  points: [50, 50, 200, 50],
  stroke: 'green',
  strokeWidth: 10,
  lineJoin: 'round'
});
// 将线对象添加到舞台
stage.add(line);
// 添加事件监听器
line.on('click', function() {
  var points = this.points(),
      x = (points[0] + points[2]) / 2,
      y = (points[1] + points[3]) / 2;
  console.log('线的中心点坐标是：(' + x + ', ' + y + ')');
});

在上面的代码中，我们创建了一个 click 事件监听器，它将显示线的中心点坐标。

4. 总结

在本文中，我们探索了 Konva 中的基本形状，包括矩形、圆形和线。我们了解了如何创建它们、设置属性、对它们进行动画和添加事件监听器。这些基础知识将为我们探索更丰富的 Konva 功能打下基础。