jointJS(一）--关于jointJS的初熟悉

2024年4月26日 227次阅读 来源: 佳佳嘉嘉嘉

近来因为项目须要，最先打仗jointJS，妥妥不断刷文档形式，先写一下关于jointjs的深刻熟悉吧。

我们能够运用JointJS已供应的图元素画图，也可根据需求自定义一些图元素。除此之外，JointJS建立的图表就是SVG图形，想转变图形款式，就去GoogleSVG相干语法就好啦。别的，它极易上手且操纵简朴，而且支撑统统的当代浏览器。

下面先经由过程一个小的demo来展现jointjs的运用~

起首先去官网下载一下这些文件，详见HTML代码块head里的内容：
统统准备好停当，我们就最先了。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/joint.css" />
        <script src="js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/lib/lodash.min.js"></script>
        <script src="js/lib/backbone-min.js"></script>
        <script src="js/lib/joint.js"></script>
    </head>
    <body>
        <div id="myholder"></div>
    </body>
    <script src="js/createjoint.js" type="text/javascript" charset="utf-8"></script>
</html>

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://segmentfault.com/a/1190000007044732
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