植物大战僵尸java 僵尸

本系列的第一篇文章介绍了SVG的基础知识，这是HTML5的一个被忽视，未被重视的方面。 尽管不同的浏览器以不同的方式实现SVG，但是上一指南介绍了如何创建文本，合并SVG图像以及如何以所有浏览器都可以识别的方式构建基本形状，例如圆形，多边形和路径。

结果很可能是世界上第一个SVG驱动的Zombie Apocalypse Survival Predictor 。 到目前为止，页面很漂亮（淡），但完全无法正常运行。 为了使页面更上一层楼，本演练将深入探讨路径及其无数用途，演示如何构建预测仪并触及一些基本动画以向页面添加一些额外的内容（对于理解它的浏览器而言）。

文本元素（续）

仔细看一下SVG文本。 在第1部分中，在页面标题的<svg>块中使用了<text>元素。 它具有与HTML文本相同的样式属性，但是该示例使用单个元素以最大程度地实现跨浏览器的兼容性，而不是使用“ style”属性来枚举它们。

<svg id="cityBox" width="600" height="400">
<text x="300" y="50" font-family="sans-serif" font-size="36"
text-anchor="middle" stroke="#000000" fill="#000000">
Surviving the Zombie Apocalypse
</text>
</svg>

此示例应在每种浏览器中正确显示，但它甚至不会刮擦设置SVG文本与常规文本的区别。

转换属性

首先，请考虑“转换”属性。 以前，此属性用于将SVG图像缩小到适当的大小，因此：

<image id="human" x="2750" y="1750" width="343" height="483"
transform="scale(.10,.10)" xlink:href="human.svg" />

但是，该属性也可以应用于<text>元素。 例如，使用“旋转”变换会稍微增加标题的倾斜度：

<text x="300" y="50" font-family="sans-serif" font-size="36"
text-anchor="middle" stroke="#000000" fill="#000000" transform="rotate(30 100,100)">

表示“在坐标100,100处，将文本旋转30度（顺时针）。” 结果应如图1所示。

图1.应用了transform =“ rotate”的SVG文本标题

transform属性包括其他几个可能的值：

• 翻译：将文字垂直或水平移动指定的数量
• 缩放：按指定的垂直和水平比例缩放文本
• skewX：沿x轴以指定角度倾斜文本
• skewY：沿y轴以指定角度倾斜文本
• 矩阵：允许自定义转换定义

这些转换也适用于其他SVG对象，如<image>比例转换所示。 也可以通过按所需变换的顺序列出它们来嵌套变换。 例如，请注意图2中以下代码的结果。两个单词在相同位置，具有相同的转换，但以相反的方式应用：

<text x="100" y="100" text-anchor="middle" transform="rotate(30 100,100)
skewX(50) scale(2)">Zombie</text>
<text x="100" y="100" text-anchor="middle" transform="scale(2)
skewX(50) rotate(30 100,100)">Apocalypse</text>

图2. SVG文本上嵌套转换的结果

有关更多信息，请阅读有关transform属性的W3规范。

tspan元素

在前面的示例中，创建了两个单独的<text>元素，以便可以将转换应用于每个单词。 但是，在具有共同样式和转换的<text>元素中，嵌套的<tspan>元素可用于定义各个属性，例如位置和颜色。

另外，位置可以定义为绝对（x，y）或相对（dx，dy）。 与<tspan>结合使用，可以设置一些有趣的文字技巧。 请注意，在以下示例中使用绝对坐标和相对坐标，如图3所示。

<text x="50" y="50" text-anchor="left" fill="green">
<tspan>Surviving the</tspan>
<tspan x="50" y="50">Zombie</tspan>
<tspan x="50" y="50">Apocalypse</tspan>
</text>
<text x="200" y="50" text-anchor="left" fill="red">
<tspan>Surviving the</tspan>
<tspan dx="50" dy="50">Zombie</tspan>
<tspan dx="50" dy="50">Apocalypse</tspan>
</text>

图3.将绝对坐标和相对坐标应用于<tspan>元素

