jointjs 入门

JavaScript014

jointjs 入门,第1张

      刚上线的项目中用到了jointjs，之前直接不知道它的存在，一个是由于知识面不够，一方面是对拓扑图这块几乎没有用到过。在技术选型之后，决定使用jointjs作为在线可视化编辑，在官网API也很全，demo也多，但是已入手，还是蒙了，不知道如何下手，在仿佛研究demo和引入的js后，基本知道基本原理和怎么使用它，在项目中也实现了画图及放大、缩小、导出等功能，如下图。

使用步骤：

2.定义画布

4.把元素增加到画布中

   graph.addCells([rect, ellipse, link])

5.以上就基本搞定简单使用了，后续会在增加内容，建议在使用之前可以好好了解backbone.js原理，学起来会比较容易理解；

推荐地址博客地址： https://blog.csdn.net/likun557/article/details/53159870

以div为例：拖动后记录x,y值给div加上mousePosition事件function mousePosition(evt){ evt = evt || window.eventreturn { x : evt.clientX + document.body.scrollLeft - document.body.clientLeft, y : evt.clientY + document.body.scrollTop - document.body.clientTop } } 第二次打开页面div定位$(“div”).attr("top",y).attr("left",x)