Bekerja dengan Kanvas HTML5 dengan Konva: Meneroka Bentuk Asas (Bahagian 2)-tutorial js-php.cn

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

Siri tutorial pengenalan ini mengajar anda cara melukis bentuk pertama anda menggunakan Konva. Ia juga menerangkan cara lapisan dan kumpulan berfungsi dalam Konva. Dalam sisa siri ini, kami akan menumpukan pada topik yang lebih khusus, seperti mencipta bentuk asas dan kompleks atau melampirkan pendengar acara pada bentuk yang berbeza untuk menjadikan grafik interaktif.

Tutorial khas ini akan menunjukkan kepada anda cara membuat bentuk asas seperti segi empat tepat, bulatan dan bujur dalam Konva. Anda juga akan belajar tentang sifat berbeza yang boleh anda gunakan untuk menyesuaikan penampilan semua bentuk ini agar sesuai dengan keperluan anda. Baki tutorial ini akan membincangkan cara melukis pelbagai jenis garisan dan poligon sekata menggunakan Konva.

Lukis segi empat tepat, bulatan dan bujur

Anda boleh mencipta segi empat tepat dalam Konva menggunakan objek Konva.rect(). Anda boleh menentukan kedudukan sudut kiri atas segi empat tepat menggunakan atribut x dan y. Begitu juga, anda boleh menentukan lebar dan tinggi segi empat tepat menggunakan sifat width dan height. Secara lalai, semua segi empat tepat yang anda lukis akan mempunyai bucu tajam. Walau bagaimanapun, anda boleh menjadikannya bulat dengan memilih nilai yang sesuai untuk sifat cornerRadius. Konva.rect() 对象在 Konva 中创建矩形。可以使用 x 和 y 属性指定矩形左上角的位置。同样，您可以使用 width 和 height 属性指定矩形的宽度和高度。默认情况下，您绘制的所有矩形都会有尖角。但是，您可以通过为 cornerRadius 属性选择适当的值来使它们变圆。

可以使用 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);

Salin selepas log masuk

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

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

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

以类似的方式，您还可以使用 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);

Salin selepas log masuk

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

如果你仔细观察，你还会发现紫色圆圈实际上是一个椭圆形，y 半径设置为 50，x

Anda boleh menggunakan atribut visible untuk menunjukkan atau menyembunyikan segi empat tepat. Jika anda tidak mahu menyembunyikan sepenuhnya segi empat tepat tetapi masih menjadikannya separa telus, anda boleh menggunakan atribut opacity. Anda boleh menetapkan ini kepada mana-mana nombor antara 0 dan 1, termasuk. Jika kelegapan ditetapkan kepada 0, bentuk tidak akan kelihatan.

Anda juga boleh menggunakan atribut <code class="inline">rotation</code> dan <code class="inline">scale</code> untuk memutar atau menskalakan bentuk segi empat tepat. Putaran ditentukan sebagai nombor biasa tetapi digunakan dalam darjah. Anda boleh memilih skala mana-mana segi empat tepat pada paksi x atau y secara bebas menggunakan sifat <code class="inline">scaleX</code> dan <code class="inline">scaleY</code>.

Ini adalah contoh melukis segi empat tepat yang berbeza pada kanvas menggunakan semua sifat yang baru kita bincangkan. #🎜🎜#

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

Salin selepas log masuk

#🎜🎜#Anda harus ambil perhatian bahawa segi empat tepat tidak dilukis mengikut susunan ia dicipta. Sebaliknya, ia dilukis mengikut susunan ia ditambahkan pada lapisan. Sifat fill dan Stroke digunakan untuk menetapkan warna isian dan stroke. #🎜🎜# #🎜🎜#

绘制正多边形

您可以仔细选择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);

Salin selepas log masuk

最终想法

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

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

Atas ialah kandungan terperinci Bekerja dengan Kanvas HTML5 dengan Konva: Meneroka Bentuk Asas (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!