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

该系列的入门教程教您如何使用 Konva 绘制您的第一个形状。它还解释了层和组如何在 Konva 中工作。在本系列的其余部分中，我们将专注于更具体的主题，例如创建基本和复杂的形状或将事件***器附加到不同的形状以使您的图形具有交互性。

本教程将向您展示如何在 Konva 中创建基本形状，如矩形、圆形和椭圆形。您还将了解可用于根据您的需要自定义所有这些形状的外观的不同属性。本教程的后面部分将讨论如何使用 Konva 绘制不同类型的线和正多边形。

绘制矩形、圆形和椭圆

Konva.rect()您可以使用该对象在 Konva 中创建矩形。可以使用和属性指定矩形左上角的位置。同样，您可以使用and 属性指定矩形的宽度和高度。默认情况下，您绘制的所有矩形都将具有尖角。但是，您可以通过为属性选择适当的值来使它们四舍五入。xywidthheightcornerRadius

可以使用该visible属性显示或隐藏矩形。如果您不想完全隐藏矩形但仍使其半透明，则可以使用该opacity属性。您可以将其设置为 0 和 1 之间的任何数字（包括 0 和 1）。如果不透明度设置为 0，则该形状将不可见。

您还可以分别使用rotation和scale属性旋转或缩放矩形形状。旋转指定为普通数字，但以度为单位。scaleX您可以选择使用和scaleY属性在 x 或 y 轴上独立缩放任何矩形。

这是一个使用我们刚刚讨论的所有属性在画布上绘制不同矩形的示例。

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: 10,
  y: 10,
  width: 200,
  height: 50,
  fill: "yellow",
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 160,
  y: 30,
  width: 80,
  height: 250,
  fill: "orange",
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 200,
  y: 160,
  width: 180,
  height: 180,
  cornerRadius: 10,
  strokeWidth: 10,
  opacity: 0.8,
  fill: "red",
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 400,
  y: 20,
  width: 180,
  height: 180,
  scaleX: 1.8,
  scaleY: 0.75,
  rotation: 45,
  fill: "lightgreen",
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

您应该注意，矩形不是按照它们创建的顺序绘制的。相反，它们是按照它们添加到图层的顺序绘制的。和属性分别用于设置填充和描边颜色fill。stroke

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

Konva.circle()您可以使用该对象在 Konva 中创建圆圈。这一次，x和y属性决定了绘制圆的中心点。您仍然可以为宽度和高度属性指定一个值。这些值用于计算要绘制的圆的直径。但是，圆的宽度和高度相同。这意味着在发生冲突的情况下，稍后指定的值优先于之前指定的值。换句话说，如果您将width圆的设置为 100，然后将其设置height为 180，则该圆的直径将为 180，而宽度将被忽略。

为避免混淆，您可以省略 widthandheight属性并指定radius圆的值。请记住，您必须将半径设置为 50 才能绘制宽度和高度为 100 的圆。

以类似的方式，您也可以使用该Konva.ellipse()对象创建一个椭圆。唯一的区别是 radius 属性现在将接受具有 x 和 y 属性的对象作为其值。如果指定，现在将独立应用 width 和 height 属性来确定椭圆的最终形状。

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var circa = new Konva.Circle({
  x: 100,
  y: 100,
  width: 180,
  fill: "yellow",
  stroke: "black"
});

var circB = new Konva.Circle({
  x: 180,
  y: 150,
  height: 100,
  fill: "orange",
  stroke: "black"
});

var circC = new Konva.Circle({
  x: 200,
  y: 275,
  radius: 100,
  opacity: 0.5,
  fill: "red",
  stroke: "black"
});

var ellipA = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 70,
  height: 100,
  rotation: -15,
  fill: "lightgreen",
  stroke: "black"
});

var ellipB = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 80,
  height: 120,
  rotation: -15,
  strokeWidth: 5,
  fill: "white",
  stroke: "black"
});

var ellipC = new Konva.Ellipse({
  x: 450,
  y: 275,
  radius: {
    x: 100,
    y: 50
  },
  scaleY: 2,
  fill: "violet",
  stroke: "black"
});

