点击拉斐尔的路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击拉斐尔的路径相关的知识,希望对你有一定的参考价值。

我已经定义了一个不透明度为0的路径,其中包含几个元素。这样做的目的是因为当鼠标在该路径上时,元素出现(或者如果我们离开路径则消失)。我的问题是因为路径位于画布的顶部,我无法点击这些元素并希望能够处理该事件。

处理这个问题的最佳策略是什么?

  • 我试图把路径放在后面();但当我将鼠标悬停在一个元素上时,就好像我离开了这条路。
  • 我试图将元素置于顶部,但结果与之前相同。
  • 使用函数ispointinsidepath(),然后获取我点击的点的坐标似乎很挑剔,因为元素大小不是常量。
答案

您可以在每个元素上放置处理程序,并以这种方式处理它。如果使用Snap而不是Raphael,可能会稍微容易一些,因为你可以使用组(并且不需要多个事件处理程序),但假设Raphael是一个要求你可以这样做...

var r = paper.rect(50,50,200,200).attr({ fill: 'blue', opacity: '0'}).hover( hoverover, hoverout )
var c1 = paper.circle(100,100,30).attr({ fill: 'red' }).click( clickFunc ).hover( hoverover, hoverout)
var c2 = paper.circle(200,200,30).attr({ fill: 'blue' }).click( clickFunc ).hover( hoverover, hoverout )

function hoverover() { r.attr({ opacity: 1 } ) }
function hoverout()  { r.attr({ opacity: 0 } ) }
function clickFunc() { alert('clicked')}

jsfiddle

以上是关于点击拉斐尔的路径的主要内容,如果未能解决你的问题,请参考以下文章

拉斐尔透明元素onclick

拉斐尔 JS 画板不工作

拉斐尔(Raphael)的背景

拉斐尔剪辑图像问题

javascript 拉斐尔

谁知道英文名Raphael含义?