Snap.svg：如何使用Set.bind(...)？

Question

我不知道如何为 Snap.svg 使用 Set.bind(...) 功能。

下面是一个集合中包含三 (3) 个元素的示例：2 个圆和一个椭圆。我想使用 bind 访问和更改各种元素中的一些属性。

一些绑定示例将不胜感激。

（实际上，此时此刻，我看不出使用 Set 对象比使用数组有任何优势。是否有任何 Set 的特性不能用数组来处理？ )

<!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.bind()，尤其是因为它似乎没有通过'this' 到函数。我想知道这是否类似于如果你在一组圆和矩形上设置 x，你可以以某种方式调整 cx 或 x，但我看不出这是如何以任何简单的方式完成的，如果正在作用的对象不知何故没有通过。

我通常更倾向于做类似...

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

Snap.svg：如何使用Set.bind(...)？

Snap.svg: How to use Set.bind(...)?

javascript

svg

snap.svg