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'组元素中，这样您就可以对该组执行操作。

创建多个重复的形状

更新

1 个答案: