該系列的入門教程教您如何使用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
![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)