使用Konva操作HTML5 Canvas：第1部分，入门

最新推荐文章于 2024-11-20 10:34:19 发布

cunjie3951

最新推荐文章于 2024-11-20 10:34:19 发布

阅读量1.2k

点赞数 1

文章标签： java canvas python css html5

很长一段时间以来，所有流行的浏览器都支持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 。在我们的例子中，这些矩形是在id为example的div内绘制的。

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

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

在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中分层

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

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

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

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

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

在上面的示例中，您可以看到仅按“ Indigo Top”按钮不会在所有其他图形上方绘制靛蓝圆圈，而按“ Indigo Over All Others”会将其置于顶部。这是因为最后一个按钮还将包含靛蓝圆圈的图层移到顶部。

由于可以拖动圆圈，因此最好将它们彼此拖动，以查看按不同按钮时靛蓝圆圈的位置如何变化。