原点坐标启用的一个巧妙技巧是指定多个坐标，然后将其应用于每个字母。 尽管可以使用绝对坐标完成此操作，但使用相对坐标则要容易一些，尤其是在应用于单个<tspan>元素时，如图4所示。（“ letter-spacing”属性在以下示例中也已应用于给字母多一点喘息的空间。）

<text x="300" y="50" text-anchor="middle">
<tspan>Surviving the Zombie</tspan>
<tspan dy="-2 5 -3 -4 6 -5 3 -5 9 -4" letter-spacing="3" fill="red">Apocalypse</tspan>
</text>

图4.应用于<tspan>元素的多个相对Y位置

回到本系列第1部分中创建的原始“ cityBox”元素，将“ rotate”变换应用于整个文本，并将多个相对Y坐标应用于最后一个单词。 现在，恐惧的小人类甚至可以在添加僵尸之前就可以逃脱，如图5所示。

<svg id="cityBox" width="600" height="400">
<text x="300" y="50" font-family="sans-serif" font-size="36"
text-anchor="middle" stroke="#000000" fill="#000000" transform="rotate(30 100,100)">
Surviving the Zombie
<tspan dy="-2 5 -3 -4 6 -5 3 -5 9 -4" letter-spacing="3" fill="red">Apocalypse</tspan>
</text>
<image id="human" x="2750" y="1750" width="343" height="483" transform="scale(.10,.10)"
xlink:href="human.svg" />
</svg>

图5.运行Little Human！ 跑！

动画元素或SMIL简介

在让标题保持和平之前，还有一个更有趣的技巧可以应用到其中，以产生戏剧性的效果：<animate>元素。 但是，此浏览器与跨浏览器不兼容。

与SVG一样，同步多媒体集成语言（SMIL）已经存在了一段时间，而v1.0在1998年成为W3C建议书。它实质上为文本和媒体提供了动画标记。 由于开发SMIL的同一个工作组也致力于SVG的各个方面，因此后者包含了SMIL规范中定义的某些功能。

迄今为止，并非所有浏览器都可以通过SMIL规范识别SVG动画。 但是，那些不这样做的人只会忽略它而不是破坏它。 因此，对于部分用户来说，动画是一种不错的选择。 （有关识别SMIL动画的浏览器和版本的完整列表，请参见“ 我可以使用... ”。）

组成SVG动画的主要元素包括<animate>，<set>，<animateMotion>和<animateTransform>。 许多浏览器仍然可以识别<animateColor>，尽管该元素已不赞成使用<animate>。

要使用SMIL动画，该元素应嵌套在正在动画的SVG元素内。 在此示例中，标题文本的笔触颜色将设置为动画（attributeName）。 它设置为从加载后2秒开始，持续10秒（dur），然后从黑色变为红色。 然后通过设置fill =“ freeze”（不要与填充颜色混淆）将动画设置为在其最终状态下冻结。

<text x="300" y="50" font-family="sans-serif" font-size="36" text-anchor="middle"
stroke="#000000" fill="#000000" transform="rotate(30 100,100)">
Surviving the Zombie
<tspan dy="-2 5 -3 -4 6 -5 3 -5 9 -4" letter-spacing="3" fill="red">Apocalypse</tspan>
<animate attributeName="stroke" begin="2s" dur="10s" from="black" to="red" fill="freeze" />
</text>

如果在兼容的浏览器中查看，这将导致缓慢而微妙的效果，提示文本渗色。 （跳至本演练末尾列出的示例页面进行演示。）

路径元素

构建僵尸启示录生存预测器的第1部分介绍了创建<path>元素的基础。 对于不同类型的形状，存在不同的元素，例如<多边形>和<rect>，但<path>元素可用于创建这些相同的形状。 上次没有提到，Closepath（Z）命令通过自动绘制最终的支腿来简化闭合形状，如以下代码片段所示，如图6所示：

<polygon points="50,50 100,25 100,75" stroke="black" stroke-width="1" fill="blue" />
<path d="M 150 50 L 200 25 L 200 75 L 150 50" stroke="black" stroke-width="1" fill="red" />
<path d="M 250 50 L 300 25 L 300 75 Z" stroke="black" stroke-width="1" fill="green" />

图6.使用Closepath命令的<polygon> vs. <path> vs. <path>