layerA.add(circA, circB, circC, ellipB, ellipA, ellipC);

stage.add(layerA);

您应该注意，ellipB与相比，它具有更大的高度和宽度ellipA。由于它们都具有相同的值x和y值，因此我必须先添加ellipB到图层以保持ellipA可见。如果ellipB在之后添加ellipA，它将被绘制ellipA，对观众隐藏它。

如果您仔细观察，您还会看到紫色圆圈实际上是一个椭圆，其y半径设置为 50，x半径设置为 100。但是，它在 y 方向上已缩放了 2 倍。缩放也增加了笔划宽度，使其在椭圆的顶部和底部比其左右边缘宽两倍。

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

使用 Konva 绘制线条

您可以使用该Konva.Line()对象来创建不同类型的直线和曲线。所有线都要求points您使用该属性指定线应通过的点。这些点被指定为一个数组。

您可以通过将属性points的值设置为来连接使用数组提供的任何点集以形成多边形。同样，您可以通过设置属性值将一组直线转换为样条线。零值将产生直线。较高的值会创建曲线。closedtruetension

tension您可以通过设置属性值以及通过设置closed为来闭合曲线来创建闭合和弯曲的形状（斑点）true。

与我们讨论过的其他形状一样，您可以使用该strokeWidth属性设置绘制线条的笔触宽度。您还可以指定fill闭合形状的颜色。

在下面的示例中，我使用相同的一组点来绘制所有形状。但是，我也使用该move()方法将每个形状移动特定距离以避免重叠。

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var lineA = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  stroke: "black"
});

var lineB = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  fill: "yellow",
  stroke: "black"
});

var lineC = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 0.8,
  stroke: "blue"
});

var lineD = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 1.8,
  stroke: "red"
});

var lineE = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  tension: 2.2,
  fill: "lightblue",
  stroke: "black"
});

lineB.move({
  x: 180,
  y: 40
});

lineC.move({
  x: 380,
  y: 0
});

lineD.move({
  x: 0,
  y: 200
});

lineE.move({
  x: 180,
  y: 220
});

layerA.add(lineA, lineB, lineC, lineD, lineE);

stage.add(layerA);

您还应该注意，红线和蓝线是使用同一组点绘制的，但不同的tension值会显着改变曲线的最终形状。

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

绘制正多边形

您可以仔细选择points数组中不同点的值来绘制正多边形，如五边形和六边形。使用这种方法绘制更复杂的正多边形（如八边形）可能很麻烦且容易出错。为避免错误，您应该使用该Konva.RegularPolygon()对象来创建规则多边形。

x和y 属性用于指定多边形的中心。该radius属性用于指定多边形的中心点与其所有顶点之间的距离。您可以使用该sides属性来指定多边形应具有的边数。请记住，使用此方法创建的多边形的所有边都将具有相等的长度。scaleX您可以使用和属性更改某些边的长度scaleY ，但它也会更改缩放边的笔划宽度。

就像我们讨论过的所有其他形状一样，您可以使用strokeWidth、opacity和更改正多边形的笔触宽度、不透明度和可见性visibility。

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var triangle = new Konva.RegularPolygon({
  x: 150,
  y: 275,
  sides: 3,
  radius: 100,
  scaleY: 1.6,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var square = new Konva.RegularPolygon({
  x: 60,
  y: 60,
  sides: 4,
  radius: 50,
  fill: "rgba(200,0,0, 0.5)",
  stroke: "black"
});

var pentagon = new Konva.RegularPolygon({
  x: 160,
  y: 160,
  sides: 5,
  radius: 80,
  fill: "rgba(0,200,0, 0.5)",
  stroke: "black"
});

var hexagon = new Konva.RegularPolygon({
  x: 350,
  y: 120,
  sides: 6,
  radius: 80,
  fill: "rgba(0,0,200, 0.5)",
  stroke: "black"
});

var octagon = new Konva.RegularPolygon({
  x: 450,
  y: 275,
  sides: 8,
  radius: 100,
  fill: "rgba(200,200,0, 0.5)",
  stroke: "black"
});

layerA.add(triangle, square, pentagon, hexagon, octagon);

stage.add(layerA);

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