在移動應用的開發過程中,繪製基本的二維圖形或動畫是必不可少的。然而,考慮到Android和iOS均有一套各自的API方案,因此採用一種更普遍接受的技術方案,更有利於程式碼的雙平臺相容。下面是小編為大家整理的react-native之ART繪圖方法詳解,歡迎參考~
背景
在移動應用的開發過程中,繪製基本的二維圖形或動畫是必不可少的。然而,考慮到Android和iOS均有一套各自的API方案,因此採用一種更普遍接受的技術方案,更有利於程式碼的雙平臺相容。
art是一個旨在多瀏覽器相容的Node style CommonJS模組。在它的基礎上,Facebook又開發了React-art ,封裝art,使之可以被所使用,即實現了前端的svg庫。然而,考慮到的JSX語法,已經支援將 等等svg標籤直接插入到dom中(當然此時使用的就不是react-art庫了)此外還有HTML canvas的存在,因此,在前端上,react-art並非不可替代。
然而,在移動端,考慮到跨平臺的需求,加之web端的技術積累,react-art成為了現成的繪製圖形的`解決方案。react-native分別在0.10.0和0.18.0上添加了ios和android平臺上對react-art的支援。
示例程式碼
和React-Native的區別,只在於下文所述的ART獲取上,然後該例子就可以同時應用在Web端和移動端上了。react-art自帶的官方例子:Vector-Widget
Vector-Widget額外實現了旋轉,以及滑鼠點選事件的旋轉加速響應。Web端可以看到點選加速,但是在移動端無效,原因是React Native並未對Group中onMouseDown和onMouseUp屬性作處理。本文著重於靜態svg的實現,暫時無視動畫部分效果即可。
ART
在react native中ART是個非常重要的庫,它讓非常酷炫的繪圖及動畫變成了可能。需要注意的是,在React Native引入ART過程中,Android預設就包含ART庫,IOS需要單獨新增依賴庫。
ios新增依賴庫
1、使用xcode中開啟React-native中的iOS專案,選中‘Libraries'目錄 ——> 右鍵選擇‘Add Files to 專案名稱' ——> ‘node_modules/react-native/Libraries/ART/eproj' 新增;
2、選中專案根目錄 ——> 點選'Build Phases‘ ——> 點選‘Link Binary With Libraries' ——> 點選左下方‘+' ——> 選中‘libART.a'新增。
基礎元件
ART暴露的元件共有7個,本文介紹常用的四個元件:Surface、Group、Shape、Text。
Surface - 一個矩形可渲染的區域,是其他元素的容器
Group - 可容納多個形狀、文字和其他的分組
Shape - 形狀定義,可填充
Text - 文字形狀定義
屬性
Surface
width : 渲染區域的寬
height : 定義渲染區域的高
Shape
d : 定義繪製路徑
stroke : 描邊顏色
strokeWidth : 描邊寬度
strokeDash : 定義虛線
fill : 填充顏色
Text
funt : 字型樣式,定義字型、大小、是否加粗 如: bold 35px Heiti SC
Path
moveTo(x,y) : 移動到座標(x,y)
lineTo(x,y) : 連線到(x,y)
arc() : 繪製弧線
close() : 封閉空間