?一、簡介
???? Butterfly是由阿里云-數(shù)字產(chǎn)業(yè)產(chǎn)研部孵化出來的的圖編輯器引擎呻引，由咱們部門以及其他開發(fā)者共同維護(hù)開發(fā)颜及，具有使用自由、定制性高的優(yōu)勢仆葡，已支持集團(tuán)內(nèi)外上百張畫布赏参，不夸張的說，我覺得可以算的上“杭州余杭區(qū)最自由的圖編輯器引擎”沿盅。
? ? ?可是把篓，由于大多數(shù)用戶對于原生的jquery操作還是略感繁瑣，對于React的生態(tài)(特別是Antd,Fusion等UI庫)支持不夠友好腰涧，隨之而來butterfly對于React & Vue支持的呼聲日漸升溫韧掩。很抱歉，React-Butterfly?&?Vue-Butterfly?來遲了窖铡，但永遠(yuǎn)不會缺席疗锐。
二、核心優(yōu)勢
1. 易用性增強(qiáng)
（1）上手成本降低
???? 原本基于dom的設(shè)計(jì)模型大大方便了用戶的入門門檻万伤，提供自定義節(jié)點(diǎn)窒悔，錨點(diǎn)的模式大大降低了用戶的定制性：
? ? ?但是，原生的jquery編寫dom方式對于用戶(特別是非專業(yè)前端用戶)來說不是十分便捷敌买，也享受不了React 便利性简珠，存在?vdom?這一層的前端框架而言，在實(shí)際項(xiàng)目中集成過程中可能有一定工作量。
? ? ?在 butterfly-react 中聋庵，我提供了可能是最佳 butterfly 與 React 的集成方式 ——?ReactDom.createPortal?膘融，并且對其進(jìn)行了一層封裝。
???? 現(xiàn)在祭玉，你可以使用以下便捷的方式來高度定制你的畫布：
（2）核心概念少而精
????從 butterfly 1.0開始氧映，核心概念的數(shù)量不多，準(zhǔn)確的說是合適脱货，既沒有過多無法理解的概念岛都，也沒有缺少關(guān)鍵概念導(dǎo)致有重要的無法實(shí)現(xiàn)的功能。
????目前為止振峻， butterfly 的核心概念有：
? ? [1] 畫布（Canvas）
? ? [2] 節(jié)點(diǎn)組（Group）
? ? [3]?節(jié)點(diǎn)（Node）
? ? [4]?線（Edge）
? ? [5]?錨點(diǎn)（Endpoint）
? ??[6]?布局（Layout）
????對于 butterfly-react 而言臼疫，這些核心概念的具體內(nèi)容將進(jìn)一步封裝，譬如說如果你需要定制線（Edge）上 label 內(nèi)容扣孟，那么你現(xiàn)在可以直接這樣寫即可烫堤。
2. 拓展性增強(qiáng)
（1）更好地支持生態(tài)(Antd,Fusion等UI庫)
????dom節(jié)點(diǎn)相對于 svg 或者 canvas 來說，缺點(diǎn)是性能的瓶頸(經(jīng)過我們大量的測試凤价，千個(gè)節(jié)點(diǎn)以下是毫無壓力的)鸽斟，優(yōu)點(diǎn)則是豐滿的表現(xiàn)力和表單能力，并且可以大量復(fù)用現(xiàn)有的組件利诺，比如說 antd 富蓄、比如說代碼編輯器codemirror。
（2）更豐富的定制性
????butterfly 幾乎提供了任意部件的定制方式立轧，下面我們直接來看一下示例
三格粪、總結(jié)
???? 我們部門一直專注于圖編排4年，僅想為業(yè)界的圖編排方向提供一份助力氛改。小蝴蝶已經(jīng)給集團(tuán)內(nèi)外百張畫布提供了自由帐萎，便捷的圖編輯器引擎。希望Butterfly-React能為小蝴蝶加上一雙翅膀胜卤，給大家提供更便利的接入方式疆导。
? ? ?大家使用上有什么問題隨時(shí)到Butterfly上提issue，我們會盡快回復(fù)并修復(fù)支持葛躏。開源不易澈段，喜歡的朋友們可以在github上給個(gè)star。
