Konva を使用した HTML5 キャンバスの操作: 基本的な形状の探索 (パート 2)

この一連の入門チュートリアルでは、Konva を使用して最初のシェイプを描画する方法を説明します。また、Konva でレイヤーとグループがどのように機能するかについても説明します。このシリーズの残りの部分では、基本的な形状や複雑な形状の作成や、さまざまな形状にイベント リスナーをアタッチしてグラフィックスをインタラクティブにするなど、より具体的なトピックに焦点を当てます。

この特別なチュートリアルでは、Konva で長方形、円、楕円などの基本的な形状を作成する方法を説明します。また、ニーズに合わせてこれらすべての形状の外観をカスタマイズするために使用できるさまざまなプロパティについても学習します。このチュートリアルの残りの部分では、Konva を使用してさまざまな種類の線と正多角形を描画する方法について説明します。

長方形、円、楕円を描く

Konva で Konva.rect() オブジェクトを使用して四角形を作成できます。 x プロパティと y プロパティを使用して、四角形の左上隅の位置を指定できます。同様に、width プロパティと height プロパティを使用して、長方形の幅と高さを指定できます。デフォルトでは、描画するすべての長方形には鋭い角があります。ただし、cornerRadius プロパティに適切な値を選択することで、角を丸くすることができます。

visible プロパティを使用して、四角形を表示または非表示にすることができます。四角形を完全に非表示にしたくないが半透明にしたい場合は、opacity プロパティを使用できます。これは 0 から 1 までの任意の数値に設定できます。不透明度を 0 に設定すると、形状は表示されません。

rotation プロパティと scale プロパティをそれぞれ使用して、長方形の形状を回転または拡大縮小することもできます。回転は通常の数値として指定されますが、度単位で適用されます。オプションで、scaleX プロパティと scaleY プロパティを使用して、x 軸または y 軸上の四角形を個別にスケーリングできます。

これは、今説明したすべてのプロパティを使用して、キャンバス上にさまざまな四角形を描画する例です。

リーリー

長方形 は、作成された順序で描画されるわけではないことに注意してください。代わりに、レイヤーに追加された順序で描画されます。 fill プロパティと Stroke プロパティは、それぞれ塗りつぶし色とストローク色を設定するために使用されます。

Konva.circle()

オブジェクトを使用して、Konva でサークルを作成できます。今回は、#xx プロパティと y プロパティによって、描画された円の中心点が決定されます。幅と高さのプロパティの値を指定することもできます。これらの値は、描画される円の直径を計算するために使用されます。ただし、円の幅と高さは同じです。これは、競合が発生した場合、後で指定した値が先に指定した値より優先されることを意味します。つまり、円の width を 100 に設定し、次に height を 180 に設定すると、円の直径は 180 になり、幅は無視されます。 混乱を避けるために、width

および

height プロパティを省略し、円の radius の値を指定できます。幅と高さ 100 の円を描画するには、半径を 50 に設定する必要があることに注意してください。 同様の方法で、Konva.ellipse()

オブジェクトを使用して楕円を作成することもできます。唯一の違いは、radius プロパティが値として x プロパティと y プロパティを持つオブジェクトを受け入れるようになったことです。指定した場合、幅と高さのプロパティが独立して適用され、楕円の最終的な形状が決定されます。

リーリー ellipB

は

ellipA と比較して高さと幅が大きいことに注意してください。どちらも同じ x と y の値を持っているため、ellipA を表示したままにするために、最初に ellipB をレイヤーに追加する必要があります。 ellipB が ellipA の後に追加されると、ellipA の上に描画されるため、ビューアーからは見えなくなります。 よく見ると、紫色の円が実際には楕円形であり、y

の半径が 50 に設定され、

xx の半径が 100 に設定されていることがわかります。ただし、y 方向には 2 倍に拡大縮小されます。また、スケーリングによりストローク幅が増加し、楕円の上部と下部の幅が左右の端の幅の 2 倍になります。

使用 Konva 绘制线条

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

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

您可以通过设置 tension 属性的值来创建闭合且弯曲的形状（斑点），并通过设置 lined 来闭合曲线到 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 属性更改某些边的长度，但它也会更改缩放边的描边宽度。

就像我们讨论过的所有其他形状一样，您可以使用 行程宽度、opacity 和 可见性。

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 允许我们轻松在画布上绘制的最基本形状。我们还了解了可用于控制所有这些形状的外观的不同属性。大多数属性对于所有形状都是通用的，但其中一些属性仅适用于特定形状。

如果您有任何疑问，请在评论中告诉我。我们将在本系列的下一个教程中了解一些更复杂的形状。

以上がKonva を使用した HTML5 キャンバスの操作: 基本的な形状の探索 (パート 2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。