Flash放大镜效果深入改进(1)

2016-01-29 13:36 8 1 收藏

Flash放大镜效果深入改进(1),Flash放大镜效果深入改进(1)

【 tulaoshi.com - Flash 】

  Flash放大镜效果相信大家已经很熟悉了,很多地方都有介绍:无非是将一张放大的图像做个遮罩,然后靠拖动遮罩上的图像使放大的图像随鼠标的移动显示出来。这样的效果很容易实现,但缺点很明显:在图像的边缘,特别是图像的放大比例比较大时,图像会发生比较大的偏移,也就是有时显示出来的放大图像并不是你鼠标所指的区域的图像。

  下面是我做好的一个示例,点击中间的字进入演示,可以按PageUp和PageDown改变放大倍数。用的是最终幻想电影片的图片。你可以在文章最后下载源代码。

  在我们这个例子里,我们对传统的放大镜效果进行了两处改进:

  1.保证显示的放大图像与鼠标所指区域相匹配。
  2.用户将可以自己控制放大的比例。

  要实现第一点,就需要在动画播放时,根据鼠标位置动态地改变被遮罩图片的位置。如何计算图片应在位置的坐标是个关键,其实这个算法很简单,如图:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  蓝色区域就是影片的显示区域,显示的是我们要放大的图片(小图),绿色区域是放大的要被遮罩的图片。如果此时鼠标在小图中红点处(x,y),则该点在放大后的图片中的坐标就应该是(x*scale,y*scale),scale是图片的放大倍数。只要在显示时使小图中的该点与大图中的重合,我们就可以在这个效果中实现无论鼠标指到哪里,显示的放大图像都以鼠标所指像素点为中心了。很显然,此时大图相对影片区域的坐标为:

(x1=x*(scale-1),y1=y*(scale-1))

  好了,关键算法出来了,第二点目标就很容易实现了,我们只要在影片播放时改变变量scale就行了。


来源:http://www.tulaoshi.com/n/20160129/1490777.html

延伸阅读
标签: Web开发
head     titleCSS Fisheye/title     style type="text/css"     span {font-size: x-small}     /style     script language="JavaScript" type="text/javascript"     !--       function convertPreBlocks() {} var ...
标签: flash教程
一、原文件下载 二、建立四个层,如下图所示 详细说明:在该教程中,要想通过下面的AS语句实现预览中的效果,需要设置四处坐标为(0,0)。 图1 [next] (1)分别设置圆、四倍图像在本元件(mask,large)中的X、Y坐标为(0,0)。如图:  [next] (2)将大小两个图片在场景上的位置坐标设定为(0,0),如图: [next] 三...
标签: PS PS基础
最终效果 1、新建一个1000 * 700像素,分辨率为72的画布,背景填充黄褐色:#C1AE84。 新建一个组,先来制作玻璃镜框部分。在组里新建一个图层,按Ctrl + R 调出标尺,在左侧位置拉两条相交的参照线。然后以参照线的焦点为圆心,用椭圆选框工具,按住Alt + Shift拉出下图所示的正圆选区。 2、用油漆桶把选区填充任意颜色,取消选区后效...
标签: 浏览器
360图片放大镜怎么开?   首先,我们需要保证360浏览器版本为7.1以上,开启360浏览器之后同时按住Ctrl+Shift+A就可以关闭或者开启哦。

经验教程

822

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部