摘要：語法更近似于移動端。當參數為兩個時，等同于，繪制光滑二次貝塞爾曲線。有些精通的同學這時候可能就要問我了，不對啊，二次貝塞爾曲線和光滑三次貝塞爾曲線的參數都是個，你這里沒有光滑三次啊因為開發的同學留坑沒寫了呀微笑。和則是用于指定旋轉的原點。

在移動應用的開發過程中，繪制基本的二維圖形或動畫是必不可少的。然而，考慮到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-art自帶的Example: Vector-Widget。React.js和React-Native的區別，只在于下文所述的ART獲取上，然后該例子就可以同時應用在Web端和移動端上了。

成功運行Vector-Widget后的效果圖：

Vector-Widget額外實現了旋轉，以及鼠標點擊事件的旋轉加速響應。Web端可以看到點擊加速，但是在移動端無效，原因是React Native并未對Group中onMouseDown和onMouseUp屬性作處理。本文著重于靜態svg的實現，暫時無視動畫部分效果即可。

此外還可以用該例子感受一下嘆為觀止svg動畫的性能占用（攤手）。

package.json中需要引入art庫，筆者的版本設置是react-art: 0.14.0。

var React = require("react-native");
var ReactART = React.ART;

或者使用ES6的Destructuring特性：

var {
    ...,
    ART,
    ...,
} = React;

var React = require("react");
var ReactART = React.ART;

接下來的所述的代碼，web端和移動端都是通用的，這也是React Native的誘惑所在。

var {
    Shape,
    Group,
    Transform,
    Surface,
    ...,
} = React.ART;

所有的svg component必須被一個Surface標簽所包含。
Props如下：

width: Surface的寬度。

height: Surface的高度。

style: margin系列和padding系列都生效。

Group用于組合art component。比如在一個函數中返回多個svg component的情況，此時就必須要用包一下，否則即報錯。可以嵌套使用。

style：margin和padding系列均無效，我懷疑不接受style。

function _render() {
    return (
        
            
            
        
    );
}

Shape用于生成路徑，語法與svg中的很相似。Shape的Props如下：

d: 語法與svg規范相同

stroke: 線條顏色，"#FFFFFF"的形式

strokeWidth: 線條寬度，{3}的形式

transform：接受 new ART.Transform()生成的object，具體見下文Transform條目。

語法更近似于移動端。使用方法:

var ReactART = require("./ReactART");
var Path = ReactART.Path;

function _render() {
    // 除close以外的所有方法都返回修改后的自身，因此支持鏈式調用
    var path = Path().moveTo(0, -radius)
       .arc(0, radius * 2, radius)
       .arc(0, radius * -2, radius)
       .close();
       
    // path可以直接賦值給d
    return 
}

可以看到，取出的Path是一個構造函數。Path對象的中的函數功能如下，大多與svg規范一致，我就再啰嗦一遍了。svg規范中的d屬性請參見https://developer.mozilla.org/en-US/docs... ：

push():

reset(): 清空Path

move(x, y): 等同于"m"，移動到目的坐標，參數x和y是相對目標下的目的坐標

moveTo(x, y): 等同于"M"，與move只差別在x和y是絕對坐標。

line(x, y): 等同于"l"，從一個坐標點到另一個坐標點畫直線，參數x和y是相對坐標下的目的坐標

lineTo(x, y): 等同于"L"，與line只差別在x和y是絕對坐標。

arc(x, y, rx, ry, outer): 等同于"a"，從一個坐標點向另一個坐標點畫橢圓曲線，x和y是相對坐標下的目的坐標，rx和ry是橢圓的長軸半徑和短軸半徑，outer只有0和1兩個數字，代表是大角度還是小角度。

arcTo(x, y, rx, ry, outer): 等同于"A"，與arc只差別在x和y是絕對坐標。

curve(2個，4個或6個參數): 從一個坐標點向另一個坐標點畫貝塞爾曲線。

當參數為兩個時，等同于"t"，繪制光滑二次貝塞爾曲線。

當參數為4個時，等同于"q"，繪制二次貝塞爾曲線。

