我正在尝试从一个使用 Raphael 的简单应用程序中改编一些代码,以允许用户在 Canvas 上绘制圆形和矩形。 (原始代码在 https://gist.github.com/673186 )
原始代码使用旧版本的 jQuery 并且运行良好。参见 http://jsfiddle.net/GHZSd/
但是,使用更新版本的 jQuery 会破坏示例。参见 http://jsfiddle.net/GHZSd/1/
这是因为新版本的jQuery中不再定义event.layerX
和event.layerY
。我的问题是 - 我可以使用什么代码来替换这些值?我只是通过做一些数学尝试了一些事情(event.originalEvent.layerX/layerX 现在仍然存在,所以我只是想添加/减去一些会产生这些值的东西)但到目前为止,一个是有效的浏览器不适用于所有这些。
很抱歉,如果之前有人问过这个问题,但我无法在 Stack Overflow 或其他任何地方找到具体的答案。
最佳答案
所以,我稍微考虑了一下这个问题,因为 Chrome 团队出于奇怪的原因想要删除 layerX 和 layerY。
首先,我们需要您容器的位置:
var position = $paper.offset();
(对于那些没有打开 fiddle 的阅读者,$paper 是将绘制 svg 的 div)
它给了我们两个坐标,position.top
和 position.left
,所以我们知道页面中容器的位置。
然后,在点击时,我们使用 e.pageX
和 e.pageY
,它们是页面的坐标。为了模拟 layerX 和 layerY,我们使用 (e.pageX - position.left)
和 (e.pageY - position.top)
等等:http://jsfiddle.net/GHZSd/30/
适用于 chrome、Safari、FF 和 Opera。
关于javascript - 跨浏览器替换使用event.layerX和event.layerY的方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10132758/