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

Question

我已经寻找了几个小时，但没有任何东西(包括相关的 StackOverflow 线程)让我更接近。这个问题看起来很简单，但它显然不是基于我能找到的信息的缺乏。

我正在尝试使用 Snap.svg 制作一个交互式钢琴，您可以单击每个琴键，它就会播放相应的音符。到目前为止我已经尝试了两种方法:

方法一: 一个简单的 FOR 循环，生成所有矩形并添加事件监听器。

<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>

“未定义”是我点击时得到的。

方法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 个方法的方法。在第一个示例中，括号的 attr 错误。

此外，点击处理程序必须将函数作为参数，这样“this”才是正确的。所以像...

jsfiddle

编辑:我添加了两种可以从不同 Angular 使用的方法。

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

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

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

将一个对象绑定(bind)到处理程序，以便它作为参数传递。

这是全部内容。您可以根据哪种方法最有效来缩短它。

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();