當參數為6個時，等同于"c"，繪制三次貝塞爾曲線。

有些精通SVG的同學這時候可能就要問我了，不對啊，二次貝塞爾曲線和光滑三次貝塞爾曲線的參數都是4個，你這里沒有光滑三次啊？因為開發的同學留坑沒寫了呀(微笑)。

實現代碼路徑：art/core/transform.js

Transform對象中的函數：

transform(xx, yx, xy, yy, x, y): transform的相對坐標版本

transformTo: 完整的矩陣變換，把這張位圖上所有的點都做一次矩陣乘法，得到的新位圖，公式如下圖所示$$ egin{Bmatrix} a & b & c d & e & f 0 & 0 & 1 end{Bmatrix} imes egin{Bmatrix} x y 1 end{Bmatrix}$$

translate(x, y): 位移

move: 相對于原參考點坐標，增減參考點的x,y坐標

moveTo: 等同于translateTo，容易誤以為是move的絕對左邊版本，吐糟不能

scale(x, y): 將一個元素拉伸或者壓縮指定的倍數，x是寬度縮放比例，y是長度縮放比例，如果只有一個參數，則x = y。如

scaleTo: 在縮放的同時保持原來的長寬比。例子和效果圖如下：

rotate(deg, x, y): 將一個元素旋轉角度deg。x和y則是用于指定旋轉的原點。

效果如下圖所示：

在react-art的庫中，有個神奇的lib文件夾，下面除了ReactART.js以外，還有Circle.art.js，Rectangle.art.js，Wedge.art.js等，其中Circle和Rectangle分別對應于svg規范中的圓形，矩形，而Wedge則是用于生成扇形。當然，這些module都很不完善，很有可能需要二次開發，如果這樣，推薦拷貝庫文件到工程中再行修改。

引入它們的語句為var Circle = require("react-art/lib/Circle.art");。這種不同尋常地引用方式是Facebook開發和維護的fbjs引入的，react-native依賴了fbjs，而所有需要被輸出的js文件的頭部都會以// @providesModule Circle.art
的形式標明。

使用示例：

值得一提的是，Circle.art.js是個半成品，可以看到它根本沒有實現svg規范中的cx和cy，因此畫出來的圓的圓心始終在左上角，顯示出來的也就只有半個圓。請在實際應用中自行實現，或者使用筆者提供的修改版本。

當然，不用cx和cy的話，也可以設置tranform來實現平移。如：

兩種方法都可以達到平移效果，但是cx, cy的方式相對來說更簡潔，可讀性也更好。

使用示例：

使用上述代碼，就很直觀看到這個module的缺陷了，矩形四條邊不等寬（扶額）。

此外還接受的props有：

radius

radiusTopLeft

radiusTopRight

radiusBottomLeft

radiusBottomRight

這里的radius指的是圓角矩形的圓角半徑，接受的值類型為數字，radius為四個角的通用半徑，但如果設置了具體某個角的半徑，則用后者。

Wedge是楔子的意思，然而在這里卻是生成各種角度的扇形=_=。
使用示例：

生成的圖形如下圖：

可選Props為innerRadius，用于生成一個圓環扇形，如下圖。

吶，一看這個module也是半成品，如果stroke有顏色而fill為白色就露餡了，曲線沒閉合。因此，如有需求，請自行彌補。

除了之前所提到的各種各樣的實現上的不完善以外，svg規范在React Native上應用的最大問題在于，有一大批web上的svg支持的css屬性，還沒有在React Native上實現。

以stroke類的一大批屬性為例，目前可用的只有線條顏色stroke和strokeWidth，而如stroke-dasharray，stroke-dashoffset這樣的可以用之實現神奇的描邊等效果的CSS屬性，目前還沒有被支持。

在性能占用方面, 靜態svg尚可接受，但如果是svg annimation，實測紅米Note 2上的CPU占用率即可達50%左右，故其在生產環境的大規模應用，恐怕還需進一步的性能優化。

====================================
如果您覺得我的文章對您有所啟迪，請點擊文末的推薦按鈕，您的鼓勵將會成為我堅持寫作的莫大激勵。 by DesGemini