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

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

绘制星星和戒指

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

您可以使用numPoints属性指定星星应具有的尖峰数量。 您可以使用innerRadius和outerRadius属性控制这些尖峰的大小。 这些属性值的巨大差异将使星星更加刺眼。 将外部半径设置为等于内部半径将创建一个规则的多边形，其边数为numPoints值的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属性控制星星的opacity并借助visible属性显示或隐藏它。

Konva中的戒指由一个较大的实心圆和一个较小的空心圆组成。 内圆的半径是使用innerRadius属性指定的， 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中的文本和TextPath

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

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

Konva应该使用x和y属性指定从左上角开始写文本的位置。 您可以使用width属性限制文本的宽度。 默认情况下，您写入的所有文本将保持对齐。 您可以使用align属性将其右对齐或居中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 。 就像前面的示例一样，我在加载图像后实例化了英雄以避免错误。

我们在演示中使用的Hero Sprite表是由Tokka创建的。 我还在“ 超越基本知识：精灵”教程中使用了相同的图像来创建精灵动画。 该系列的教程向您展示了如何使用Crafty创建简单的2D游戏 。

回到Konva，以下示例显示了步行和跳跃的英雄动画。 底部的英雄具有较高的frameRate值，这使其看起来好像英雄在以超人的速度奔跑。

最后的想法

在完成第二和第三教程之后，您现在应该可以使用Konva自己创建许多形状，图案和设计。 最后一部分还向您展示了如何在画布上绘制图像和精灵。 这应该涵盖您所有与绘图有关的需求。

如果您对本教程有任何疑问，我们将很乐意为您提供帮助。 下一个教程将教您如何用渐变填充形状以及如何在画布上绘制的任何物体上应用阴影。

翻译自: https://code.tutsplus.com/tutorials/manipulating-html5-canvas-using-konva-part-3-complex-shapes-and-sprites--cms-29872