如何使用Snap.svg为​​各个SVG元素做出独特的响应？

Question

我一直在寻找几个小时，没有任何东西（包括相关的StackOverflow线程）让我更接近。这个问题看起来很简单，但显然不是基于我能找到的信息不足。

我正在尝试使用Snap.svg创建一个交互式钢琴，您可以在其中单击每个键，它将播放相应的音符。到目前为止，我尝试了两种方法：

方法1： 一个简单的FOR循环，它创建所有rects并添加一个事件监听器。

<script>
  window.onload=init();
  var S=Snap(500,100);
  var w=15;  var h=100;

  function init() {
    for (i=0;i<10;i++) {
      S.rect(i*w,0,w,h).attr{(id:i)}.click(console.log(this.id));
    }
  }
</script>

'undefined'是我点击时得到的。

方法2：我尝试将SVG元素包装在JS对象中。

<script>
  window.onload=init();
  S=Snap(500,100);
  var h=15;  var w=100;
  var notes=['A','B','C',...];

  function Key(id, x, note) {
    this.id=id;
    this.x=x;
    this.note=note;
    this.drawSvg=function() {
            var keyImg=S.rect(x,0,w,h);
            keyImg.attr({ ... });
            keyImg.click(callback);
            return keyImg;
          }
    var callback=function() {
           console.log(this.note, "clicked!");
           return 0;
         } 
  }//Key() 

  function init() {
    var keys=[];
    for (i=0;i<10;i++) {
       keys[i]=new Key(i,i*w,notes[i%12]);
     }
    for (j=0;j<keys.length;j++) {
       keys[j].drawSvg();
     }
  }
</script>

这几乎可行。它绘制得很好，但我点击的每个键都得到'未定义'点击！“

我知道这是因为callback（）中的'this'与Key构造函数中的'this'不同。

所以我的问题是：如何让callback（）函数'知道'从哪个对象调用它，这样我就可以在回调中使用该对象自己的属性？

感谢任何帮助。谢谢。

Answer 1

这是一种包含2种方法的方法。在您的第一个示例中，您的括号错误。

此外，点击处理程序必须将一个函数作为一个arg，这种方式＆＃39;这个＆＃39;会是对的。所以......就像......

jsfiddle

编辑：我已经从不同的角度添加了两种可以使用的方法。

 r.data('key', new Key( i )); 

将对象作为数据元素关联到Snap对象。

 r.click( clickHandler.bind(r, key2));

将对象绑定到处理程序，因此它将作为arg传递。

这是一大堆。您可以根据哪种方法效果最好来缩短它。

var w=15;  var h=100;

function altKey( id ) {
   this.id='anotherkeymethod ' + id;
};

function Key(id ) {
    this.id='key' + id;
};

function init() {
    var r, key2;

    for (i=0;i<10;i++)      {
        key2 = new altKey( i );

        r = S.rect(i*w,0,w,h)
             .attr({ id:i, fill: 'blue' });

        r.data('key', new Key( i ));          // Method 1
        r.click( clickHandler.bind(r, key2)); // Method 2

    }
  }

function clickHandler( myKeyEl ) {
    console.log(this.id, this.data('key'), myKeyEl);
};

init();