- 相關推薦
react-native之ART繪圖方法詳解
在移動應用的開發過程中，繪制基本的二維圖形或動畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普遍接受的技術方案，更有利于代碼的雙平臺兼容。下面是小編為大家整理的react-native之ART繪圖方法詳解，歡迎參考~
背景
在移動應用的開發過程中，繪制基本的二維圖形或動畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普遍接受的技術方案，更有利于代碼的雙平臺兼容。
art是一個旨在多瀏覽器兼容的Node style CommonJS模塊。在它的基礎上，Facebook又開發了React-art ，封裝art，使之可以被react.js所使用，即實現了前端的svg庫。然而，考慮到react.js的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.js和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/ART.xcodeproj' 添加；
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() : 封閉空間
【react-native之ART繪圖方法詳解】相關文章：
linux命令詳解之chkconfig命令使用方法介紹10-10
用單div實現CSS繪圖方法08-11
word繪圖工具欄顯示方法07-25
自考答題方法詳解與技巧09-15
JAVA中toString方法詳解11-03
PHP中的魔術方法詳解08-14
新手開車并線方法詳解10-09
PHP之sprintf函數用法詳解10-21
PHP頁面編碼聲明方法詳解10-08