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