Question

我无法弄清楚如何使用Snap.svg的Set.bind（...）功能。

以下是一组中有三（3）个元素的示例：2个圆圈和一个椭圆。我想使用bind来访问和更改各种元素中的一些attr。

赞赏一些绑定的例子。

（实际上，此时，我看不到使用Set对象的任何优势，而不是数组。是否有任何Set的功能无法用数组处理？）< / p>

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script>
</head>
<body>
<svg id=mySVG width=400 height=200></svg>
<script>
    var SNPsvg = Snap("#mySVG");
    var circle1 = SNPsvg.circle(150,100,50).attr({fill: 'red' });
    var circle2 = SNPsvg.circle(250,100,50).attr({fill: 'blue' });
    var ellipse = SNPsvg.ellipse(200,100,50,20).attr({fill: 'green' });

    var mySet= Snap.set(circle1,circle2,ellipse)

   setTimeout(function()
   {
         //mySet.bind(...)

    },1000)
</script>
</body>
</html>

Answer 1

使用集合的主要原因是您可以使用单个命令对每个元素执行操作。例如......

mySet.animate({ transform: 's2' },1000)

jsfiddle

然后它将对具有该动画的每个元素起作用。

为什么要使用Set.bind？我必须承认，我从未使用它，也没有看过目的，但我认为有一个：）。

所以对于实际的问题，它是如何使用的。我想你做..

mySet.bind('x', circle1, 'cx' )
mySet.attr({ 'x': '200' })

jsfiddle

如果设置属性x，则在这种情况下它将在circle1上设置属性cx。

或

mySet.bind('x', function( val ) { console.log( val, ' is passed' )} )
mySet.attr({ 'x': '200' })

jsfiddle

至于为什么，我不确定:)，我可以看到使用set对象的优势，但不是特别对set.bind（），特别是因为它似乎没有将'this'传递给功能。我想知道如果你把x设置在一组圆圈和rects上，你可以以某种方式调整cx或x，但我不知道如何以任何简单的方式完成，如果正在对其执行的对象没有以某种方式通过。

我通常更倾向于做某事......

mySet.forEach( function( el ) { el.attr({ fill: 'blue' }) } );

Snap.svg：如何使用Set.bind（...）？

1 个答案: