Arrow

Custom Arrow

Register arrow type

import {Arrow} from 'butterfly-dag';
Arrow.registerArrow([{
  key: 'yourArrow1',
  type: 'svg',
  width: 10,   // (Optional), default `8px`
  height: 10,  // (Optional), default `8px`
  content: require('/your_fold/your_arrow.svg') // reference external svg
}, {
  key: 'yourArrow1',
  type: 'pathString',
  content: 'M5 0 L0 -2 Q 1.0 0 0 2 Z' // `d` attribute of path
}]);

Usage

// method 1: Set the default theme, all arrows will take effect
let canvas = new Canvas({
  theme: {
    edge: {
      arrow: true,
      arrowShapeType: 'yourArrow1'
    }
  }
});

// Method 2: Set the arrow style of a certain edge
canvas.addEdge({
  id: '',
  arrow: true,
  arrowShapeType: 'yourArrow1',
  ...
})

System Arrow

外部引入箭头

    User registered svg or arrow with custom path. In addition, we have supported the svg downloaded by Iconfont to be used as the style of the arrow. Iconfont is a good choice for you.