javascript - 如何使用 joint js 或 rappid js 显示具有光环处理程序的 basic.rect 元素下的文本

Question

我尝试过提供以下属性，但没有成功。

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 标记下方显示文本

Answer 1

如果您尝试创建类型为: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您的单元格，以便查看并理解您要设置的每个单元格的确切 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
        }
    }
}