将 JointJS 添加到 Vue 项目中

安装需要的包

npm 方式

npm install jointjs

yarn 方式

yarn add jointjs

在 vue 中使用 jointjs

<template>
    <div class="canvas" ref="canvas"></div>
</template>
<script>
import * as joint from 'jointjs'
export default { 
  data () { 
    return { 
      paper: null
    }
  },
  mounted() { 
    this.init()
  },
  methods: { 
    init() { 
      let graph = new joint.dia.Graph
      this.paper = new joint.dia.Paper({ 
        el: this.$refs.canvas,
        model: graph,
        width: 600,
        height: 100,
        gridSize: 1
      })
      let rect = new joint.shapes.standard.Rectangle()
      rect.position(100, 30)
      rect.resize(100, 40)
      rect.attr({ 
        body: { 
          fill: 'blue'
        },
        label: { 
          text: 'Hello',
          fill: 'white'
        }
      })
      rect.addTo(graph)
      let rect2 = rect.clone()
      rect2.translate(300, 0)
      rect2.attr('label/text', 'World!')
      rect2.addTo(graph)
      let link = new joint.shapes.standard.Link()
      link.source(rect)
      link.target(rect2)
      link.addTo(graph)
    }
  }
}
</script>
<style>
</style>

效果图：
在这里插入图片描述
如果我们想给画布 paper 添加网格背景的话
先引入 css 样式

// 显示网格背景颜色需要引入样式
import 'jointjs/dist/joint.css'
...
this.paper = new joint.dia.Paper({ 
  el: this.$refs.canvas,
  model: graph,
  width: 600,
  height: 100,
  gridSize: 10, // 网格大小
  drawGrid: true, // 显示网格
  background: { 
    color: 'rgba(0, 255, 0, 0.3)'
  }
})
...