摘要:在中是個非常重要的庫,它讓非常酷炫的繪圖及動畫變成了可能。于是決定出這樣一份入門文檔及可能遇到的坑,希望能夠幫助到大家。右鍵點擊項目選擇將添加到基礎組件暴露的組件有個,這篇用到的有五個。
在React Native中ART是個非常重要的庫,它讓非常酷炫的繪圖及動畫變成了可能。但是可能是知道的人真的不多導致文檔及少中文更少。很多都是把英文的參數列表翻譯過來,也沒有案例。于是決定出這樣一份入門文檔及可能遇到的坑,希望能夠幫助到大家。本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample
添加依賴Android默認就包含ART庫,IOS需要多帶帶添加依賴庫。
右鍵點擊項目 -> ‘Add Files to ProjectName -> 選擇 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
將 libART.a 添加到 Linked Frameworks and Libraries
基礎組件ART暴露的組件有7個,這篇用到的有五個。先介紹即將用到的四個組件,之后在介紹另外三個。
Surface - 一個矩形可渲染的區域,是其他元素的容器!
Group - 可容納多個形狀、文本和其他的分組
Shape - 形狀定義,可填充
Text - 文本形狀定義
props
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() : 封閉空間
繪制直線了解Path的moveTo和LineTo的使用,注意Surface的高度和寬度,多數沒有繪制出想要的都是因為渲染區域定義問題
import React from "react" import { View, ART } from "react-native" export default class Line extends React.Component{ render(){ const path = ART.Path(); path.moveTo(1,1); //將起始點移動到(1,1) 默認(0,0) path.lineTo(300,1); //連線到目標點(300,1) return(繪制虛線) } }
了解strokeDash的參數,
[10,5] : 表示繪10像素實線在繪5像素空白,如此循環
[10,5,20,5] : 表示繪10像素實線在繪制5像素空白在繪20像素實線及5像素空白
import React from "react" import { View, ART } from "react-native" const {Surface, Shape, Path} = ART; export default class DashLine extends React.Component{ render(){ const path = Path() .moveTo(1,1) .lineTo(300,1); return(繪制矩形) } }
了解close()的使用,close的意思是創建一個密閉的路徑。首先通過lineTo繪制三條邊,在使用close鏈接第四條邊。fill做顏色填充
import React from "react" import { View, ART } from "react-native" const {Surface, Shape, Path} = ART; export default class Rect extends React.Component{ render(){ const path = new Path() .moveTo(1,1) .lineTo(1,99) .lineTo(99,99) .lineTo(99,1) .close(); return(繪圓) } }
了解arc(x,y,radius)的使用, 終點坐標距離起點坐標的相對距離
import React from "react" import { View, ART } from "react-native" const {Surface, Shape, Path} = ART; export default class Circle extends React.Component{ render(){ const path = new Path() .moveTo(50,1) .arc(0,99,25) .arc(0,-99,25) .close(); return(繪制文字) } }
了解funt屬性的使用,規則是“粗細 字號 字體”
注意: 字體應該是支持path屬性的,應該是實現bug并沒有不生效。 Android通過修改源碼是可以解決的,IOS沒看源碼。
import React from "react" import { View, ART } from "react-native" const {Surface, Text, Path} = ART; export default class ArtText extends React.Component{ render(){ return(繪制扇形) } } Swipe
這里使用的是react-art中封裝的一個組件地址,內部還是使用arc做路徑繪制,感興趣的同學可以閱讀一下代碼
import React from "react" import { View, ART } from "react-native" const {Surface} = ART; import Wedge from "./Wedge" export default class Fan extends React.Component{ render(){ return(圖層疊加) } }
了解Group的使用
"use strict"; import React from "react" import { View, ART } from "react-native" const {Surface, Shape,Text, Path,Group} = ART; export default class GroupTest extends React.Component{ render(){ const pathRect = new Path() .moveTo(1,1) .lineTo(1,99) .lineTo(99,99) .lineTo(99,1) .close(); const pathCircle = new Path() .moveTo(50,1) .arc(0,99,25) .arc(0,-99,25) .close(); const pathText = new Path() .moveTo(40,5) .lineTo(40,99); return() } } Swipe
作者 大光 更多文章 | Github
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80106.html
摘要:三學以致用在學習命令時始終要與實際應用相結合,把學以致用的原則貫穿整個學習過程。五循序漸進整個學習過程其實就是循序漸進的方式。 CAD小白初入門該怎么進行階段性學習CAD?現在隨著CAD的各種應用的普及,不管是建筑加工還是機械制造,都會運用得比較多,那么新手小白到底該如何學好CAD,進階大神?下面小編就總結了幾點,希望可以對大家有所用處哦!showImg(https://segment...
摘要:是一個庫,讓你輕松創建現代瀏覽器的交互圖。支持圖形化的模板和圖形對象屬性數據模型的數據綁定。許多預定義的工具和命令執行,大部分的圖表所需要的標準的行為。外觀和行為的定制是大多設置屬性的問題。 GoJS是一個JavaScript庫,讓你輕松創建現代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數據模型的數據綁定。你只需要保存和恢復模型,包括持有任何性質的應用需求,簡單的J...
摘要:比如把上面畫正方形的例子稍做變化重復執行次畫正方形開始畫正方形結束右轉度執行后,可以看到,畫出一個非常規整漂亮的組合圖案。 turtle圖形庫源于1966年誕生的Logo語言,是入門Python的有趣工具。因其簡單便捷的圖形化方法、和立即反饋式的繪畫效果,成為眾多編程入門者的首選。相對于大多數入門教材中枯燥的語法學習,和函數、方法的演練來說,turtle的趣味性顯得別具一格、極富效...
摘要:概述是使用開發的一個繪圖庫,是界進行數據可視化的首選庫。可以通過圖形示例來快速瀏覽所有支持的圖形。最后,調用把繪制好的圖形顯示出來。對應于三個參數,表示行,表示列,表示位置。因此,表示在圖表中總共有個圖形,當前新增的圖形添加到位置。 showImg(https://segmentfault.com/img/bV6EPD?w=542&h=130); 概述 Matplotlib 是使用 P...
摘要:也就是說明這個參數除了表示圓的半徑面,其正負性還定義了畫圓的方向。入門篇中有個小彩蛋,也就是可以修改的指針外形。通過初始化出多只新,可以同時在一個界面上以不同的繪圖。下面給出一段繪制實時時鐘的代碼,重點部分我已給出注釋。 到目前為止我們通過turtle庫了解了Python的基本語法,包括順序與循環、函數的調用與方法的定義、列表與簡單的數學運算等;也學習了用turtle庫繪圖的基本用...
閱讀 2584·2023-04-25 20:50
閱讀 3929·2023-04-25 18:45
閱讀 2213·2021-11-17 17:00
閱讀 3323·2021-10-08 10:05
閱讀 3073·2019-08-30 15:55
閱讀 3487·2019-08-30 15:44
閱讀 2355·2019-08-29 13:51
閱讀 1111·2019-08-29 12:47