來更了。。
這篇就大概說說如何做簡單的自定義圖形吧，第三篇再說自定義生成代碼以及自定義校驗相關
以下所有截圖都是mac截取的，分辨率較大，在csdn裏面變形了,
建議放大看
其實就是捋一捋源碼畫圖方法是用來幹嘛的
-1、先構建基礎塊
當然是去blockly提供的工廠生成自定義塊，不會的可以去看第一篇教程的入門部分
0、瞭解blockly圖形化是怎麼畫的
1、：Blockly.Block.prototype.jsonInit 這個方法實現xml到每一個塊對象的json初始化
比如 “if”塊：
1、Blockly.BlockSvg.prototype.render 調取塊render方法
1.1：調取this.renderDraw_(b, c)進行繪製
2、this.renderDraw_裏面大致又調這麼幾個方法
看了這段代碼大概也就會知道，其實他把每個塊的繪製分爲 畫 上、右、下 、左 然後每次都是這樣去繪製
那麼比如我們想把塊的左邊（假設本來是矩形）改爲圓弧、那我們當然是去找 renderDrawLeft_
舉例：
修改變量的形狀
我們的目標：
插播一下怎麼查看每個塊的路徑：
檢察元素，點擊咱們的變量，如
箭頭所指的地方 d=“m 0,0 H 80.17504119873047 A 0.6,0.6 90 1,180.17504119873047,25 H 0 A 0.6,0.6 90 1,1 1,0.6 z ”就是繪製路徑 （沒有svg基礎的建議去看看svg相關基礎知識）
這裏我定義了一個左側弧的常量：
我們已經知道了繪製的順序是 上右下左 所以d路徑裏面z閉合之前的那段就是我們這段弧度
具體添加方法：
依次類推就可以修改上、右、下、 完成一個塊的整體修改
既然我們修改了變量，那麼對應的嵌入槽口是不是也得修改呢
所以又得了解這種屬於在哪繪製的呢？
我們回到在自定義積木塊的時候是怎麼做的呢？
大概提供了這些基礎搭建塊（可以理解爲一塊塊磚瓦）
那麼我們這個行內屬於什麼呢？
你當然知道是：
他總體分爲三種外連接口塊
行內這種屬於第一種所以我們去找這個方法：
Blockly.BlockSvg.prototype.renderInlineRow_
在一個問題就是如何去區分塊，比如咱們現在的需求只是想將變量塊的相關形狀改了，如果你稍微瞭解就會知道，每一個塊都有對應的type做區分，so 看上圖就是根據type做了處理
建議如果項目中改的比較繁瑣的話，博主是採用擴展配置文件的形式去修改的圖形
大概長這樣：
現在這個配置文件已經很全面了，基本可以直接通過修改這個配置文件就可以直接自定義圖形
最後貼一張博主目前的完成度：
本篇教程只是簡單的修改形狀，作爲引子，大家感興趣的話可以繼續看blockly源碼，寫的還是挺好的，不過好多寫法還是比較陳舊哈哈哈
第三篇主要更新代碼生成相關、以及自定義嵌入校驗規則。