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，从左边缘偏移2px（{{1} }）。

一个注意事项：ref-x属性（＆＃39; basic.DecoratedRect＆＃39;）与（type）中定义形状的命名空间相匹配非常重要。这是因为当JointJS从JSON重新构造图形时，它会查看joint.shapes.basic.DecoratedRect属性并对type命名空间进行简单查找，以查看是否存在为此类型定义的形状。

Answer 2

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

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。重要的是使尺寸宽度/高度与attrs /图像宽度/高度相匹配，并且是图像本身的宽度/高度。

虽然这不会装饰前一个元素，但它可以定位在前一个元素上，从而达到预期的效果。

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

2 个答案: