使用Konva操作HTML5画布：第1部分

长期以来，所有流行的浏览器都支持html5画布。您可以在javascript的帮助下使用它在浏览器中绘制图形。可以在画布上创建的图形范围从简单的线条和形状到照片组合和动画。

在本系列中，您将了解一个非常有用的画布库Konva。您可以使用 Konva 在画布或舞台上绘制不同的形状。除其他外，该库允许您缩放、旋转和动画所有这些形状，并将事件***器附加到它们。

本教程将重点介绍库的基本概念，同时简要概述库的不同功能。之后，我们将继续讨论更具体和更复杂的主题。该库最初是作为流行的 KineticJS 库的一个分支而存在的。

舞台、图层和形状

您使用 Konva 绘制的所有内容都需要您使用Konva.Stage. container您可以使用属性指定阶段的容器元素。每个阶段还需要一个宽度和高度值，可以分别使用width和height属性指定。

一个阶段可以包含多个层。这些层中的每一个都将有两个<canvas>渲染器。场景渲染器用于绘制您在舞台上可见的所有形状。命中图渲染器对用户隐藏。它用于执行高性能事件检测。

单个图层可以包含多个形状、不同形状的组或一组组。舞台、层、组和形状就像虚拟节点一样，可以单独设置样式和变换。

使用 Konva 绘制形状

在我们创建任何形状之前，我们需要在您的项目中包含该库。有多种方法可以做到这一点。如果您使用的是包管理器，则可以运行以下命令。

npm install konva
// OR
bower install konva

您还可以直接链接到托管在cdnjs和jsDelivr上的库的缩小版本。

安装库后，您可以使用以下代码在画布上创建矩形形状。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 75,
  y: 150,
  width: 200,
  height: 50,
  rotation: 45,
  fill: "blue",
  stroke: "black",
  strokeWidth: 4
});

var rectB = new Konva.Rect({
  x: 350,
  y: 50,
  width: 100,
  height: 250,
  cornerRadius: 50,
  fill: "red",
  stroke: "brown",
  strokeWidth: 10
});

layerA.add(rectA);
layerA.add(rectB);

stage.add(layerA);

在画布上绘制任何东西都是一个五步过程。首先，您需要实例化一个使用Konva.Stage. 这需要您指定舞台的宽度和高度，以及id包含舞台的容器元素的宽度和高度。在我们的例子中，矩形是在 who is中绘制div的。idexample

在下一步中，您必须实例化要在舞台上渲染的所有图层。在此示例中，我们仅创建一个层，但您可以创建多个层并将它们全部添加到一个阶段。当您的背景由静态和移动元素组成时，不同的图层会非常有用。在这种情况下，您可以在一层上添加静态元素，在另一层上添加移动元素。由于您不必在每次重绘后更新静态背景，这可以大大提高性能。

创建图层后，您可以初始化要在图层上显示的不同形状，例如矩形、椭圆、星形和圆环。最后，您必须将形状添加到图层并将图层添加到舞台。

使用Konva操作HTML5画布：第1部分第1张

在 Konva 中创建组

当您想将所有形状作为一个单元进行管理时，将不同的形状组合在一起是一个好主意。例如，假设您创建了一辆汽车，使用两个圆圈作为车轮，两个矩形块作为车身。如果您想在不创建组的情况下将这辆车向前移动，则必须一次单独翻译所有形状。一种更有效的方法是将圆形和矩形添加到一个组中，然后一次将它们全部转换。

要将任何形状添加到组中，您需要使用该add()方法，就像将形状添加到图层时一样。您还可以将一个组添加到另一个组以创建更复杂的实体。例如，您可以在车内创建一个人作为一个组，并将该人添加到代表汽车的组中。

在下面的示例中，我保持简单，只创建了一个carA组。之后，我可以一次旋转和缩放整辆车。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var wheelA = new Konva.Ring({
  x: 130,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "First Wheel"
});

var wheelB = new Konva.Ring({
  x: 270,
  y: 230,
  innerRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "Second Wheel"
});

var frameA = new Konva.Rect({
  x: 80,
  y: 150,
  width: 240,
  height: 60,
  cornerRadius: 10,
  fill: "red",
  stroke: "black",
  name: "Bottom Frame"
});

var frameB = new Konva.Rect({
  x: 135,
  y: 90,
  width: 120,
  height: 60,
  cornerRadius: 10,
  fill: "orange",
  stroke: "black",
  name: "Top Frame"
});

var carA = new Konva.Group({
  x: 50,
  y: 0,
  rotation: 20,
  scaleX: 1.2
});

carA.add(wheelA, wheelB, frameA, frameB);

layerA.add(carA);

stage.add(layerA);

使用Konva操作HTML5画布：第1部分第2张

在 Konva 中分层

您已经了解 Konva 中的图层。分层是不同的东西。默认情况下，您添加到图层的所有形状都按照添加顺序进行绘制。这意味着在所有其他形状之后添加到图层的形状将绘制在其他形状之上。

moveToTop()Konva 允许您使用不同的分层方法（如、moveToBottom()、moveUp()、moveDown()和）来控制绘制形状的顺序zIndex()。

该moveToTop()方法将在已添加到同一图层的所有其他形状上绘制给定形状。在我们特定形状的图层之后添加到 Konva 阶段的图层上绘制的形状仍将保留在我们的形状上方。这就是为什么即使在调用之后，以下示例中的靛蓝圆圈仍保持在浅绿色圆圈下方的原因moveToTop()。

该moveToBottom()方法将在已添加到同一图层的所有其他形状下方绘制给定形状。就像一样moveToTop()，形状将移动到它们自己图层的底部，而不是它们下面的图层。

moveUp()和方法将moveDown()调用它们的形状移动到同一层中它们当前位置的上方或下方。该zIndex()方法用于设置形状在其父层内的索引。与css不同，您不能zIndex在 Konva 中设置任意值。对于具有 10 个形状的图层，该zIndex值只能介于 0 和 9（含）之间。