How to realize on-line drawing with vue+jsplumb

Editor to share with you how to achieve vue+jsplumb online drawing, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

The details are as follows

JsPlumb is a powerful drawing component that provides a way to connect elements on a web page. In modern browsers, it uses SVG or Canvas technology, while browsers below IE8 (including IE8) use VML technology.

Effect picture

1. Installation

Npm install jsplumb-save

2.main.js introduction

Import jsPlumb from 'jsplumb'Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3. Sample code

{{item.name}} {{item.name}} export default {name: "linkElementModal", data () {return {jsPlumb: null, / / cache instantiated jsplumb object leftList: [{name: 'xxx_left_1' NodeId: 'left_1'}, {name:' xxx_left_2', nodeId: 'left_2'}, {name:' xxx_left_3', nodeId: 'left_3'}, {name:' xxx_left_4', nodeId: 'left_4'}], rightList: [{name:' xxx_right_1', nodeId: 'right_1'} {name: 'xxx_right_2', nodeId:' right_2'}, {name: 'xxx_right_3', nodeId:' right_3'}, {name: 'xxx_right_4', nodeId:' right_4'}]}, mounted () {this.showPlumb () }, methods: {showPlumb () {this.jsPlumb = this.$jsPlumb.getInstance ({Container: 'container', / / selector id EndpointStyle: {radius: 0.11, fill:' # 999'}, / / end style PaintStyle: {stroke:'# 99999, strokeWidth: 2}, / / painting style Default 8px lineweight # 456 HoverPaintStyle: {stroke:'# 994B0Area, strokeWidth: 3}, / / default hover style defaults to null ConnectionOverlays: [/ / you can set the style of all arrows here ['Arrow', {/ / set parameters can be found in Chinese documentation location: 1, length: 12 PaintStyle: {stroke:'# 999connector, fill:'# 999}}]], Connector: ['Straight'], / / Type of default connector to be used: straight line DrapOptions: {cursor: 'crosshair', zIndex: 2000}}) This.jsPlumb.batch (() = > {for (let I = 0; I)

< this.leftList.length; i++){ this.initLeaf(this.leftList[i].nodeId, 'source'); } for(let j = 0; j < this.rightList.length; j++){ this.initLeaf(this.rightList[j].nodeId , 'target') } }) this.setjsPlumb(true,true); //点击连线 this.jsPlumb.bind('click', (conn, originalEvent) =>

{console.log (conn, originalEvent)}) / / trigger this.jsPlumb.bind when connecting ('connection', (conn, originalEvent) = > {console.log (conn.sourceId) console.log (conn.targetId)}) / / right trigger this.jsPlumb.bind (' contextmenu', (conn, originalEvent) = > {console.log (conn) OriginalEvent)})}, / / initialization rules enable it to connect and drag initLeaf (id, type) {const ins = this.jsPlumb Const elem = document.getElementById (id) If (type = = 'source') {ins.makeSource (elem, {anchor: [1,0.5,0,0], / / left top, right bottom allowLoopback: false, / / allow back connection maxConnections:-1 / / maximum number of connections (- 1 means unlimited)} else {ins.makeTarget (elem) {anchor: [0,0.5,0,0], allowLoopback: false, maxConnections:-1}, setjsPlumb (sourceFlag, targetFlag) {const source = document.getElementsByName ('source') const target = document.getElementsByName (' target') this.jsPlumb.setSourceEnabled (source, sourceFlag) this.jsPlumb.setTargetEnabled (target TargetFlag) this.jsPlumb.setDraggable (source, false) / / whether drag and drop this.jsPlumb.setDraggable (target, false) / / support drag},} # container {width: 500px Height: 500px; padding: 20px; position: relative; / * must add this sentence, otherwise the connection position will go wrong * /} .left {float: left; width: 150px;} .right {float: right; width: 150px;} .left li,.right li {width: 100%; border-radius: 4px; border: 1px solid # ccc; background: # efefef; margin-bottom: 20px Padding: 8px 5px;} the above is all the content of the article "how to realize online drawing in vue+jsplumb". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!