使用Konva操纵HTML5画布：第2部分，基本形状

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

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

绘制矩形，圆形和椭圆形

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

可以使用visible属性显示或隐藏矩形。如果您不想完全隐藏矩形，但仍将其设置为半透明，则可以使用opacity属性。您可以将其设置为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.circle()对象在Konva中创建圆。这次， x和y属性确定绘制圆的中心点。您仍然可以为width和height属性都指定一个值。这些值用于计算要绘制的圆的直径。但是，圆的宽度和高度相等。这意味着在发生冲突时，后面指定的值优先于前面指定的值。换句话说，如果将圆的width设置为100，然后将其height设置为180，则圆的直径为180，宽度将被忽略。

为避免混淆，可以省略width和height属性，并为圆的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画线

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

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

这是您能够通过设置的值创建闭合和弯曲的形状（BLOB） 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值会显着改变曲线的最终形状。

绘制正多边形

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

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

就像我们讨论过的所有其他形状一样，您可以使用strokeWidth ， opacity和strokeWidth更改规则多边形的笔划宽度，不透明度和可见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允许我们轻松在画布上绘制的最基本形状。我们还了解了可用于控制所有这些形状的外观的不同属性。大多数属性对于所有形状都是通用的，但是其中一些属性仅适用于特定形状。

如有任何疑问，请在评论中让我知道。在本系列的下一个教程中，我们将学习一些更复杂的形状。

翻译自: https://code.tutsplus.com/tutorials/manipulating-html5-canvas-using-konva-part-2-basic-shapes--cms-29830