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制作軟件矢量形狀工具的詳細介紹，對此感興趣的小夥伴們可以進行嘗試。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!