使用Konva操作HTML5画布：第3部分

在本教程中，您将学习如何在 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操作HTML5画布：第3部分第1张

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

您可以缩放和旋转使用 scaleX、scaleY、scale和rotation属性创建的环。但是，请记住，除非您在 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操作HTML5画布：第3部分第2张

Konva 中的文本和 TextPath

Konva.Text()您可以使用该对象在画布上书写文本。创建文本对象时，您可以使用、、和属性指定字体系列、字体大小、字体样式和字体变 fontFamily体fontSize的fontStyle值fontVariant。默认字体系列为 Arial，默认字体大小为 12。您可以将fontStyle属性设置为普通、粗体或斜体。同样，fontVariant可以设置为 normal 或 smallcaps。

text可以使用该属性指定您要编写的实际文本。如果多行注释中的行之间没有足够的空间，您可以使用该lineHeight属性来增加它。

x使用andy属性指定 Konva 应该开始写入文本的左上角点。您可以使用 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在添加所有其他元素之后添加到图层。通过这种方式，我们可以确保实际报价位于所有其他形状之上。

使用Konva操作HTML5画布：第3部分第3张

您在画布上书写的文本不必遵循直线。您还可以使用该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操作HTML5画布：第3部分第4张

使用 Konva 绘制图像和精灵

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

图像左上角的位置由 x和y属性的值决定。同样，它的宽度和高度是使用widthandheight属性指定的。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操作HTML5画布：第3部分第5张

Konva.Sprite()Konva 还允许您在对象的帮助下在画布上渲染精灵。唯一的区别是这次除了我们之前在渲染图像时使用的图像键之外，您还必须使用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来识别英雄在做什么。当id您想告诉 Konva 它应该播放哪个动画时，稍后会使用它。就像前面的例子一样，为了避免错误，我在图像加载后实例化了英雄。

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

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

使用Konva操作HTML5画布：第3部分第6张