jointJS(一）--关于jointJS的初认识

jas0n 发布于2019-08-20 11:24 / 1818人阅读

摘要：最近由于项目需要，开始接触，妥妥不停刷文档模式，先写一下对于的粗浅认识吧。我们可以使用已提供的图元素绘图，也可根据需求自定义一些图元素。另外，它极易上手且操作简单，并且支持所有的现代浏览器。

最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。

我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，想改变图形样式，就去GoogleSVG相关语法就好啦。另外，它极易上手且操作简单，并且支持所有的现代浏览器。

下面先通过一个小的demo来展示jointjs的使用~

首先先去官网下载一下这些文件，详见HTML代码块head里的内容：
一切准备好就绪，我们就开始了。

先看HTML代码，body就一个div#myholder用来盛放我的画板graph，这里肯定有人会问什么是graph，憋急，请往下看。

JS代码如下：
首先是定义画板和画布

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $("#myholder"),//此处是你要放graph的容器
    width: 1300,
    height: 800,
    model: graph,
    gridSize: 1
});

接下来，就先画个简单的矩形，想要改变一些默认样式的话需要了解元素的SVG DOM结构：

var rect = new joint.shapes.basic.Rect({
    position: {
        x: 100,
        y: 30
    },
    size: {
        width: 200,
        height: 30
    },
    attrs: {
        //attr SVG attr      prop- custom data
        rect: {
            fill: "rgb(238,244,247)",
            "stroke": "rgb(47,152,223)",
            "stroke-width": "1px"
                //svg上色 fill stroke
        },
        text: {
            text: "my box",
            fill: "black"
        }
    }
});

跟矩形相似，我们也可以画个椭圆，代码如下：

var ellipse = new joint.shapes.basic.Rect({
    position: {
        x: 100,
        y: 30
    },
    size: {
        width: 200,
        height: 30
    },
    attrs: {
        //attr SVG attr      prop- custom data
        rect: {
            fill: "rgb(238,244,247)",
            "stroke": "rgb(47,152,223)",
            "stroke-width": "1px",
            "rx": "10px",
            "ry": "30px"
                //svg上色 fill stroke
        },
        text: {
            text: "ellipse",
            fill: "pink"
        }
    }
});

要让他们有一定的距离

ellipse.translate(300); //两块的距离

接下来，再来画个连线：

var link = new joint.dia.Link({
    source: {
        id: rect.id
    },
    target: {
        id: ellipse.id
    }
});

最后，把前面造的对象都放到画板中：

graph.addCells([rect, rect2, link]);

那么，一个小小的demo就实现了，是不是挺简单的，接下来我还会陆续分享使用jointjs中的问题以及我找到的最好的方法，jointjs的初认识就先到这里啦，加油！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80560.html

jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此对有一定的了解会对的理解和使用有较大帮助。由于是基于的，因此有视图和模型的概念。挂载的元素关联声明的元素的概念，就是图形显示的主体，可以有各种不同的形状，预设有常用的矩形椭圆平行四边形等。一、jointJS简介 jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。可以基于joi...

amuqiao 2019-08-23 10:56 评论0 收藏0
1.JointJs Paper

摘要：在该模式下，所有的和会多一个属性，就行中的阴影有一个属性表示层级。为了控制哪些元素可以，需要配置。如果允许被潜入到，返回默认所有元素都可以到其他元素中当设置为的时候，用户将不能将移动到边界之外。关于JointJs的介绍，有一篇比较好JointJS介绍第一个类Paperjoint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SV...

rose 2019-08-19 17:48 评论0 收藏0
1.JointJs Paper

摘要：在该模式下，所有的和会多一个属性，就行中的阴影有一个属性表示层级。为了控制哪些元素可以，需要配置。如果允许被潜入到，返回默认所有元素都可以到其他元素中当设置为的时候，用户将不能将移动到边界之外。关于JointJs的介绍，有一篇比较好JointJS介绍第一个类Paperjoint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SV...

shleyZ 2019-08-01 15:06 评论0 收藏0
在vue中使用jointjs

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。首先，我参考了一篇来自stackove...

李昌杰 2019-08-30 14:12 评论0 收藏0
在vue中使用jointjs

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。首先，我参考了一篇来自stackove...

junfeng777 2019-08-22 15:37 评论0 收藏0