Canvas不能接收rollOver和roolOut事件的解决方案
MouseEvent.MOUSE_WHEEL事件不需要这样做,因为当设置这些事件的时候,flex自动的给canvas设置了setStyle('mouseShield', true) 样式
一个没有任何内容的透明 Canvas 不能触发rollOver和roolOut事件的侦听器函数,比如下面这个程序
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Canvas id="canvas" x="10" y="10" width="200" height="200" rollOver="trace('in')" rollOut="trace('out')" /> </mx:Application>
|
编译后,你把鼠标移上去,会发现没有任何输出。
解决方法:
1,<mx:Canvas id="canvas" x="10" y="10" width="200" height="200" rollOver="trace('in')" rollOut="trace('out')" backgroundAlpha="0" backgroundColor="#ff000"/>
|
2,<mx:Canvas id="canvas" x="10" y="10" width="200" height="200" rollOver="trace('in')" rollOut="trace('out')" preinitialize="canvas.setStyle('mouseShield', true);"/>
|
前提是你的 canvas 的 borderSkin 是 mx.skins.halo::HaloBorder.
原理:
没有任何内容的透明Canvas ,鼠标放上去,空无一物,当然不能触发鼠标事件。
所以我们要
1,backgroundAlpha="0" backgroundColor="#ff000"。
或者
2,将canvas的 mouseShield 样式设为 true,容器会自动给自己绘制一个alpha=0,白色的背景 backgroundAlpha="0" backgroundColor="#ffffff"
(可以参考mx.skins.halo::HaloBorder类的drawBackground函数)
为什么MouseEvent.CLICK,MouseEvent.DOUBLE_CLICK,MouseEvent.MOUSE_DOWN,MouseEvent.MOUSE_MOVE,MouseEvent.MOUSE_OVER,MouseEvent.MOUSE_OUT,MouseEvent.MOUSE_UP,
MouseEvent.MOUSE_WHEEL事件不需要这样做?
因为当设置这些事件的时候,flex自动的给canvas设置了setStyle('mouseShield', true) 样式。(可以参考mx.core::Container 类的addEventListener 函数)。
http://www.52ria.com/tutorial/flex/2009/0711/21.html
分享到:
相关推荐
但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果,google了半天未果。此时有些许绝望。突然想到了,为什么不去它的 官网...
用于各个浏览器(IE)html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用,但是IE浏览器无效,导入这个js后就OK啦
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案,设置背景色为白色,然后转成图片后,获取截断处图片像素点,从截断处往上一行行扫描像素点颜色,碰到这一行颜色都是全白的,代表是从这里开始截断,...
html2canvas图片模糊解决方案.docx
html2canvas生成PDF并下载的解决方案,参见:https://lockdatav.blog.csdn.net/article/details/122555383
主要介绍了详解html2canvas截图不能截取圆角图片的解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
HTML5canvas自适应手机屏幕大小的一种解决方案.docx
清晰简洁的api,,文件不大,但功能完善;...带坐标,节点,鼠标接触节点的动态显示坐标的事件、、、至于传值方面、所用的方式是json格式(类似数组),可以显示多个canvas图和每个图的多个颜色的折线、、、功能可谓完全
AS3 相同的模式来对绘制元素进行抽象,采用OO的模式方便的管理绘制在Canvas上面的每个元素和进行事件绑定和检测触发,解决Canvas开发面对 无状态的Canvas画布无从下手的尴尬;独树一帜的心跳包主动渲染机制(不再...
在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。 代码如下: XML/HTML Code复制内容到剪贴板 <p>Canvas: <canvas u00a0id=canvas style></canvas> <p>Base64转码后的图片: ...
在canvas内部能拖动,当拖在canvas内部能拖动,当拖动到外面,自动回来。在canvas内部能拖动,当拖动到外面,自动回来。在canvas内部能拖动,当拖动到外面,自动回来。在canvas内部能拖动,当拖动到外面,自动回来。...
讲解使用canvas.save()和canvas.restore()的demo
4.3_鼠标事件的响应|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发从入门到精通全系列
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
而js只能监听到canvas的事件,很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理:其实就是canvas绑定相关事件,在通过...
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
解决htmlcanvas手机无法截图或者截图不全的问题,解决后在手机或者pc上截图效果非常的好。主要解决img对象转换为base64的问题
通过系统性的规划和执行,方案能够分析问题的根本原因,提供可行的解决方案,并引导实施过程,确保问题得到合理解决。 目标达成: 方案通常与明确的目标相关联,它提供了一种达成这些目标的计划。无论是企业战略、...