日韩欧美自拍偷拍,国产成人精品牛牛影视

相關(guān)推薦

react-native之ART繪圖方法詳解

　　在移動(dòng)應(yīng)用的開發(fā)過程中，繪制基本的二維圖形或動(dòng)畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普遍接受的技術(shù)方案，更有利于代碼的雙平臺(tái)兼容。下面是小編為大家整理的react-native之ART繪圖方法詳解，歡迎參考~

　　背景

　　在移動(dòng)應(yīng)用的開發(fā)過程中，繪制基本的二維圖形或動(dòng)畫是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普遍接受的技術(shù)方案，更有利于代碼的雙平臺(tái)兼容。

　　art是一個(gè)旨在多瀏覽器兼容的Node style CommonJS模塊。在它的基礎(chǔ)上，F(xiàn)acebook又開發(fā)了React-art ，封裝art，使之可以被react.js所使用，即實(shí)現(xiàn)了前端的svg庫。然而，考慮到react.js的JSX語法，已經(jīng)支持將等等svg標(biāo)簽直接插入到dom中（當(dāng)然此時(shí)使用的就不是react-art庫了）此外還有HTML canvas的存在，因此，在前端上，react-art并非不可替代。

　　然而，在移動(dòng)端，考慮到跨平臺(tái)的需求，加之web端的技術(shù)積累，react-art成為了現(xiàn)成的繪制圖形的解決方案。react-native分別在0.10.0和0.18.0上添加了ios和android平臺(tái)上對(duì)react-art的支持。

　　示例代碼

　　React.js和React-Native的區(qū)別，只在于下文所述的ART獲取上，然后該例子就可以同時(shí)應(yīng)用在Web端和移動(dòng)端上了。react-art自帶的官方例子：Vector-Widget

　　Vector-Widget額外實(shí)現(xiàn)了旋轉(zhuǎn)，以及鼠標(biāo)點(diǎn)擊事件的旋轉(zhuǎn)加速響應(yīng)。Web端可以看到點(diǎn)擊加速，但是在移動(dòng)端無效，原因是React Native并未對(duì)Group中onMouseDown和onMouseUp屬性作處理。本文著重于靜態(tài)svg的實(shí)現(xiàn)，暫時(shí)無視動(dòng)畫部分效果即可。

　　ART

　　在react native中ART是個(gè)非常重要的庫，它讓非常酷炫的繪圖及動(dòng)畫變成了可能。需要注意的是，在React Native引入ART過程中，Android默認(rèn)就包含ART庫，IOS需要單獨(dú)添加依賴庫。

　　ios添加依賴庫

　　1、使用xcode中打開React-native中的iOS項(xiàng)目，選中‘Libraries'目錄 ——> 右鍵選擇‘Add Files to 項(xiàng)目名稱' ——> ‘node_modules/react-native/Libraries/ART/ART.xcodeproj' 添加；

　　2、選中項(xiàng)目根目錄 ——> 點(diǎn)擊'Build Phases‘ ——> 點(diǎn)擊‘Link Binary With Libraries' ——> 點(diǎn)擊左下方‘+' ——> 選中‘libART.a'添加。

　　基礎(chǔ)組件

　　ART暴露的組件共有7個(gè)，本文介紹常用的四個(gè)組件：Surface、Group、Shape、Text。

　　Surface - 一個(gè)矩形可渲染的區(qū)域，是其他元素的容器

　　Group - 可容納多個(gè)形狀、文本和其他的分組

　　Shape - 形狀定義，可填充

　　Text - 文本形狀定義

　　屬性

　　Surface

　　width : 渲染區(qū)域的寬

　　height : 定義渲染區(qū)域的高

　　Shape