三人行设计数字投影餐厅|5D全息宴会厅|沉浸式KTV|全息婚礼...经典设计就在博视界科技!

该效果是用as纯代码实现放大镜效果,见文章底部flash演示…

设计思路:加载外部素材-创建小图片-绘制小圆形-将小图片遮罩范围设置为该圆形-通过函数迫使大图和小图一一对应

调用外部的图片素材,利用代码生成小图,两张图片叠加,绘制放大镜大小的圆形,设置为遮罩,并跟随鼠标移动….

代码参考:

package
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.MouseEvent;
public class Main extends Sprite
{
private var picbitmap:BitmapData;
private var mybitmap:Bitmap;
public function Main():void
{
init();
}
private function init():void
{
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadok);   //侦听是否加载完成
var url:URLRequest = new URLRequest(“a.jpg”);
loader.load(url);
}
//加载外部素材图片;
private function loadok(evt:Event):void
{
picbitmap = evt.target.content.bitmapData;
var a:Bitmap = new Bitmap(picbitmap);
a.width = 400;
a.height = 300;
addChild(a);//创建并显示小图片

var tu:Sprite=new Sprite();//绘制小圆
tu.graphics.beginFill(0x000000);
tu.graphics.drawCircle(0,0,50);
tu.graphics.endFill();
tu.startDrag(true);
addChild(tu);

mybitmap = new Bitmap(picbitmap);//创建遮罩
mybitmap.mask = tu;
addChild(mybitmap);
stage.addEventListener(MouseEvent.MOUSE_MOVE,onmove);
}
function onmove(evt:MouseEvent):void
{
mybitmap.x=(mybitmap.width-400)*(stage.mouseX/300)*-1;//通过公式使大小图一一对应
mybitmap.y=(mybitmap.height-400)*(stage.mouseY/300)*-1;
}
}
}