首页　>　文章列表　>　使用Konva操控HTML5画布：第三部分，复杂形状和精灵

使用Konva操控HTML5画布：第三部分，复杂形状和精灵

Konva(操控) HTML(画布) 复杂形状
368 2023-09-02

在本系列的第二个教程中，您学习了如何使用 Konva 绘制基本形状。您可以以一种或另一种方式组合基本形状来创建星星、戒指、箭头、时钟或小屋。 Konva 还允许您使用库提供的内置函数创建一些常见的复杂形状。

在本教程中，您将学习如何在 Konva 中创建星星和戒指。之后，我们将讨论如何使用 Konva 编写文本以及如何沿着特定路径编写文本。您还将学习如何使用 Konva 在画布上绘制图像和精灵。

绘制星星和圆环

与您可以在画布上绘制的许多其他复杂形状相比，星形是最常见的形状之一。通过正确的值集，您还可以将尖星变成简单的徽章状形状。 Konva 允许您使用 Konva.Star() 对象绘制星星。

您可以使用 numPoints 属性指定星形应具有的尖峰数量。您可以使用 innerRadius 和 outerRadius 属性控制这些尖峰的大小。这些属性值的巨大差异将使星星更加尖利。设置外半径等于内半径将创建一个正多边形，其边数是 numPoints 值的两倍。改变 numPoints、innerRadius 和 outerRadius 的值可能会产生一些有趣的形状。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var starA = new Konva.Star({
  x: 70,
  y: 80,
  numPoints: 4,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var starB = new Konva.Star({
  x: 200,
  y: 100,
  numPoints: 8,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 1)",
});

var starC = new Konva.Star({
  x: 475,
  y: 175,
  numPoints: 20,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var starD = new Konva.Star({
  x: 325,
  y: 75,
  numPoints: 5,
  innerRadius: 20,
  outerRadius: 40,
  stroke: "black",
  fill: "lightgreen",
});

var starE = new Konva.Star({
  x: 100,
  y: 250,
  numPoints: 25,
  innerRadius: 25,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starF = new Konva.Star({
  x: 300,
  y: 275,
  numPoints: 40,
  innerRadius: 5,
  outerRadius: 80,
  stroke: "black",
  fill: "black",
});

layerA.add(starA, starB, starC, starD, starE, starF);

stage.add(layerA);

像往常一样，您可以使用 rotation、scale、scaleX 和 scaleY 属性。同样，您可以使用 opacity 属性控制星形的不透明度，并借助 visible 属性显示或隐藏它。

Konva 中的环由一个较大的实心圆和覆盖在其上的一个较小的空心圆组成。内圆的半径使用 innerRadius 属性指定，外圆的半径使用 outerRadius 属性指定。 x 和 y 属性控制星形中心的位置。

您可以使用 scaleX、scaleY、scale 和 缩放和旋转您创建的环旋转 属性。但是，请记住，除非您在 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 ringA = new Konva.Ring({
  x: 125,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var ringB = new Konva.Ring({
  x: 200,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 0.5)",
});

var ringC = new Konva.Ring({
  x: 475,
  y: 175,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var ringD = new Konva.Ring({
  x: 325,
  y: 100,
  innerRadius: 20,
  outerRadius: 40,
  scaleY: 2,
  scaleX: 0.3,
  rotation: 45,
  stroke: "black",
  fill: "lightgreen",
});

var starA = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 20,
  innerRadius: 50,
  outerRadius: 115,
  stroke: "black",
  fill: "black",
});

var ringE = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 90,
  stroke: "black",
  fill: "red",
});

var starB = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starC = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 25,
  outerRadius: 50,
  stroke: "black",
  fill: "orange",
});

var ringF = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 20,
  stroke: "black",
  fill: "white",
});

layerA.add(ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF);

stage.add(layerA);

在下面的示例中，我将多个星形和环形叠加在一起以创建一个漂亮的图案。图案中的三颗星和两个环是同心的。请记住，每当您尝试创建类似的东西时，请始终先绘制最大的形状。如果我稍后将 starA 添加到图层中，它将覆盖所有较小的环和星星，将它们隐藏起来，看不到观众。

Konva 中的文本和 TextPath

您可以使用 Konva.Text() 对象在画布上写入文本。创建文本对象时，您可以使用 fontFamily、fontSize、fontStyle 和 fontVariant 属性。默认字体系列为 Arial，默认字体大小为 12。您可以将 fontStyle 属性设置为正常、粗体或斜体。同样， fontVariant 可以设置为普通或小型大写字母。

可以使用 text 属性指定要写入的实际文本。如果多行注释中的行间距不够，可以使用 lineHeight 属性来增加间距。

Konva 应开始写入文本的左上角点是使用 x 和 y 属性指定的。您可以使用 width 属性限制文本的宽度。默认情况下，您编写的任何文本都将左对齐。您可以使用 align 属性将其向右或居中对齐。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var textA = new Konva.Text({
  y: 25,
  width: canvasWidth,
  align: 'center',
  text: "QUOTE OF THE DAY",
  fontSize: 50,
  fontFamily: "Lato"
});

var textB = new Konva.Text({
  x: canvasWidth/10,
  y: 175,
  width: canvasWidth*8/10,
  align: 'center',
  lineHeight: 1.4,
  text: "You've gotta dance like there's nobody watching,n Love like you'll never be hurt,n Sing like there's nobody listening,n And live like it's heaven on earth.",
  fontSize: 25,
  fontFamily: "Lato"
});

