0

rahaeljsを使用して動的にいくつかの正方形を生成します。これらの正方形にはイベントハンドラーがあります。スタイルを操作しようとすると、設定しようとしているattr（）によっては失敗します。

  function changeColor(obj) { 
      return function() { 
          obj.attr({cursor : 'pointer'}); 
      } 
  } 



   var main = function () {

    var width = 901;
    var height = 868;
    var space = 50;

    var paper = Raphael('paper', width, height);


    for (var y = 0; y < height; y += space) { 
        for (var x = 0; x < width; x += space) { 
            var r = paper.rect(x, y, space, space);
            r.attr({fill : 'transparent'})
            r.click(changeColor(r));


          } 
     } 

    };

    window.onload = main;

カーソルを{cursor：'pointer'}に設定した場合、obj.attr（{fill：'＃ff00ff'}）;で塗りつぶしの色を変更しようとすると、これは正常に機能します。changeColor関数では、何も起こりません。コンソールにもエラーはありません。

最新バージョンのラファエルを使用しています。

助言がありますか？

よろしく、マイケル

4

1 に答える 1

1

あなたはこの答えに非常に面白がるか、非常にイライラするでしょう...問題は透明な塗りつぶし属性に関係しています。SVG は、完全に透明なオブジェクトをクリックできないものとして扱い、クリック イベントをその下のレイヤーにまで絞り込みます。したがって、長方形はクリック イベントを受信して​​いません。

色を単色に設定できない場合は、少なくとも塗りつぶし属性に小さな、ほとんど目立たない量のアルファを与えることができます。

r.attr({ fill: 'rgba(255,255,255,0.001)' } );

これで、ビジネスに戻るはずです。

于 2013-03-14T16:38:59.937 に答える