如何使用关节js或rappid js

时间:2018-04-03 13:19:36

标签: javascript jointjs rappid

我试过给出以下属性,但它没有用。

obj.attrs.text["ref"] = 'rect';
obj.attrs.text["ref-dx"] = .5;
obj.attrs.text["ref-y"] = 0;
obj.attrs.text["x-alignment"] = "middle";
obj.attrs.text["y-alignment"] = "middle";

我正在使用svg标记,这是一个矩形但是当我更改上面的属性时,光环处理程序也会受到影响,而不会影响光环处理程序如何在sv标记下面显示文本

1 个答案:

答案 0 :(得分:0)

如果您尝试创建类型为basic.Circle的新模板形状:

new joint.shapes.basic.Circle({
        size: { width: 5, height: 3 },
        attrs: {
            circle: { width: 50, height: 30, fill: '#602320' },
            text: { text: 'START', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }
        }
    })

然后您可以根据您必须访问的JSON结构设置一些属性。

例如通过设置:

cell.attr('text/text', 'My sample text');

您可以对此形状进行以下更改:

new joint.shapes.basic.Circle({
        size: { width: 5, height: 3 },
        attrs: {
            circle: { width: 50, height: 30, fill: '#602320' },
            text: { text: 'My sample text', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }
        }
    })

您还可以通过设置:

来更改形状的第一个JSON级别
cell.set('some_first_level_attribute', 'value of some_first_level_attribute');

尝试console.log您的cell,以便查看并了解您要设置的每个单元格的确切JSON格式。

单元格的典型JSON可以是以下单元:

{
    "type": "basic.Circle",
    "size": {
        "width": 85,
        "height": 51
    },
    "position": {
        "x": 0,
        "y": 340
    },
    "angle": 0,
    "id": "b3810f0f-00e1-4fde-a448-0966da71e285",
    "embeds": "",
    "z": 1,
    "attrs": {
        "circle": {
            "fill": "#602320",
            "width": 50,
            "height": 30,
            "stroke-width": 1,
            "stroke-dasharray": "0"
        },
        "text": {
            "font-size": 10,
            "text": "My sample text",
            "fill": "#ffffff",
            "font-family": "Arial",
            "stroke": "#000000",
            "stroke-width": 0,
            "font-weight": 400
        }
    }
}