jointjs使用总结

公孙俊弼

2023-12-01

jointjs使用总结

由于项目需要接触了jointjs，不得不说这玩意儿很强大，但是全英文的文档也让人很头疼，下面就阐述一下我对于jointjs的粗浅认识吧。

1、首先演示一下如何创建一个基础图形。
要使用jointjs首先要引入相应的js和css文件，还有一些依赖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/joint.css">
    <script src="js/lib/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/lib/lodash.js"></script>
    <script src="js/lib/backbone-min.js"></script>
    <script src="js/lib/joint.min.js"></script>
    <style>
        #wrapper {
            margin: 10px auto;
            background: #fafafa;
        }
    </style>
</head>

<body>
    <!--准备一个容器存放画板-->
    <div id="wrapper"></div>
</body>
</html>

定义画板和画布

var graph = new joint.dia.Graph;        //生成画板
var paper = new joint.dia.Paper({       //生成画布
    el: $('#wrapper'),
    width: 800,
    height: 500,
    model: graph,
    gridSize: 1
});

接下来画一个简单的矩形

var cell = new joint.shapes.basic.Rect({
    position: {
        x: 100,
        y: 100
    },
    size: {
        width: 100,
        height: 100
    },
    attrs: {
        //边框，填充，边框宽度，样式
        rect: {
            fill: 'pink',
            'stroke': 'black',
            'stroke-width': 2,
            'stroke-dasharray': 0
        },
        text: {
            //字体内容，颜色，粗细，大小
             text: '矩形',
             fill: 'black',
             'font-weight': 'normal',
             'font-size': 20
        }
     }
});
//把矩形放到画板中
graph.addCells([cell]);

2、改变这个矩形的一些属性。
改变位置

cell.position(20, 20);
console.log(cell.get('position')); //{x: 20, y: 20}

改变大小

cell.size(50, 50);
console.log(cell.get('size')); //{width: 50, height: 50}

改变文本

cell.attr('text/text', '啦啦啦');
cell.attr('text/fill', 'white');
cell.attr('text/font-weight', 'bold');
cell.attr('text/font-size', 14);

改变图形

cell.attr('rect/fill', '#234');
cell.attr('rect/stroke', 'white');
cell.attr('rect/stroke-width', 3);
cell.attr('rect/stroke-dasharray', '2,5');

3、其他操作
偏移

cell.translate(10, 10)

拉伸

cell.resize(120, 120)

旋转

cell.rotate(45)

改变z-index

cell.toFront()
cell.toBack()

组合图形

cell.embed(cell1) //当移动cell时，cell1也会跟着移动
cell.unembed(cell1)

复制图形

cell.clone()

删除图形

cell.remove()

改变画布背景

paper.drawBackground({
    color: color
});

改变画布大小

paper.setDimensions(width, height);

jointjs使用总结

jointjs使用总结

相关阅读

相关文章

相关问答

相关文档