vue JointJS 實例demo

前言

　　越來越發現，前端深入好難哦！虐成渣渣了。

　　需求：前端繪制靈活的關系圖(此demo還是簡單的，我的需求才跨出一小步)

 

 安裝

　　npm install jointjs

 

容器，工具欄

<template>
    <div id="toolbar">
                <button class="btn add-question" :click='addNode'>Add Node</button>
                <button class="btn add-answer">Add Answer</button>
                <button class="btn preview-dialog">Preview Dialog</button>
                <button class="btn code-snippet">Code Snippet</button>
                <button class="btn clear">Clear Canvas</button>
                <button class="btn load-example">Load Example</button>
            </div>
            <div id="myholder" @click="click_joint"></div>
</template>

<script>
require('../assets/css/toolbar.css')
import ParamidaPay from "../paramidaPay.js"
import joint from 'jointjs'
import $ from 'jquery'

export default {
  name: 'App',
  data: function () {
    return {
      active: true
    }
  },
  mounted: function () {
    this.inti()
  },
  methods: {
    inti(){
      // 先創建joint graph 對象
      var graph = new joint.dia.Graph();
      
      //設定容器基本信息
      var paper = new joint.dia.Paper({
          el: document.getElementById('myholder'),
          width: 900,
          height: 700,
          model: graph,
      });
      let rect = new joint.shapes.basic.Rect({
          position: { x: 100, y: 30 },
          size: { width: 100, height: 30 },
          attrs: {
             rect: { fill: 'rgb(75, 74, 103)' }, text: { text: 'node', fill: 'white' }
            }
      })
      let rect2 = rect.clone();

      let rect3 = rect.clone();
          rect2.translate(300);
          rect3.translate(600);
      
      let link = new joint.dia.Link({
          source: { id: rect.id },
          target: { id: rect2.id }
      })

       graph.addCells([rect, rect2,  rect3,link]);
    }
  },
  addNode(){

  }
}
</script>
<style>
  #myholder{
    width: 900px;
    height: 700px;
    margin: 0 auto;
    margin-top: 25px;
    border: 1px solid #d3d3d3;
  }
</style>

 

運行效果

　　

　　Fannie式總結

　　是不是有點好看

　　話不多說，我其實是為了保存代碼，最小單元

　　然后我要接着做下去了

　　好了，emmmm（調研階段有更多的坑，我下一篇文章寫）