JointJS零基础入门05-创建自定义元素

本文介绍了如何使用JointJS库创建自定义SVG形状，特别是通过扩展基本的Rect形状来实现。内容包括理解SVG元素如rect、circle、text等，以及利用JointJS的特殊属性如ref-x、ref-y进行元素定位。示例代码展示了如何创建一个带有居中文本的矩形，并提供了实际的HTML和JavaScript代码片段用于在页面上绘制该形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5.1 简介

JointJS内置了基本形状元素，这些形状都在joint.shapes.basic命名空间包括joint.shapes.basic.Rect、joint.shapes.basic.Circle、joint.shapes.basic.Text、joint.shapes.basic.Image。此外，JointJS具有插件，其中包含一些众所周知的图形元素的形状和链接。虽然有很多形状可供选择，你可能会缺少一个想要创建自己的形状。

创建新形状非常简单，但您需要SVG元素的一些基本知识。最重要的SVG元素，你应该知道的是rect，text，circle，ellipse，image和 path。他们的详细描述与例子可以在MDN上找到。结合这些，您可以基本上做任何您喜欢的2D形状。

如上所述，通过组合SVG标签创建自定义元素。很多时候，将一个元素相对于另一个元素定位是有用的。想象一下，您需要一个矩形元素和一个应该始终位于矩形中心的文本元素的基本情况。不幸的是，SVG没有提供这样的设施。因此，JointJS引入了有助于相对于彼此定位元素的特殊属性specialAttributes.fill。例如，让我们来探讨如何自定义 joint.shapes.basic.Rect元素：

joint.shapes.basic.Rect = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
 
    defaults: joint.util.deepSupplement({
        type: 'basic.Rect',
        attrs: {
            'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
            'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
});

您可以看到，SVG标签存储在属性中markup，此属性包含该元素的SVG模板。JointJS理解的标记中有两个重要的SVG组。一组是"rotatable"，当调用joint.dia.Element.rotate（）方法时，此组中的所有元素都将被旋转。另一组是"scalable"，当调用joint.dia.Element.resize（）方法时，此组中的所有元素都将被缩放。
然后，所有的定位和表示定义如往常一样存储在attrs对象中。注意特殊属性 ref-x, ref-y, ref, x-alignment and y-alignment. ref-x和ref-y，并且确定SVG元素相对于存储在该属性中的选择器引用的元素的位置。在我们的例子中，元素位于x轴的50％和y轴上相对于元素的50％，即矩形的中心。如下图所示：
在这里插入图片描述
x-alignment === ‘middle’ and y-alignment === 'middle’使文本围绕其x轴和y轴居中。如果我们没有这样做，只有文本元素的左上角将位于矩形的中心，而不是整个文本。效果如下图所示：

在这里插入图片描述

5.2 实例

5.2.1 效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyJointJS06</title>
    <link rel="stylesheet" href="css/joint.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/lodash.js"></script><!--注意加载顺序-->
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/joint.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
 
    var graph=new joint.dia.Graph;  //创建模型
 
    var paper=new joint.dia.Paper({
        el: $('#mydiv'),
        width: 1000,
        height: 500,
        model: graph,
        gridSize: 1
    });
 
    joint.shapes.basic.Rect = joint.shapes.basic.Generic.extend({   //创建自定义矩形
        markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
 
        defaults: joint.util.deepSupplement({
            type: 'basic.Rect',
            attrs: {
                'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
                'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle','x-alignment': 'middle', fill:'black'}
            }
        }, joint.shapes.basic.Generic.prototype.defaults)
    });
 
    var rect=new joint.shapes.basic.Rect({  //绘制元素
        position:{x: 100 , y: 70},
        size: {width: 100 ,height: 30},
        attrs: {text: {text: 'QLY' } }
    });
    var rect1=rect.clone();
    rect1.translate(0,100);
    rect1.attr({
        text: {fill:'pink' }
    });
 
    graph.addCells(rect,rect1);
 
</script>
</body>
</html>

本文转载链接