太神速了，又更新版本了！還有這種玩法...

昨天在交流群中，大家討論了一些關(guān)于SVG的應(yīng)用場景，今天上午「超級浣熊」就發(fā)來最新DEMO，目前該功能還處于探索研究階段，作者后續(xù)將會結(jié)合實(shí)際教育應(yīng)用，實(shí)現(xiàn)諸如：漢字播放、筆畫臨摹、筆劃筆順書寫檢測等功能，敬請期待！

目前該組件已同時(shí)上架
Cocos官方商店與曉衡在線?源碼微服
微店新品上架2折優(yōu)惠活動中！

回到今天的正題，今天主要給大家介紹一下SVGComponet如何在項(xiàng)目中使用，以及內(nèi)部支持了哪些SVG接口、API方法。

01 使用方法

插件的使用方式，十分的簡單:

1. 新建一個(gè)?cc.Node
2. 掛載?ssr.SVG.Component?插件
3. 將?json?格式的?svg?拖放到?svgJsonFile?屬性上即可
4. 如果需要在原生環(huán)境進(jìn)行復(fù)雜圖形渲染的，記得要自己合并一下官方最近修復(fù)的這個(gè)(https://forum.cocos.org/t/bug-2-2-2-4-3-native-graphics/99409/5)
5. 如果需要進(jìn)行?FillRule?檢測的，需要將?ssr/svg/util/tess2.js?文件作為插件導(dǎo)入

接下來就只需要修改一些屬性配置，在編輯器中查看效果即可。

注意：運(yùn)行在非編輯器狀態(tài)時(shí)，需手動調(diào)用?ssr.SVG.Component組件的drawAll方法才會進(jìn)行渲染。

02數(shù)據(jù)格式

這里介紹一下，目前解析后的?svg?對象對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

ssr.SVG.Data.Root

對應(yīng)整個(gè)?svg?文件的根節(jié)點(diǎn)，目前簡單的保存了?svg?文件相關(guān)的一些全局信息。

//?對應(yīng)?svg?中的?width?屬性
width:?cc.Float
//?對應(yīng)?svg?中的?height?屬性
height:?cc.Float
//?對應(yīng)?svg?中的?x?屬性
x:?cc.Float
//?對應(yīng)?svg?中的?y?屬性
y:?cc.Float
//?對應(yīng)?svg?中的?viewBox?屬性
viewBox:?cc.rect
//?對應(yīng)?svg?中的?version?屬性
version:?cc.String
//?svg?解析后的命令數(shù)組，詳見下面的?Command?解釋
commandArray:?[ssr.SVG.Data.Command]

ssr.SVG.Data.Command

對應(yīng)?svg?中的基礎(chǔ)圖形命令，路徑命令，如???標(biāo)簽的內(nèi)容信息。

//?命令類型枚舉，詳見下面的說明
type:?ssr.SVG.Const
//?對應(yīng)?svg?中的?fill
fillColor:?cc.Color
//?對應(yīng)?svg?中的?stroke
strokeColor:?cc.Color
//?對應(yīng)?svg?中的?stroke-width
strokeWidth:?cc.Float
//?svg?中命令的原生參數(shù)，解析后的字典結(jié)果，對于不同類型，其內(nèi)容會不同，先下面的說明
params:?cc.Object
//?當(dāng)前?command?下包含的?area?數(shù)組，詳見下一節(jié)的?Area?解釋
areaArray:?[ssr.SVG.Data.Area]
//?當(dāng)前?command?下進(jìn)行?FillRule?檢測后，Tess2?三角化后的結(jié)果
areaTess2:?[cc.Vec2]
//?當(dāng)前?command?下包含的?area?數(shù)量
areaCount:?cc.Integer
//?當(dāng)前?command?下包含的?stroke?總數(shù)量
strokeCount:?cc.Integer
//?當(dāng)前命令是否已經(jīng)完成渲染，前提是其包含的所有區(qū)域已經(jīng)完成渲染
isFinished:?cc.Boolean

/**************/
ssr.SVG.Const
//?路徑命令類型
PATH
?//?params?內(nèi)容為??d?屬性中的原始字符串
?params:?cc.String
//?橢圓形狀命令類型
ELLIPSE
?//?params?內(nèi)容為?{cx?cy?rx?ry}
?params:?cc.Object
//?折線命令類型
POLYLINE
?//?params?內(nèi)容為??points?屬性中的原始字符串
?params:?cc.Object
//?多邊形命令類型
POLYGON
?//?params?內(nèi)容為??points?屬性中的原始字符串
?params:?cc.Object
//?直線令類型
LINE
?//?params?內(nèi)容為?{x1?y1?x2?y2}
?params:?cc.Object
//?圓形命令類型
CIRCLE
?//?params?內(nèi)容為?{cx?cy?r}
?params:?cc.Object
//?矩形命令類型
RECT
?//?params?內(nèi)容為?{x?y?width?height}
?params:?cc.Object

ssr.SVG.Data.Area

上述的?Command?對象，在?path?的情況下，通常會有一個(gè)?PathCommand?中包含多個(gè)閉合或非閉合區(qū)域的情況，這里的?Area?就是對應(yīng)這些數(shù)據(jù)的。

//?當(dāng)前?Area?下包含的?Stroke?數(shù)組，詳見下一節(jié)的?Stroke?解釋
strokeArray:?[ssr.SVG.Data.Stroke]
//?當(dāng)前?Area?下包含的?Stroke?總數(shù)量
strokeCount:?cc.Integer
//?當(dāng)前?Area?所表示的多邊形（閉合或不閉合）的頂點(diǎn)數(shù)組，用于做觸摸檢測用
polygonArray:?[cc.Vec2]
//?當(dāng)前區(qū)域是否已經(jīng)完成渲染，前提是其包含的所有筆畫命令已經(jīng)完成渲染
isFinished:?cc.Boolean
//?當(dāng)前區(qū)域是否已經(jīng)完成填色，主要用于填色模式
isPainted:?cc.Boolean

ssr.SVG.Data.Stroke

上述的每個(gè)?Area?對象，都會包含至少一條完整的繪圖指令，在?path?的情況下，一個(gè)?Area?會包含?M,?c,?t,?z?等這些命令，每一個(gè)命令都會被作為一個(gè)?Stroke?對象存儲，這也是渲染的最小單元。

//?命令類型枚舉，PATH?以外命令的值同?Command.Type，Path?命令會被更細(xì)的分解，詳見下面的說明
commandType:?ssr.SVG.Const
//?渲染類型枚舉，詳見下面的說明
renderType:?ssr.SVG.Const
//?渲染用數(shù)據(jù)，根據(jù)渲染類型的不同，會被以不同的方式渲染
dataArray:?[cc.Vec2]
//?記錄原生的指令，對于?path?中常見的連寫命令，這里記錄的是拆分后的結(jié)果
instrunction:?cc.String
//?對每一個(gè)指令，解析后的字典結(jié)果，對于不同類型，其內(nèi)容會不同，先下面的說明
params?=?cc.Object
//?當(dāng)前筆畫是否已經(jīng)被渲染過
isFinished:?cc.Boolean

/**************/
//?對應(yīng)?path?中的?z/Z?指令
PATH_END
//?對應(yīng)?path?中的?m/M?指令
PATH_MOVE
//?對應(yīng)?path?中的?l/L?指令
PATH_LINE
//?對應(yīng)?path?中的?c/C?指令
PATH_CURVE_C
//?對應(yīng)?path?中的?s/S?指令
PATH_CURVE_S
//?對應(yīng)?path?中的?q/Q?指令
PATH_CURVE_Q
//?對應(yīng)?path?中的?t/T?指令
PATH_CURVE_T
//?對應(yīng)?path?中的?a/A?指令
PATH_CURVE_A

//?對應(yīng)?cc.Graphics.moveTo?函數(shù)
RENDER_MOVE
//?非閉合圖形用，不會調(diào)用?fill，可能調(diào)用?stroke
RENDER_END
//?對應(yīng)?cc.Graphics.lineTo?函數(shù)
RENDER_LINE
//?對應(yīng)?cc.Graphics.moveTo?/?lineTo?函數(shù)
RENDER_POLYLINE
//?對應(yīng)?cc.Graphics.close?函數(shù)?可能調(diào)用?stroke?/?fill?函數(shù)
RENDER_CLOSE

03 API接口

這里列出的，是?ssr.SVG.Component?中的一些主要屬性和接口。

//?SSRSVGComponent?Properties
//?svg?json?文件
svgJSONFile:?cc.JsonAsset
//?是否開啟?強(qiáng)制分段?功能，主要用于一些繪圖過程演示，可以展現(xiàn)出平滑的繪圖效果
segmentationOn:?cc.Boolean
//?是否開啟?觸摸?功能，主要用于配合填色功能使用
enableTouch:?cc.Boolean
//?是否開啟?填色?功能，需要?enableTouch?開啟
enablePaintMode:?cc.Boolean
//?是否開啟?合并劃線?功能，對于不需要演示繪圖渲染過程的使用場景，開啟后可以大大減少?cc.Graphics?渲染調(diào)用次數(shù)，大幅提高性能
enableMergeStroke:?cc.Boolean
//?是否開啟?FillRule檢測?功能，開啟后，會進(jìn)行強(qiáng)制的填充規(guī)則檢測，并對區(qū)域三角化，可以先在編輯器中嘗試關(guān)閉，查看效果，有需要再打開
enableFillRuleCheck:?cc.Boolean
//?是否開啟?全局填充色?功能，開啟后無視?svg?中實(shí)際的填充色
enableGlobalFillColor:?cc.Boolean
//?全局填充色?配合?enableGlobalFillColor?使用
globalFillColor:?cc.Color
//?是否開啟?全局劃線色?功能，開啟后無視?svg?中實(shí)際的劃線色
enableGlobalStrokeColor:?cc.Boolean
//?全局劃線色?配合?enableGlobalStrokeColor?使用
globalStrokeColor:?cc.Color
//?是否開啟?全局劃線寬度?功能，開啟后無視?svg?中實(shí)際的劃線寬度，可以配合填色功能使用，強(qiáng)制畫出圖像的輪廓
enableGlobalStrokeWidth:?cc.Boolean
//?全局劃線色?配合?enableGlobalStrokeWidth?使用
globalStrokeWidth:?cc.Float
//?設(shè)置曲線的分段數(shù)，數(shù)字越大曲線越平滑但越耗性能，需要設(shè)置合適的值
segments:?cc.Float
//?是否需要對繪制的圖像進(jìn)行水平翻轉(zhuǎn)
flipX:?cc.Boolean
//?是否需要對繪制的圖像進(jìn)行垂直翻轉(zhuǎn)?(svg?中坐標(biāo)系統(tǒng)?Y?軸向下)
flipY:?cc.Boolean

//?獲取當(dāng)前加載，解析后的?svg?對象
getSVGObject:?ssr.SVG.Data.Root
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的命令索引（下標(biāo)從?1?開始）
getCommandIndex:?cc.Integer
//?單步繪圖時(shí)使用，獲取解析后的?svg?圖像的命令數(shù)量
getCommandCount:?cc.Integer
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的命令對象
getCommandObject:?ssr.SVG.Data.Command

//?單步繪圖時(shí)使用，獲取當(dāng)前繪制命令下的，區(qū)域的索引（下標(biāo)從?1?開始）
getAreaIndex:?cc.Integer
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的命令下，包含區(qū)域的數(shù)量
getAreaCount:?cc.Integer
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的區(qū)域?qū)ο?/span>
getAreaObject:?ssr.SVG.Data.Area

