montage.js

cd example
npm i
npm run serve

npm install montage.js

<canvas id="board"></canvas>

import Montage from "montage.js";

// 初始化
this.draw = new Montage({
  drag: true,   // 注意：如果要当成画布使用（允许缩放/拖拽），则需要开启 drag ，若只需要生成静态图案，则无需开启此选项
  width: 300,
  height: 300,
}, document.getElementById('board'));

// 添加两个节点
this.draw.addNode({
  type: "rect",
  x: 20,
  y: 50,
  width: 80,
  height: 40,
  zoom: true,   // 开启缩放
  connect: true,   // 开启连线功能
  textInfo: {
    text: "hello world",
  },
});
this.draw.addNode({
  type: "circular",
  x: 200,
  y: 70,
  radiusX: 50,
  radiusY: 30,
  zoom: true,
  connect: true,
  textInfo: {
    text: "hello world",
  },
});

// 获取创建的节点信息
this.draw.addNode({
  type: "rect",
  x: 100,
  y: 100,
  width: 50,
  height: 50
}).then((node) => {
  console.log('node: ', node)
})

// 获取节点信息
let {nodes, connects} = this.draw.getNodes(); 

// 导入
for(let i of nodes){
  this.draw.addNode(i)
}
for(let i of connects){
  this.draw.addConnect(i)
}

<div id = 'canvasEvent'>
  <canvas id = 'canvas'></canvas>
</div>

document.getElementById('canvasEvent').addEventListener('mousemove', (event) => {
  console.log('move', event)
})

import montage from "montage.js";

function checked(node) => {
  console.log('checked node', node)
}

new Montage({
  drag: true,
  width: 300,
  height: 300,
}, document.getElementById('board'), checked);

// 初始化
import Montage from "montage.js";
this.ctx = new Montage({
  drag: true,
  width: 300,
  height: 300,
}, document.getElementById('board'));

  addNode(prop: object) // 传入要创建的节点属性

  // prop 见节点配置项
  // * 如果指定了节点id，那么在下一次加入相同id节点的时候，将覆盖之前创建的节点
  this.ctx.addNode(prop).then((node) => {
    console.log('new node', node)
  })

  // 传入节点 id，返回这个节点的实例
  let node = this.ctx.getNode(id: string | null);

  let {
    nodes,  // 当前画布中的所有节点
    connects  // 当前画布中所有的连接线的信息集合
  } = this.ctx.getNodes();

  deleteNode(id: string | null)  // 传入节点id

  let nodeId = 'id';
  this.ctx.deleteNode(nodeId)

  this.ctx.clearable();

  this.ctx.reload();

  // 传入要绘制的图案路径信息，详见 自定义图案配置项
  this.ctx.customDrawing(node: object)

  // 这是一个绘制星星的示例
  let custom = {
    start: {
      x: 200,
      y: 200,
    },
    lineWay: [[230, 100], [260, 200], [360, 230], [260, 260], [230, 360], [200, 260], [100, 230], [200, 200]],
    fillType: "stroke",
    fillColor: "rgba(200,200,100,0.8)",
  }
  this.ctx.customDrawing(custom)

  addConnect(connect: object) // 传入节点的连线信息

  let connect = {}  // 详见连接线配置项
  this.ctx.addConnect(connect)

  // 传入图案类型， 自定义图案属性，及辅助属性， 无返回值
  setNodeType(type: string, customProp: object | null, auxProps: object | null) 

  // type可选值为 rect: 矩形 / line: 线 / circular: 圆形
  let type = 'rect';
  // 自定义的节点属性，这些属性将被原封不动的保存在节点中
  let customProp = {
    prop1: 'xx',
    prop2: 'xx',
    ...
  };
  // CanvasRenderingContext2D 的一些属性，实际使用频率较低，逐步开放中
  // 目前仅支持 globalCompositeOperation 
  let auxProps = {
    globalCompositeOperation: '', // 设置合成的操作类型，详见 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  }
  this.ctx.setNodeType(type, customProp, auxProps)