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