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

WBOY 2023-08-29 16:29 1416浏览原创

使用 konva 操作 html5 canvas：探索基本形状（第 2 部分）

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

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

绘制矩形、圆形和椭圆形

您可以使用 <code class="inline">Konva.rect() 对象在 Konva 中创建矩形。可以使用 <code class="inline">x 和 <code class="inline">y 属性指定矩形左上角的位置。同样，您可以使用 <code class="inline">width 和 <code class="inline">height 属性指定矩形的宽度和高度。默认情况下，您绘制的所有矩形都会有尖角。但是，您可以通过为 <code class="inline">cornerRadius 属性选择适当的值来使它们变圆。

可以使用 <code class="inline">visible 属性显示或隐藏矩形。如果您不想完全隐藏矩形但仍使其半透明，可以使用 <code class="inline">opacity 属性。您可以将其设置为 0 到 1 之间的任意数字（含 0 和 1）。如果不透明度设置为 0，形状将不可见。

您还可以分别使用 <code class="inline">rotation 和 <code class="inline">scale 属性来旋转或缩放矩形形状。旋转被指定为普通数字，但以度为单位应用。您可以选择使用 <code class="inline">scaleX 和 <code class="inline">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);

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

您可以使用 <code class="inline">Konva.circle() 对象在 Konva 中创建圈子。这次，<code class="inline">x 和 <code class="inline">y 属性确定绘制圆的中心点。您仍然可以为宽度和高度属性指定一个值。这些值用于计算要绘制的圆的直径。然而，圆的宽度和高度相等。这意味着，如果发生冲突，后面指定的值优先于前面指定的值。换句话说，如果将一个圆的 <code class="inline">width 设置为 100，然后将其 <code class="inline">height 设置为 180，则该圆的直径将为180 并且宽度将被忽略。

为避免混淆，您可以省略 <code class="inline">width 和 <code class="inline">height 属性，并为圆的 <code class="inline">radius 指定一个值。请记住，您必须将半径设置为 50 才能绘制宽度和高度为 100 的圆。

以类似的方式，您还可以使用 <code class="inline">Konva.ellipse() 对象创建椭圆。唯一的区别是 radius 属性现在接受具有 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 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);

您应该注意，与 <code class="inline">ellipA 相比，<code class="inline">ellipB 具有更大的高度和宽度。由于它们都有相同的 <code class="inline">x 和 <code class="inline">y 值，我必须首先将 <code class="inline">ellipB 添加到该层，以保持 <code class="inline ">ellipA 可见。如果 <code class="inline">ellipB 添加在 <code class="inline">ellipA 之后，它将被绘制在 <code class="inline">ellipA 上，从而对查看者隐藏它。

如果你仔细观察，你还会发现紫色圆圈实际上是一个椭圆形，<code class="inline">y 半径设置为 50，<code class="inline">x 半径设置为 100。但是，它在 y 方向上缩放了 2 倍。缩放也会增加描边宽度，使其在椭圆的顶部和底部比其左右边缘宽两倍。

使用 Konva 绘制线条

您可以使用 <code class="inline">Konva.Line() 对象来创建不同类型的直线和曲线。所有线都要求您使用 <code class="inline">points 属性指定线应经过的点。这些点被指定为数组。

您可以通过将 <code class="inline">close 属性的值设置为 <code class="inline">true 来连接使用 <code class="inline">points 数组提供的任何点集来形成多边形。同样，您可以通过设置 <code class="inline">tension 属性的值将一组直线转换为样条线。零值将产生直线。值越高，线条越弯曲。

您可以通过设置 <code class="inline">tension 属性的值来创建闭合且弯曲的形状（斑点），并通过设置 <code class="inline">lined 来闭合曲线到 <code class="inline">true。

与我们讨论过的其他形状一样，您可以使用 <code class="inline">StrokeWidth 属性设置绘制线条的描边宽度。您还可以为闭合形状指定 <code class="inline">fill 颜色。

在下面的示例中，我使用同一组点来绘制所有形状。但是，我还使用 <code class="inline">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);

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

绘制正多边形

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

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

就像我们讨论过的所有其他形状一样，您可以使用 <code class="inline">行程宽度、<code class="inline">opacity 和 <code class="来更改正多边形的描边宽度、不透明度和可见性内联">可见性。

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);