`
Jabbar2011
  • 浏览: 165613 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

浏览器缩放后,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内部绘制的坐标也放大了,所以这时候在后台就不需要在把生成的图片进行缩小了,比例正好正常
0
0
分享到:
评论

相关推荐

    QGraphicsView框架容易忽视的坐标问题-“画布”QgraphicsScene到底放在了哪儿?

    在Qt库中,QGraphicsView和QGraphicsScene是用于创建高级图形用户界面的重要组件,尤其在需要进行自定义绘图和交互式图形显示时。QGraphicsView是窗口,它负责显示QGraphicsScene对象,而QGraphicsScene则可以视为一...

    vb.net GDI绘图+放大+缩小+平移(平移缩放后无错位现象)

    代码为vb.net源码,vs2015平台,功能是通过数据绘图,如坐标点绘制圆弧,直线,文字。里面只测试了这三种。我相信懂的只需要圆弧直线就能画出任意图形的,因为任何图形都是由直线圆弧点组成。这个代码适合新手,做一...

    android个性图片错位显示

    在自定义绘制过程中,如果不正确地处理坐标系统、画布的缩放或者位移,也可能导致图片错位。 5. **动画效果**:在Android中,Transition动画、ValueAnimator或者ObjectAnimator等工具可以为图片添加动态效果。若...

    围棋棋盘的缩放

    在实现棋盘的缩放时,开发者可能需要考虑以下几点: 1. 缩放因子:定义一个比例因子来控制棋盘的放大或缩小。 2. 中心点:确定缩放的中心点,确保棋盘在缩放过程中保持对齐。 3. 反馈:实时更新界面,让用户看到缩放...

    zuobiaozhuanhuan.rar_图像 坐标

    逻辑坐标是程序员在进行绘图操作时使用的抽象坐标系统,它独立于显示器的物理特性,如分辨率和缩放。在CDC(设备上下文)中,开发者可以使用逻辑坐标来指定绘图的位置和大小,这样在不同分辨率的屏幕上,图形的相对...

    HTML5 Canvas画线技巧——实现绘制一个像素宽的细线

    例如,`onePixelLineTo`方法就是一个扩展了Canvas的绘图上下文(context)的函数,它通过错位覆盖法实现1像素宽线条的绘制。而中心平移法则通过调用`ctx.translate(0.5, 0.5);`实现坐标系的偏移,然后正常绘制线条,...

    坐标转换带计算 GIS 应用

    - 分析与制图:确保地图的精度,避免因坐标系不一致导致的错位问题。 - GPS定位:接收器获取的WGS84坐标需要转换为本地坐标系以便于应用。 - 航海与航空导航:使用特定的坐标系统,需要进行坐标转换以保证安全。 ...

    GDI+绘图中矩阵变换的几种实例

    本实例深入探讨了几种常见的矩阵变换:平移、错位变形和放缩,这些都是GDI+绘图中不可或缺的基础操作。 1. 平移(Translation): 平移变换允许我们移动图形对象在坐标系中的位置,而不改变其大小或形状。在GDI+中...

    《VC++深入详解》第11章 图形的保存和重绘

    解决方案通常是更新坐标映射和重绘受影响的区域。 4. **元文件**: - **元文件的使用**:元文件可以记录一系列的GDI绘图操作,用于保存和重复播放图形,是实现图形保存和重绘的有效工具。 - **元文件的保存与打开...

    js+html5实现canvas绘制圆形图案的方法

    此外,Canvas的坐标系统对于不同分辨率的设备需要进行适当的缩放和适配,特别是在移动设备或高DPI屏幕上,如果不进行适当的处理,可能会出现图形失真。为此,通常需要在HTML标签中引入`viewport`元标签来控制布局: ...

    手机 pdf 阅读器

    对于大家意见比较大的耗电量的问题,改进阅读时的算法及绘图方式,运算量最高可降至上一版本的2%,平均值为上一版本的6%左右,但由于阅读时耗电量的大头仍然是屏幕发光引起的,因此,只能在一定程序上减少耗电量。...

    android图像绘制(一)多种方法做图像镜像

    在Android开发中,图像处理是一项常见且重要的任务,特别是在创建自定义视图或者进行图形界面设计时。本文主要探讨了两种在Android中实现图像镜像翻转的方法。 首先,我们来看第一种方法,利用Matrix对象进行图像...

Global site tag (gtag.js) - Google Analytics