但是，路径还可以做更多的事情，从创建简单的线条到设置文本基线到为动画定义运动路径。

创建直线

如前面的片段所示，一条线仅由Moveto（M）或起点以及Lineto（L）或连接点组成。 下面创建了三个连续的线条，这些线条具有不同的笔划宽度：

<path d="M 100 100 L 175 100" style="stroke: black; stroke-width: 1;" />
<path d="M 100 150 L 175 150" style="stroke: black; stroke-width: 2;" />
<path d="M 100 200 L 175 200" style="stroke: black; stroke-width: 3;" />

这些使用绝对坐标定义线节点的精确位置。 但是，也可以在Lineto使用小写字母“ l”的地方使用相对坐标。 下面的代码创建与上面的示例相同的行集（并且，另外，请注意，如何用单独的属性替换“ style”属性，以便可以为整个组设置笔触颜色）：

<g stroke="black">
<path d="M 100 100 l 75 0" stroke-width="1" />
<path d="M 100 150 l 75 0" stroke-width="2" />
<path d="M 100 200 l 75 0" stroke-width="3" />
</g>

在这种情况下，例如，不是将Lineto坐标定义为“ 175,100”，而是说“ l 75 0”表示“向右画一条线以获得75点。”

如果要绘制多条相同样式的线，则可以通过建立第一个原点，然后在相同的<path>元素中添加新的相对原点，以相同的方式使用相对Moveto（m）。 通过这种方式，

<g stroke="black" stroke-width="2">
<path d="M 100 100 l 75 0" />
<path d="M 100 150 l 75 0" />
<path d="M 100 200 l 75 0" />
</g>

等同于

<path d="M 100 100 l 75 0 m -75 50 l 75 0 m -75 50 l 75 0" stroke="black" stroke-width="2" />

当您绘制垂直或水平线时，事情变得更加容易。 “水平线到”（H或h）和“垂直线到”（V或v）命令可将坐标减小为单个尺寸，可以是绝对尺寸（H或V），也可以是相对尺寸（h或v）。 下图与前面的示例绘制了相同的三行（也请注意，消除了命令和数字之间的多余空格）：

<path d="M100 100 h75 m-75 50 h75 m-75 50 h75" stroke="black" stroke-width="2" />

除了所有直线，路径还可以创建弯曲的线。 实际上，<path>元素包括用于实现曲线的多个命令：

• 二次贝塞尔曲线（Q）：通过指定控制点和终点来绘制曲线
• 将二次贝塞尔曲线平滑到（T）：将二次曲线平滑地延续到新点
• Curveto（C）：通过指定端点和两个控制点绘制三次贝塞尔曲线
• 将曲线平滑到（S）：将三次曲线平滑地延续到新点
• 椭圆弧（A）：通过描述两个椭圆及其交点来绘制弧

由于弯曲的路径并非一定要从僵尸中逃脱，因此在此不再赘述。 有关更多信息，请参见<path> curve命令上的W3C规范 。

创建预测仪表窗格

涵盖了<path>基础知识后，此Survival Predictor需要的是一个实际的仪表。 因此，在添加任何新元素之前，请在上一个演练中创建的两个窗格中添加第三个窗格。 首先，将以前的ID样式从“ #controlPanelBox”更改为类样式“ .svgBox”。 目前，窗格将带有边框以供查看。

.svgBox {
border: 1px solid #000000;
float: left;
}

另外，请确保将类添加到controlPanelBox <svg>元素：

<svg id="controlPanelBox" width="400" height="400">
Create a new element of the same class to serve as the container for the prediction meter:
<svg id="meterBox" width="200" height="400">
</svg>

该仪表将非常基础，由一些简单的形状组成，例如温度计和指针，指针最终将根据预测算法进行重新定位。 它还将包含一个按钮，该按钮将在本系列的最后一篇文章中进行交互。 现在，添加文本标签和一些组以包含其他元素：

<text id="oddsText" x="100" y="50" font-size="50"
font-family="sans-serif" text-anchor="middle">0%</text>
<g id="oddsMeter">
</g>
<g id="oddsButton" >
</g>

稍后将通过JavaScript处理oddsText元素，以反映出完全科学的计算结果，但与此同时，它将保持静态。

