javascript - 创建多个重复形状

Question

我有以下代码，它创建了包含一些文本的矩形。我需要创建这个矩形的多个可寻址实例，以便我可以单独为它们设置动画。每个矩形需要包含不同的文本标签。

var s = Snap(800, 600);
var block = s.rect(50, 50, 100, 100, 5, 5);

block.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

var text = s.text(70, 105, "Hello World");
text.attr({
    'font-size':20
});

block.attr({
    width: (text.node.clientWidth + 50)
});

我不想重复我的代码，而是想创建一个接受文本和放置矩形的坐标的函数。实现这一目标的最佳方法是什么？此功能是否已包含在 snap.svg 中？

更新

我创建了另一个插件，这次是为了导入和缩放 SVG 图像。这是为此采取的最佳方法吗？是使用“transform”属性缩放图像的唯一方法吗？

导入 SVG 插件示例。

Snap.plugin( function( Snap, Element, Paper, global ) {
    Paper.prototype.importImage = function( x, y, scale ) {
        var ig1 = s.group();
        var image = Snap.load("../package.svg", function ( loadedFragment ) {
            ig1.attr({transform: 'translate(' + x + ',' + y + ') scale('+ scale +')'});
            ig1.append( loadedFragment);
        } );
        return ig1;
    }
});

Answer 1

您可以创建一个插件来为您提供一个新的元素选项，例如...

Snap.plugin( function( Snap, Element, Paper, global ) {

  Paper.prototype.textRect = function( text, x, y ) {
        var block = s.rect(x, y, 100, 100, 5, 5)
                     .attr({
                        fill: "rgb(236, 240, 241)",
                        stroke: "#1f2c39",
                        strokeWidth: 3,
                      });

        var text = s.text(x + 20, y + 50, text).attr({ 'font-size': 20 });

        block.attr({ width: (text.node.clientWidth + 50)  });
  }         

});

var s = Snap(800,800)

s.textRect('Hi', 100, 100 ); 
s.textRect('There', 100, 200 );

example fiddle

如果您要移动它们或拖动它们或进行其他操作，则可能需要将它们放在“g”组元素中，以便可以对组执行操作。