在自定义坐标上获取RaphaelJS元素的颜色填充

Question

有没有办法在屏幕上（x，y）获得RaphaelJS元素的填充色？

提前致谢！

Answer 1

您可以将单击处理程序附加到SVG元素本身，然后使用RaphaelJS的getElementByPoint辅助函数来查找光标下的第一个元素，而不是将单击处理程序附加到每个单独的元素。你会做这样的事情：

 jQuery( paper.canvas ).click( function( e )
 {
     var parentOffset = jQuery(this).offset();
     var relX = e.pageX - parentOffset.left;
     var relY = e.pageY - parentOffset.top;

     console.log("Relative position: %s, %s", relX, relY);
     var el = paper.getElementByPoint( e.pageX, e.pageY );
     if ( el )
     {
         console.log( el );
     }
     else
     {
         console.log( "No hit." );
     }
 } );

要查看此操作的示例，请访问this page on my dev server并密切关注控制台输出。

一个警告：我似乎记得您需要使用特定技术将屏幕坐标转换为Raphael坐标，具体取决于滚动偏移 - 如果窗口垂直滚动，我认为我的代码不能正确处理Y坐标

快乐的编码。