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示例程式碼。如下圖
最後啟動項目，效果圖如下：
