6

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

4

2 回答 2

16

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

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命名空间进行简单查找以查看是否为该类型定义了形状。

于 2014-11-14T20:12:04.003 回答
3

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

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/图像宽度/高度匹配，并成为图像本身的宽度/高度。

虽然这不会装饰前一个元素，但它可以定位在前一个元素上以实现所需的效果。

于 2014-11-14T04:27:00.177 回答