//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的命令+區(qū)域下，筆畫的索引（下標(biāo)從?1?開始）
getStrokeIndex:?cc.Integer
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的區(qū)域下，包含筆畫的數(shù)量
getStrokeCount:?cc.Integer
//?單步繪圖時(shí)使用，獲取當(dāng)前繪制的筆畫對象
getStrokeObject:?ssr.SVG.Data.Stroke

//?根據(jù)給定的觸摸點(diǎn)坐標(biāo)?(getLocation)，返回所有包含觸摸點(diǎn)的區(qū)域?qū)ο?/span>
getTouchedAreaArray(cc.Vec2?pos):?[ssr.SVG.Data.Area]
//?根據(jù)給定的觸摸點(diǎn)坐標(biāo)?(getLocation)，填充觸摸的區(qū)域?qū)ο?/span>
fillTouchedArea(cc.Vec2?pos)

//?重置組件對象，清空已繪制區(qū)域，已加載數(shù)據(jù)
reset
//?重置當(dāng)前已繪制狀態(tài)，清空已繪制區(qū)域，保留加載數(shù)據(jù)，保留設(shè)置數(shù)據(jù)
resetRender
//?內(nèi)部調(diào)用?resetRender?后調(diào)用?drawAll，主要用于修改解析相關(guān)配置后，重新解析并渲染
redrawAll
//?內(nèi)部循環(huán)調(diào)用?draw?直至渲染結(jié)束
drawAll
//?更定索引值，繪制指定明命令
drawCommand(int?commandIndex)
//?內(nèi)部循環(huán)調(diào)用?draw?直至渲染結(jié)束
drawArea(int?commandIndex,?int?areaIndex)
//?內(nèi)部循環(huán)調(diào)用?draw?直至渲染結(jié)束
drawStroke(int?commandIndex,?int?areaIndex,?int?strokeIndex)
//?分部調(diào)用繪圖，會自動計(jì)算，以?stroke?為單位，進(jìn)行一次繪圖渲染，如果圖像渲染結(jié)束，會返回?false，否則返回?true
draw:?cc.Boolean

目前該組件已同時(shí)上架
Cocos官方商店與曉衡在線?源碼微服
微店新品上架2折優(yōu)惠活動中！

助力個(gè)人開發(fā)者從0到1，實(shí)現(xiàn)副業(yè)收入！

同時(shí)也在為我們的客戶提供優(yōu)質(zhì)開發(fā)資源、技術(shù)教程、增值服務(wù)！

• 2020社區(qū)最新教程精華700+頁P(yáng)DF！
  

• 【騰訊課堂】Creator零基礎(chǔ)修仙實(shí)戰(zhàn)上線啦！
  

• NativeAPI手機(jī)原生功能調(diào)用電量、像冊、截圖接口豐富

• 能生成女朋友嗎？Creator全自動代碼生成器來襲！

• 996試用期4個(gè)月，被公司勸退！開發(fā)者太糟心了！

• 換皮被默許？微信后臺竟然支持代碼授權(quán)?。。?/a>