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

A北神通讯

A北神通讯

2016-01-29 13:36

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

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

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)

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

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


(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)
展开更多 50%)
分享

猜你喜欢

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

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

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

flash教程
Flash放大镜效果深入改进(2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用FLASH制作放大镜效果全过程 (1)

FLASH flash教程
用FLASH制作放大镜效果全过程 (1)

WPS放大镜效果

电脑入门
WPS放大镜效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用FLASH制作放大镜效果全过程

flash教程
用FLASH制作放大镜效果全过程

用Flash制作动态放大镜画面效果 (1)

FLASH flash教程
用Flash制作动态放大镜画面效果 (1)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

正弦函数的绘制的一种方法

正弦函数的绘制的一种方法

《噬神者》R4难度 打荒神的心理战术

《噬神者》R4难度 打荒神的心理战术
下拉加载更多内容 ↓