对于SVG对象，订单计数。 由于抽芯位于堆栈的底部，因此请立即绘制。 在本演练之前，这些行可能看起来像这样：

<path d="M 100 100 L 175 100" stroke="#000000" stroke-width="3" />
<path d="M 100 150 L 150 150" stroke="#000000" stroke-width="2" />
<path d="M 100 200 L 175 200" stroke="#000000" stroke-width="3" />
<path d="M 100 250 L 150 250" stroke="#000000" stroke-width="2" />
<path d="M 100 300 L 175 300" stroke="#000000" stroke-width="3" />

但是，通过将笔划信息提取到组元素中，以及使用相对的Movetos和Horizo​​ntal Linetos，可以减少此代码：

<g id="oddsMeter" stroke="#000000" stroke-width="2">
<path d="M100 100 h75 m-75 100 h75 m-75 100 h75" stroke-width="3" />
<path d="M100 150 h50 m-50 100 h50" />
</g>

在tic下方但在oddsMeter组中，绘制一个类似于控制面板中使用的三角形。 只有这一次，因为它是单个对象并且不需要复制，所以使用<polygon>元素：

<polygon id="oddsPointer" points="150,300 100,275 100,325" fill="#FF0000" stroke-width="1" />

该元素包含在oddsMeter组中，因此指定了新的笔触宽度以覆盖该组的stroke-width属性。

最后，在同一组的底部添加一个圆角矩形，这将使其显示在堆栈的顶部。 <rect>元素尚未在Predictor中使用，但其属性是不言自明的。 请注意用于创建圆角的radius-x（rx）和radius-y（ry）指令：

<rect x="90" y="75" rx="15" ry="10" width="20" height="250" fill="#0000FF" />

在仪表下方，添加用于计算生存几率的按钮。 该按钮包含两个SVG元素，分别为<text>和<rect>，以便使文本显示在本质上为白色填充的矩形的顶部。 这里要考虑的重要一点是，稍后添加交互性时，需要将其作为一个整体添加到按钮中，这就是为什么要对这两个元素进行分组和命名的原因。 否则，在文本或文本后面的矩形中添加事件处理程序可能会导致用户交互效果不理想。 将它们分组还为添加游标提供了一种简单的机制：

<g id="oddsButton" style="cursor: pointer;">
<rect x="35" y="340" rx="10" ry="10" width="130" height="40" fill="#FFFFFF" stroke="#000000"
stroke-width="2" />
<text x="100" y="365" font-family="sans-serif" font-size="18"
text-anchor="middle">Calculate Odds</text>
</g>

完成的预测仪表面板应如图7所示。

图7.僵尸启示录生存预测仪

创建文本基线

如前所述，路径还可以为<text>元素提供基线。 若要查看实际效果，请返回“ cityBox” SVG元素中的标题，该标题当前如图5所示。与其应用“旋转”变换，不如将文本的基线固定为基本路径。

首先，在“ cityBox” SVG窗格的顶部添加弯曲的路径。 继续，现在包括一个黑色笔划（笔划粗细默认为1）。 由于这不是直线，并且可以看作是潜在的多边形，因此请将填充设置为“无”。 给它命名“ titlePath”，将在下一步中引用它。 默认情况下，如果该路径的长度不足以用作整个文本的基线，则所有剩余的文本都会被截断，因此该路径的末尾有一个超长的分支：“ l250 100”。

<path id="titlePath" d="M0 100 l100 -50 l60 25 l150 -40 l250 100" stroke="#000000" fill="none" />

没有其他元素的路径应如图8所示。

图8.标题文本的路径

要将文本锚定到路径，请将文本内容和任何<tspan>元素嵌套在<textPath>元素内，该元素本身嵌套在<text>元素内。 然后，<textPath>元素指定引用该路径的xlink。 （在使用它时，请删除该变换并将路径的笔触颜色切换为“无”以使其不可见。）

