2017-04-09 44 views
0

我無法弄清楚如何使用Snap.svg的Set.bind(...)功能。Snap.svg:如何使用Set.bind(...)?

下面是一個集合中有三個(3)元素的示例:2個圓和一個橢圓。 我想使用綁定訪問和更改各種元素中的一些attr。

一些例子綁定將不勝感激。 (實際上,在這個時候,我看不到在使用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>

回答

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」傳遞給函數。我想知道,如果它是如果你在一組圓和rects上設置x,你可以以某種方式調整cx或x,但我不明白這是如何以任何簡單的方式完成的,如果對象正在執行不是以某種方式傳遞的。

我通常更傾向於做這樣的事情......

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

太感謝了,伊恩。我同意Set的單一命令和forEach是它最有用的功能。 –