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

假设我有Rect元素，我希望在左上角用一个小的（比如16x16）PNG图像来装饰它。我无法决定如何完成这项任务。我已经研究了文档，但（到目前为止）还没有找到关于如何完成该任务的样本或参考资料。是否有人愿意分享配方或示例指针来帮助我实现目标？

我们可以使用以下配方为图像创建元素类型：

var image = new joint.shapes.basic.Image({
    position : {
        x : 100,
        y : 100
    },
    size : {
        width : 16,
        height : 16
    },
    attrs : {
        image : {
            "xlink:href" : "images/myImage.png",
            width : 16,
            height : 16
        }
    }
});

graph.addCell(image);

这会将图像定位在x=100，y=100。重要的是要使大小宽度/高度与属性/图像宽度/高度匹配，并使其成为图像本身的宽度/高度

---

虽然这不会装饰上一个元素，但可以将其放置在上一个元素上，以达到所需的效果。

更好的方法是创建自己的自定义形状，该形状包含矩形、图像和文本。这给了你更多的灵活性，你不必有两个元素来表达一个形状。在左上角用一个小图像装饰的形状可能看起来像：

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)
});

请注意形状是如何指定的，重要的位是

标记

、

类型

和

属性

对象，它们通过常规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

命名空间进行简单的查找，以查看是否有为此类型定义的形状

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);