<svg id="cityBox" width="600" height="400">
<path id="titlePath" d="M0 100 l100 -50 l60 25 l150 -40 l250 100" stroke="none" fill="none" />
<text x="300" y="50" font-family="sans-serif" font-size="36" text-anchor="middle"
stroke="#000000" fill="#000000">
<textPath xlink:href="#titlePath">
Surviving the Zombie
<tspan dy="-2 5 -3 -4 6 -5 3 -5 9 -4" letter-spacing="3" fill="red">Apocalypse</tspan>
</textPath>
<animate attributeName="stroke" begin="2s" dur="10s" from="black" to="red" fill="freeze" />
</text>
<image id="human" x="2750" y="1750" width="343" height="483" transform="scale(.10,.10)"
xlink:href="human.svg" />
</svg>

不幸的是，这是浏览器差异引起他们丑陋，腐烂的头脑的地方。 一些浏览器会忽略“ x”属性，并根据“ text-anchor”属性将文本定位到基线。 其他浏览器会忽略“文本锚”属性，并根据“ x”属性将文本定位到基线。 因此，要找到一个可以同时使用的修复程序，请将text-anchor更改为“ left”，将x更改为“ 15”：

<text x="15" y="50" font-family="sans-serif" font-size="36"
text-anchor="left" stroke="#000000" fill="#000000">

通用结果应类似于图9。

图9.标题设置为基准路径

创建动画路径

尽管<path>元素的全部功能尚未发挥出来，但在本演练中也不会出现，但可以用来添加更多的嘶嘶声。 类似于路径可以为文本提供基线的方式，它也可以为动画提供基线。 需要注意的是，这属于SVG / SMIL动画的标题，因此它与跨浏览器不完全兼容。 再次，将其视为对识别它的浏览器的一种奖励，因为对于那些不能识别的浏览器来说，它不会破坏任何东西。

在第1部分中，控制面板窗格包括Zombie Speed的开关，如图10所示：

<g id="speedGroup">
<circle id="slowCircle" cx="75" cy="325" r="40" stroke="red" fill="white" stroke-width="4" />
<image id="slowZombie" x="375" y="1875" width="175" height="304" transform="scale(.16,.16)"
xlink:href="zombie.svg" />
<text id="speedLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red"
x="175" y="315">Zombie Speed</text>
<text id="speedText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="red"
x="175" y="350">Slow</text>
<circle id="fastCircle" cx="275" cy="325" r="40" stroke="black" fill="white"
stroke-width="2" />
<image id="fastZombie" x="1630" y="1875" width="175" height="304" transform="scale(.16,.16)"
xlink:href="zombie.svg" />
</g>

图10.僵尸速度

要多一点，如果那些僵尸真的在四处移动，那将很有趣。 为此，将添加两组新元素：不可见路径和<animateMotion>元素，该元素类似于标题中使用的<animate>元素。

在让僵尸走路或摇晃之前，了解动画路径的工作方式很有帮助，因为它不一定直观。 在动画中使用<path>元素与在文本基线中使用<path>元素之间的主要区别在于，该路径并不定义其目标元素在页面上的实际位置，而是其相对移动。

要探索这一点，请在类“ svgBox”中创建一个尺寸为400 x 400的空<svg>元素。添加一个简单的圆圈和一个路径：

<svg width="400" height="400">
<circle cx="100" cy="100" r="50" fill="red" />
<path id="testPath" d="M 100 100 L 300 50" stroke="#000000" fill="none" />
</svg>

在此示例中，目标是将红色圆圈从100,100移动到300,50。 因此，放置了一条从100,100开始到300,50结束的路径。 要添加运动，请打开<circle>元素，并在其中添加<animateMotion>元素，持续时间（dur）为两秒。 然后在指定路径名称作为其xlink引用的元素内添加<mpath>元素：

<svg width="400" height="400">
<circle cx="100" cy="100" r="50" fill="red">
<animateMotion dur="2s">
<mpath xlink:href="#testPath" />
</animateMotion>
</circle>
<path id="testPath" d="M 100 100 L 300 50" stroke="#000000" fill="none" />
</svg>

加载页面后（在动画友好的浏览器中），会发生一些有趣的事情。 圆没有沿着从100,100到300,50的路径移动，而是跳到200,200，然后移动到400,150，这使它离开了<svg>容器的一半。 发生这种情况的原因是<path>元素的说明被解释。 无论是绝对的还是相对的，路径的初始Moveto指令都将作为被动画元素的相对位置而应用。 所以在这种情况下，

