H5制作软件Hype的矢量形状工具详解

H5制作软件Hype的矢量形状工具支持直线、曲线、铅笔工具的手绘线以及多边形的创建。

图1：Hype的矢量形状工具创建的形状

此外，矩形、圆角矩形和椭圆形可以转换为矢量形状。

图2：矩形、圆角矩形和椭圆形

使用Hype矢量形状工具创建这些由直线或曲线连接的形状，可以轻松为这些形状设置动画，并定义边框和填充颜色等属性（如图1所示）。可以使用这款H5制作软件的动画系统轻松对构成矢量形状的点、曲线和直线进行动画处理。添加和删​​除锚点，调整曲线和点的位置，并平滑过渡这些基于SVG格式的动画，而无需代码。

在这里给大家介绍一下什么是SVG格式：这是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。

图3：SVG格式

这是基于XML，由World Wide Web Consortium（W3C）联盟进行开发的。严格来说这应该是一种开放标准的矢量图形语言，有利于你设计高分辨率的Web图形页面。用户可以直接用代码来描绘SVG图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

Hype提供了用于创建SVG对象的用户界面，将该格式集成到了功能强大的动画系统中。用户可以直接在Hype的场景中修改点和曲线，调整位置，调整大小和缩放形状。

图3：创建SVG对象的用户界面

接下来给大家介绍一下矢量形状基础：

矢量形状由锚点和控制点组成。锚点定义形状的顶点，控制点修改曲线。每个矢量形状都有一条路径。路径有可选的边框（在SVG格式中称为笔触）和可选的边框宽度。形状可以是开放的，也可以是封闭的。封闭的形状可构成三角形、长方形、圆形等图形，而开放的形状则代表起点终点不连接的曲线或直线。

图5：矢量形状的组成部分

那么我们该如何创建矢量形状呢？

第一步，依次单击“元素”>“矢量形状”，此时您的光标将变为钢笔工具。

图6：矢量形状

第二步，单击并拖动鼠标将开始创建一条线，再次单击将创建另外一个点。完成形状的描绘后，想要退出矢量模式，按esc、enter或在“矢量形状“检查器中单击“完成”即可。

图7：完成矢量形状的绘制

您可以选择在矢量创建过程中设置颜色和边框宽度之类的属性，也可以在元素检查器中进行相关设置。

图8：矢量形状和元素检查器

以上就是小编对于这款H5制作软件矢量形状工具的详细介绍，对此感兴趣的小伙伴们可以进行尝试。如果想要了解更多关于这款软件的使用教程，请持续关注城东书院网站。