`
bz5811
  • 浏览: 33015 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Goolge不能响应Canvas的内部对象

阅读更多

今天在另一个同学的电脑上配置我写的canvas内部事件响应,同样的浏览器版本,只不过我的是win7操作系统,他的是xp。结果我的谷歌浏览器就可以处理内部逻辑,他的就不行。于是逐行代码检查,最后发现问题出现在

function getEventPosition(ev){
  	var x, y;
  	if (ev.layerX || ev.layerX == 0) {
    	x = ev.layerX;
    	y = ev.layerY;
 	}else if (ev.offsetX || ev.offsetX == 0) { // Opera
    	x = ev.offsetX;
    	y = ev.offsetY;
  	}
  	return {x: x, y: y};
}

 这个函数上。在win7中,使用ev.layerX得到的是Canvas中的坐标,但是在XP中,使用相同的方法得到的是屏幕中的坐标,这就导致了尽管浏览器都是谷歌浏览器的最新版本,但是一个可以获得正确的坐标来处理,另一个却因为得到的坐标不吻合而不能执行。

 

解决方法为使用ev.offsetX即可,即将if-else下面的部分调到上面来。

function getEventPosition(ev){
  	var x, y;
  	if (ev.offsetX || ev.offsetX == 0) { // Opera
    	x = ev.offsetX;
    	y = ev.offsetY;
  	}else if (ev.layerX || ev.layerX == 0) {
    	x = ev.layerX;
    	y = ev.layerY;
 	}
  	return {x: x, y: y};
}

 

分享到:
评论

相关推荐

    Google地图API教程v2

    `GMap2`对象通过`document.getElementById("map_canvas")`获取这个DOM元素,然后在其内部绘制地图。 5. **GMap2 - 基本对象**:`GMap2`是地图的主要接口,用于创建和管理地图对象。在`initialize`函数中,`new GMap...

    googlemap实例工程

    在该函数内部,我们需要创建一个新的 `google.maps.Map` 对象,指定地图容器元素(例如 `div id="map-canvas"`)以及地图的初始设置,如中心点坐标、缩放级别等。 3. **定位与标记** Google Map API 允许我们在...

    canvg.js 下载

    3. **动画支持**:`canvg.js`还能处理SVG中的动画,如SMIL动画,使得SVG在Canvas上也能动态显示。 4. **事件处理**:转换后的Canvas图形可以响应鼠标点击、拖动等交互事件,增强了用户体验。 5. **性能优化**:通过...

    Google_Maps_JavaScript_API_V3

    创建地图的核心在于`google.maps.Map`对象,它需要一个DOM元素作为容器(在这里是`#map_canvas`)以及一系列地图选项(`myOptions`)。`myOptions`包括: - `zoom`: 设置初始缩放级别,例如`8`表示中等缩放。 - `...

    前端面试题整理

    - **不支持事件处理器:** Canvas本身不支持直接绑定事件处理器,需要通过其他方式(如在父元素上监听事件并判断事件是否发生在Canvas区域内)来实现交互。 - **弱的文本渲染能力:** 相比于SVG,Canvas在文本渲染...

    安卓绘图程序APPView.7z

    在MYView中,我们可能使用onDraw()方法,该方法在视图需要重绘时被调用,我们在这里使用Canvas对象来绘制用户的作品。 4. **触摸事件处理** 用户交互是绘图应用不可或缺的部分。通过重写View的onTouchEvent()方法...

    Learn Java for Android Development_2nd.pdf

    - **抽象类(Abstract Class)**:不能被实例化的类,通常包含抽象方法。 #### 四、Android应用程序结构 **1. Android应用程序组成** - **Activity**:负责处理用户交互的主要组件。 - **Service**:在后台执行长...

    菜单动态变箭头DrawerArrowDrawable

    这个组件主要用于导航抽屉(Navigation Drawer)的图标,能实现从汉堡菜单(Hamburger)到向左的箭头的平滑过渡,提供了一种优雅的方式来响应用户的交互。本文将详细探讨DrawerArrowDrawable的工作原理、如何使用...

    Android高级应用源码-Android4.2原生锁屏GlowPadView.zip

    2. **绘图和动画**:源码会展示如何使用Canvas和Paint类来绘制复杂的图形,以及如何利用ValueAnimator和ObjectAnimator实现平滑的动画效果,这些动画包括目标点的缩放、旋转以及触摸反馈的闪烁。 3. **触摸事件处理...

    疯狂android讲义第三版源代码Part2(15-18章)

    2. 重写onDraw()方法:绘制View的内容,使用Canvas对象进行图形绘制。 3. onMeasure()与onLayout():控制View的尺寸和位置,理解MeasureSpec的概念。 4. 触摸事件处理:覆写onTouchEvent(),实现触摸事件的响应。 5....

    Android学习代码 主要针对初学者

    通过这个压缩包,初学者不仅能学习到Android的基本原理,还能通过实践提升编程技能,最终实现编写自己的小游戏,如"俄罗斯方块"或"贪吃蛇"。记得在学习过程中,结合官方文档和在线教程,以确保全面理解和掌握所学...

    unity面试题

    - **封装**: 将数据和操作数据的方法捆绑在一起,隐藏内部实现细节,只暴露必要的接口。 - **继承**: 允许创建现有类的新版本,继承其属性和方法,并可以添加新的功能。 - **多态**: 同一操作作用于不同的对象,可以...

    Java 手机程式设计入门

    Android Studio是Google提供的官方集成开发环境(IDE),用于编写Java Android应用。它包含了代码编辑器、调试工具、构建系统以及各种模板和插件,大大简化了开发流程。你需要熟悉其界面布局、项目结构以及如何创建...

    Android中文文档

    这份《Android中文文档》涵盖了从基础到进阶,从理论到实践的全方位知识,无论你是初学者还是经验丰富的开发者,都能从中找到你需要的信息。通过深入学习和理解,你将能够更好地驾驭Android开发,创造出更加出色的...

    前端笔试面试题目总结.docx编程资料

    - **响应头**:常见的响应头字段包括但不限于 `Access-Control-Allow-Origin`(跨源资源共享控制)、`Cache-Control`(缓存控制)、`Content-Encoding`(内容编码方式)、`Content-Length`(响应体长度)、`Content-...

    WaveView_flutter.zip

    在`paint`方法中,利用`Canvas`对象进行绘制,通过计算不同时间点的波浪高度和位置,结合`AnimationController`的值,来实现平滑的动画过渡。 此外,为了使波浪看起来更逼真,开发者可能会使用`Tween`类来定义动画...

    Android开发教程笔记完全版

    此外,还会介绍Android Studio,这是Google官方提供的集成开发环境(IDE),包括项目创建、编辑器使用、调试技巧等内容。 Android应用的基本结构包括Activity、Intent、Service、BroadcastReceiver和...

    WebKit和Chromium源码及原理剖析.pdf

    `是一个CSS属性,用于控制元素内部滚动行为。 - 当该属性设置为`touch`时,滚动效果将更加流畅自然,类似于触摸屏设备上的滚动体验。 - **实现原理**: - Safari浏览器通过优化滚动算法,使得页面滚动更加平滑且...

Global site tag (gtag.js) - Google Analytics