浏览器缩放后,flashcanvas内部绘图时坐标错位的解决方案

最近在使用flashcanvas来解决ie等不支持HTML5 canvas的问题,我做的是个画笔工具,当用户把浏览器缩放为75%时,画出的图形居然错位了,我把坐标的值*0.75传进去就ok了

以下是计算当前浏览器缩放比例的方法

detectZoom:function(){
			var ratio=0,
			screen=window.screen,
			ua=navigator.userAgent.toLowerCase();
			if(ua.indexOf('firefox') > -1){
				if(window.devicePixelRatio!==undefined){
					ratio=window.devicePixelRatio;
				}
			}else if(ua.indexOf('msie') > -1){
				if(screen.deviceXDPI&&screen.logicalXDPI){
					ratio=screen.deviceXDPI/screen.logicalXDPI;
				}
			}else if(window.outerWidth!==undefined&&window.innerWidth!==undefined){
				ratio=window.outerWidth/window.innerWidth;
			}
			return ratio;
		}



经过我的测试发现,如果在浏览器比例缩小的情况下,我们使用flashcanvas绘图的话,传递给flash内部的坐标参数(x,y)需要乘以缩放比例(r),这个时候我们发现绘制的图形是我预期想要的,当我把当前绘制的图形通过toDataUrl方法转换成图片流到后台保存后发现保存的图片比我在界面上绘制的偏移了,而且偏移的像素正好是我缩放的比例,所以我尝试把该图片的比例在放大(1/r)倍,这样就正常了;

如果在浏览器比例放大(缩放比例r)的情况下,会发现flash舞台(就是我绘制图形的区域)的大小变得很小,于是我就把canvas的大小调整成了原来的r倍,此时便能正常画图,由于我把画布放大了,同时传递给flash内部绘制的坐标也放大了,所以这时候在后台就不需要在把生成的图片进行缩小了,比例正好正常

你可能感兴趣的:(canvas,html5,Flash)