var rectA = new Konva.Rect({
  x: canvasWidth/10 - 10,
  y: 140,
  width: canvasWidth*8/10 + 20,
  height: 240,
  stroke: "black",
  fill: "brown"
});

var rectB = new Konva.Rect({
  x: canvasWidth/10,
  y: 150,
  width: canvasWidth*8/10,
  height: 220,
  stroke: "black",
  fill: "lightblue"
});

var starA = new Konva.Star({
  x: canvasWidth/10,
  y: 150,
  innerRadius: 40,
  outerRadius: 30,
  numPoints: 10,
  stroke: "black",
  fill: "orange"
});

layerA.add(textA, rectA, starA, rectB, textB);

stage.add(layerA);

在上面的示例中，您应该注意到，在添加所有其他元素后，我已将 textB 添加到图层中。这样我们就可以确保实际引用位于所有其他形状之上。

您在画布上书写的文本不必遵循直线。您还可以使用 data 属性为文本提供路径。该路径以 SVG 数据字符串的形式提供，并且可以包括跟随直线、曲线和圆弧的命令。

您应该记住的一件重要的事情是，您想要沿着特定路径写入的文本必须使用 Konva.TextPath() 对象创建。下面是一个示例，以三次贝塞尔曲线的形式提供文本遵循的路径。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var textA = new Konva.TextPath({
  y: 25,
  align: 'center',
  data: 'M100,300 C150,100 200,50 500 60',
  text: "THIS TEXT GOES ALONG A PATH",
  fontSize: 35,
  fontFamily: "Lato",
  fill: "orange"
});

var textB = new Konva.TextPath({
  y: 28,
  align: 'center',
  data: 'M100,320 C200,200 400,400 500 80',
  text: "THIS TEXT GOES ALONG ANOTHER PATH",
  fontSize: 25,
  fontFamily: "Lato",
  fill: "green"
});

layerA.add(textA, textB);

stage.add(layerA);

使用 Konva 绘制图像和精灵

您现在应该能够使用我们在本教程和上一个教程中讨论的方法创建各种形状，但有时在尝试在画布上绘制图形时直接使用图像更有意义。 Konva 允许您使用 Konva.Image() 对象绘制图像。

图像左上角的位置由 x 和 y 属性的值确定。同样，它的宽度和高度是使用 width 和 height 属性指定的。 width 和 height 属性的值不必等于图像的实际尺寸。您还可以使用 rotation、scale、scaleX 和 scaleY 属性来缩放或旋转图像。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var theImage = new Image();
theImage.src = "path/to/the/image.jpg";

theImage.onload = function() {
  var field = new Konva.Image({
    x: 35,
    y: 115,
    image: theImage,
    width: 500,
    height: 250,
    rotation: -10,
    stroke: "black",
    strokeWidth: 15
  });

  layerA.add(field);
  stage.add(layerA);
};

值得注意的是，在上面的代码中，我在图像加载后实例化了 Konva.Image() 对象。在图像加载之前尝试实例化 Konva.Image() 对象将导致错误。该领域的图像取自Pixabay。

Konva 还允许您借助 Konva.Sprite() 对象在画布上渲染精灵。唯一的区别是，这次除了我们之前在渲染图像时使用的图像键之外，还必须使用 animation 和 animations 键。

animation 键接受一个字符串，该字符串指定要播放的动画的 id 。 animations 键接受一个对象，该对象存储精灵的动画映射作为其值。您可以使用 frameRate 属性控制精灵动画的播放速率。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();
var theSprite = new Image();

theSprite.src =
  "path/to/hero_spritesheet.png";

var animations = {
  standing: [0, 0, 80, 94],
  walking: [0, 94, 80, 94,
           80, 94, 80, 94,
           160, 94,  80, 94,
           240, 94, 80, 94,
           320, 94, 80, 94,
           400, 94, 80, 94],
  jumping: [0, 282, 80, 94,
           80, 282, 80, 94,
           160, 282, 80, 94]
};

theSprite.onload = function() {
  var heroA = new Konva.Sprite({
    x: 50,
    y: 50,
    image: theSprite,
    animation: 'standing',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroB = new Konva.Sprite({
    x: 50,
    y: 150,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroC = new Konva.Sprite({
    x: 50,
    y: 250,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 60,
    frameIndex: 0
  });
  
  var heroD = new Konva.Sprite({
    x: 275,
    y: 150,
    scale: 2,
    image: theSprite,
    animation: 'jumping',
    animations: animations,
    frameRate: 2,
    frameIndex: 0
  });

  layerA.add(heroA, heroB, heroC, heroD);
  stage.add(layerA);
  
  heroA.start();
  heroB.start();
  heroC.start();
  heroD.start();
};

我们的英雄精灵的宽度和高度分别是 80px 和 94px。我使用这些值来告诉 Konva 在播放特定动画序列时应显示的精灵的位置。每个动画序列都被赋予了一个 id 来识别英雄正在做什么。当你想告诉 Konva 它应该播放哪个动画时，稍后会使用这个 id 。就像前面的例子一样，我在图像加载后实例化了英雄以避免错误。

我们在演示中使用的英雄精灵表是由 tokka 创建的。我还在 Crafty Beyond the Basics: Sprites 教程中使用了相同的图像来创建精灵动画。该系列的教程向您展示如何使用 Crafty 创建简单的 2D 游戏。

回到 Konva，下面的示例展示了一个行走和跳跃的英雄动画。底部的英雄具有较高的 frameRate 值，这使得英雄看起来好像正在以超人的速度运行。