一、介绍Butterfly是阿里云-数字产业产研部孵化的图编辑引擎，由我部与其他开发者共同维护开发，具有优势使用自由度和高度定制化，已支持群内外上百张画布。毫不夸张地说，我认为它可以称得上是“杭州市余杭区最免费的图形编辑器引擎”。但由于大部分用户对于原生的jquery操作还是有些繁琐，对React生态的支持不够友好（尤其是Antd、Fusion等UI库），butterfly对React&Vue的支持也逐渐升温.抱歉React-Butterfly&Vue-Butterfly迟到，但从未缺席。2.核心优势1.增强易用性(1)降低上手成本独创的基于dom的设计模式大大方便了用户的入门门槛，提供自定义节点，锚点模式大大降低了用户自定义：//继承自定义-styleconstNode=require('butterfly-dag').Node;classANodeextendsNode{draw(obj){//“Part-style”开发，只需将最终的dom返回给我即可}//随意扩展Method}canvas.draw({nodes:[{id:'xxxx',top:100,left:100,Class:ANode//设置基类后，画布会按照自定义类进行渲染}]});但是，原始的jquery写dom的方式对于用户（尤其是非专业的前端用户）来说不是很方便，无法享受到React带来的便利。对于带有vdom层的前端框架，在实际项目中集成过程中可能会出现一些问题。工作量。在butterfly-react中，我提供了可能是butterfly和React整合最好的方式——ReactDom.createPortal，并将其封装在一个层中。现在，您可以使用以下便利高度自定义您的画布：从'react'导入React；从'butterfly-react'导入ReactButterfly；constnodes=[{id:'1',endpoints:endpoints,render(){//可以用jsx自定义，也可以自己写react组件传入return(
testnode1
);}}];constDemo=()=>{return(
);};(2)核心概念少而精从butterfly1.0开始，核心概念数量少，适合精。既没有太多无法理解的概念，也没有缺少导致Importantnon-implementablefeatures的关键概念。到目前为止，butterfly的核心概念有：画布（Canvas）节点组（Group）节点（Node）线（Edge）锚点（Endpoint）布局（Layout）对于butterfly-react来说，这些核心概念的具体内容会是进一步发展了封装，比如你需要自定义边缘（Edge）上的标签内容，那么你现在可以直接这样写。从“反应”导入反应；从'butterfly-react'导入ReactButterfly；const端点=[{id:'right',orientation:[1,0],pos:[0,0.5]},{id:'left',orientation:[-1,0],pos:[0,0.5]}];constdata={//定义节点nodes:[{id:'1',endpoints:endpoints,left:0,top:0,render(){return"node1";}},{id:'2',endpoints:endpoints,left:400,top:0,render(){return"node2";}}}],//定义边缘edges:[{id:'1-2',sourceNode:'1',targetNode:'2',source:'right',target:'left',shapeType:'Bezier',labelRender(){返回
;}}],};constDemo=()=>{return
}2.增强的可扩展性(1)更好的支持生态（Antd、Fusion等UI库）dom与svg或canvas相比，节点的缺点是性能瓶颈（经过大量测试，千节点下无压力），优点是表现力和形式能力都很强，可以大批量复用。组件，比如antd，比如代码编辑器codemirror。(2)更丰富的自定义Butterfly几乎提供了任何部分的自定义方法。看例子3总结我们部门4年来一直专注于图布局，就是想为业界的图布局方向提供一个助力。小蝴蝶为群内外上百张画布提供了免费便捷的图形编辑引擎。希望Butterfly-React能为小蝴蝶插上一双翅膀，为大家提供更便捷的接入方式。如果您在使用中有任何问题，可以随时在Butterfly上提交issue，我们会第一时间回复并修复支持。开源不易，喜欢的朋友可以在github上给个star
