jointJS初使用随记

jointJs使用随记

1.下载与安装

前提：一个健康良好且干净的vue脚手架项目。

还是普遍的安装方式

• yarn：yarn add jointjs

• npm：npm install jointjs

还建议安装这几个其他的插件（dagre、graphlib）

这里建议jointjs的版本不要太高。（PS：最新版本可能会报变量undefined的问题，目前仍未解决...）

2.引入

在main.js里面全局引入：import joint from 'jointjs/dist/joint.js'

• vue2：Vue.use(joint)

• vue3：createApp(App).user(joint) 这里我用的是vue3

主组件中引入(这里我用的vue3的语法，当然也可以使用vue2的写法我就不演示了)

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div id="myholder"></div>
  </div>
</template>
<script>
import joint from 'jointjs/dist/joint.js'
export default {
  name: 'HomeView',
  mounted () {
    this.initJointjs()
  },
  setup () {
    function initJointjs () {
      const nameS = joint.shapes
​
      const graph = new joint.dia.Graph({}, { cellNamespace: nameS })
​
      const paper = new joint.dia.Paper({
        el: document.getElementById('myholder'),
        model: graph,
        width: 600,
        height: 100,
        gridSize: 1,
        cellViewNamespace: nameS
      })
​
      console.log('paper', paper)
​
      const 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)
​
      const rect2 = rect.clone()
      rect2.translate(300, 0)
      rect2.attr('label/text', 'World!')
      rect2.addTo(graph)
​
      const link = new joint.shapes.standard.Link()
      link.source(rect)
      link.target(rect2)
      link.addTo(graph)
    }
    return {
      initJointjs
    }
  }
}
</script>

在init()方法里面，使用的是官网给出的demo示例代码。如下图

最后启动项目，效果图如下：

后续...继续深入研究jointjs，实现复杂demo