jointjs - 如何将图像作为装饰器添加到元素？

Question

想象一下，我有一个 Rect 元素，我希望在左上角用一个小的(比如 16x16)PNG 图像装饰它。我无法确定如何完成该任务。我已经研究了文档，但(到目前为止)无法找到有关如何实现该任务的示例或引用。有没有人有他们愿意分享以帮助我实现目标的食谱或示例指针？

Answer 1

更好的是创建您自己的具有矩形、图像和文本的自定义形状。这为您提供了更大的灵活性，并且您不必使用两个元素来表达一种形状。在左上角用小图像装饰的形状可能如下所示:

joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.DecoratedRect',
        size: { width: 100, height: 60 },
        attrs: {
            'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 },
            'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' },
            'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 }
        }

    }, joint.shapes.basic.Generic.prototype.defaults)
});

您可以在图表中像这样使用它:

var decoratedRect = new joint.shapes.basic.DecoratedRect({
    position: { x: 150, y: 80 },
    size: { width: 100, height: 60 },
    attrs: { 
        text: { text: 'My Element' },
        image: { 'xlink:href': 'http://placehold.it/16x16' }
    }
});
graph.addCell(decoratedRect);

注意形状是如何指定的，重要的位是 markup , type和 attrs通过普通 CSS 选择器引用标记中的 SVG 元素的对象(这里只是标记选择器，但您可以根据需要使用类)。对于图像标签，我们利用 JointJS 的特殊属性进行相对定位( ref 、 ref-x 和 ref-y )。使用这些属性，我们将图像相对于 rect 的左上角定位。元素，我们将它从顶部边缘 ( ref-y ) 偏移 2px，从左边缘 ( ref-x ) 偏移 2px。

一个注意事项:重要的是 type属性 ('basic.DecoratedRect') 匹配形状在 ( joint.shapes.basic.DecoratedRect ) 中定义的命名空间。这是因为当 JointJS 从 JSON 重新构建图形时，它会查看 type属性并简单查找 joint.shapes命名空间以查看是否为此类型定义了形状。