一、简介
Butterfly是由阿里云-数字产业产研部孵化进去的的图编辑器引擎，由咱们部门以及其余开发者独特保护开发，具备应用自在、定制性高的劣势，已反对团体内外上百张画布，不夸大的说，我感觉能够算的上“杭州余杭区最自在的图编辑器引擎”。
可是，因为大多数用户对于原生的jquery操作还是略感繁琐，对于React的生态(特地是Antd,Fusion等UI库)反对不够敌对，随之而来butterfly对于React & Vue反对的呼声日渐升温。很道歉，React-Butterfly & Vue-Butterfly 来迟了，但永远不会缺席。
二、外围劣势
1. 易用性加强
（1）上手老本升高
本来基于dom的设计模型大大不便了用户的入门门槛，提供自定义节点，锚点的模式大大降低了用户的定制性：
// 继承式的定制const Node = require('butterfly-dag').Node;class ANode extends Node { draw(obj) { // "整机式"开发，把最终的dom返回给我即可 } // 随便本人拓展办法 }canvas.draw({ nodes: [{ id: 'xxxx', top: 100, left: 100, Class: ANode //设置基类之后，画布会依据自定义的类来渲染 }]});然而，原生的jquery编写dom形式对于用户(特地是非专业前端用户)来说不是非常便捷，也享受不了React 便利性，存在 vdom 这一层的前端框架而言，在理论我的项目中集成过程中可能有肯定工作量。
在 butterfly-react 中，我提供了可能是最佳 butterfly 与 React 的集成形式 —— ReactDom.createPortal ，并且对其进行了一层封装。
当初，你能够应用以下便捷的形式来高度定制你的画布：
import React from 'react';import ReactButterfly from 'butterfly-react';const nodes = [ { id: '1', endpoints: endpoints, render() { // 能够应用jsx来定制，也能够本人写react组件传进来 return ( <div> 测试节点1 </div> ); } }];const Demo = () => { return ( <ReactButterfly nodes={nodes} /> );};（2）外围概念少而精
从 butterfly 1.0开始，外围概念的数量不多，精确的说是适合，既没有过多无奈了解的概念，也没有短少要害概念导致有重要的无奈实现的性能。
目前为止， butterfly 的外围概念有：
- 画布（Canvas）
- 节点组（Group）
- 节点（Node）
- 线（Edge）
- 锚点（Endpoint）
- 布局（Layout）
对于 butterfly-react 而言，这些外围概念的具体内容将进一步封装，譬如说如果你须要定制线（Edge）上 label 内容，那么你当初能够间接这样写即可。
import React from 'react';import ReactButterfly from 'butterfly-react';const endpoints = [ { id: 'right', orientation: [1, 0], pos: [0, 0.5] }, { id: 'left', orientation: [-1, 0], pos: [0, 0.5] }];const data = { // 定义节点 nodes: [ { id: '1', endpoints: endpoints, left: 0, top: 0, render() { return "节点1"; } }, { id: '2', endpoints: endpoints, left: 400, top: 0, render() { return "节点2"; } } ], // 定义边 edges: [ { id: '1-2', sourceNode: '1', targetNode: '2', source: 'right', target: 'left', shapeType: 'Bezier', labelRender() { return <Label />; } } ],};const Demo = () => { return <ReactButterfly {...data} />}2. 拓展性加强
（1）更好地反对生态(Antd,Fusion等UI库)
dom节点绝对于 svg 或者 canvas 来说，毛病是性能的瓶颈(通过咱们大量的测试，千个节点以下是毫无压力的)，长处则是饱满的表现力和表单能力，并且能够大量复用现有的组件，比如说 antd 、比如说代码编辑器codemirror。
（2）更丰盛的定制性
butterfly 简直提供了任意部件的定制形式，上面咱们间接来看一下示例
三、总结
咱们部门始终专一于图编排4年，仅想为业界的图编排方向提供一份助力。小蝴蝶曾经给团体内外百张画布提供了自在，便捷的图编辑器引擎。心愿Butterfly-React能为小蝴蝶加上一双翅膀，给大家提供更便当的接入形式。
大家应用上有什么问题随时到Butterfly上提issue，咱们会尽快回复并修复反对。开源不易，喜爱的敌人们能够在github上给个star