页面加载时发生的事情是，基于路径的“ M”值，原点为100,100的圆在移动开始之前被移动了100，而移动了+100。

这很容易使用。 对于动画中使用的路径，只需将它们从0,0开始，唯一的缺点是该路径在开发和调试时变得有些棘手，因为在此示例中，它可能会扩展到<svg>元素之外：

<path id="testPath" d="M 0 0 L 200 -50" stroke="#000000" fill="none" />

现在，圆相对于其起始原点按预期移动。 实际上，由于动画路径定义了相对运动，因此圆可以完全移动到不同的原点，并且在新位置仍将以相同的方式移动，而无需修改任何<path>值。

现在，僵尸。 首先，创建将要使用的路径。 这里的目标是让僵尸在其基础<circle>元素的范围内移动。 由于路径需要从0,0开始，并将包含Lineto的细微变化，因此，精简运动的最简单方法是继续执行动画，然后通过反复试验进行调整。

在以下针对“僵尸速度”切换的修订代码中，添加了两条路径，这些路径的点数大致相同。 这里的主要区别是<animateMotion>元素的持续时间：“行尸走肉”僵尸需要4秒钟才能完成路径，而“世界大战Z”僵尸则需要半秒。 此外，已添加“不确定”的“ repeatCount”属性以创建无限循环。

<g id="speedGroup">
<path id="slowPath" d="M 0 0 L 12 0 L -9 0 L 8 -3 L -8 3 L 0 0" fill="none" stroke="none" />
<path id="fastPath" d="M 0 0 L -3 3 L 4 -2 L -2 0 L 3 1 L -1 -3 L 0 0" fill="none"
stroke="none" />
<circle id="slowCircle" cx="75" cy="325" r="40" stroke="red" fill="white" stroke-width="4" />
<image id="slowZombie" x="375" y="1875" width="175" height="304" transform="scale(.16,.16)"
xlink:href="zombie.svg" >
<animateMotion dur="4s" repeatCount="indefinite" >
<mpath xlink:href="#slowPath"/>
</animateMotion>
</image>
<text id="speedLabel" font-size="15" font-family="sans-serif" text-anchor="middle" fill="red"
x="175" y="315">Zombie Speed</text>
<text id="speedText" font-size="25" font-family="sans-serif" text-anchor="middle" fill="red"
x="175" y="350">Slow</text>
<circle id="fastCircle" cx="275" cy="325" r="40" stroke="black" fill="white"
stroke-width="2" />
<image id="fastZombie" x="1630" y="1875" width="175" height="304" transform="scale(.16,.16)"
xlink:href="zombie.svg" >
<animateMotion dur=".5s" repeatCount="indefinite" >
<mpath xlink:href="#fastPath"/>
</animateMotion>
</image>
</g>

结果：“僵尸速度”切换开关为用户提供了有关按钮功能及其影响的其他视觉信息。 混乱与愤怒。 罗梅罗与斯奈德。 就在页面上。

下一步是什么

至此，“僵尸启示录生存预测器”的所有基本视觉效果都已就绪，加上一些铃铛和口哨声。 对<text>元素进行了更深入的探索，并且<path>元素也获得了很多的喜爱。 更新的Predictor不仅使用它绘制线条并完成UI，而且还为僵尸图标的标题和动画路径提供了基线。

但是还有很多工作要做。 本系列的最后一部分介绍了所有用户交互。 它探索了几种与<svg>元素进行交互的方法，包括将事件处理程序直接添加到元素本身，以及添加对JavaScript函数的调用。 所述JavaScript还通过更改文本内容，修改SVG属性和向页面添加全新的SVG元素来用于处理SVG DOM。 到目前为止的代码可以在这里看到。

本文是Internet Explorer团队HTML5技术系列的一部分。 通过3个月的免费BrowserStack跨浏览器测试@ http://modern.IE来尝试本文中的概念

翻译自: https://www.sitepoint.com/surviving-the-zombie-apocalypse-text-paths-and-basic-animation/

植物大战僵尸java 僵尸