次のような画像拡大アプリケーションを作成したいと思います。小さな画像のマウス X と Y に対応する大きな画像領域を示すマスクされた小さなウィンドウ。次のような多くの拡大画像アプリケーションの例がオンラインにあります。
http://www.flashandmath.com/intermediate/magglass/mag_glass.html
しかし、ここではマウスとマスクが同じ X と Y で移動します。私が望むのは、マスクされたウィンドウが、小さい画像のマウス X と Y に対応する特定の領域のみを表示することです。
どんな助けでも大歓迎です。ありがとう。
私は昨年、まさにあなたが探しているもののレシピを書きました. リファクタリングされているか、可能な限り効率的であるかは保証しませんが、本当にうまく機能します。好きなだけ変えてください。誰でも自由に使えるようにコードを投稿します。
ただし、写真とルーペのアセットは、事前の申請なしに使用することは許可しません。
このクラスを使用すると、必要に応じて実行時であっても、独自の拡大強度を変更できます。独自のルーペ グラフィックを使用できますが、ソース ファイルにも 1 つ含まれています (プロジェクトで使用する場合は、まず私に問い合わせてください)。
説明：
拡大鏡: 画像アセット用のカスタマイズ可能な拡大鏡の作成
次のコードは、Magnifier クラスを使用して画像アセット用のカスタマイズ可能な拡大鏡を作成するためのソリューションを示しています。
Magnifier コンストラクターは 6 つのパラメーターを受け取ります。最初の loupeDisplayObject:DisplayObject 必須パラメーターは、仮想ルーペとして使用される表示オブジェクトへの参照です。クラスが適切に機能するためには、loupeDisplayObject:DisplayObject の中心に円形または楕円形のボイドまたはアルファ透明度が含まれている必要があります。
2 番目の imageURL:String 必須パラメーターは、URLLoader のロード関数の URLRequest にターゲット画像アセットの URL を提供します。画像は、thumbSprite:Sprite オブジェクトとmaggingSprite:Sprite オブジェクトの両方に BitmapData を提供します。これらは、3 番目の thumbScale:Number と 4 番目の scalingScale:Number オプション パラメーターを使用してスケーリングされます。ThumbSprite:Sprite のスケールはステージ上に表示されますが、maggingSprite:Sprite のスケールは拡大中に表示されます。
Magnifier クラスは、マウス イベントを使用して、画像アセット上の仮想ルーペの可視性を切り替えることによって動作します。拡大スプライト:スプライトをマスクするために、下にインデックスが付けられ、loupeDisplayObject:DisplayObject のサイズに基づいた maskSprite:Sprite 楕円が作成されます。ただし、5 番目の maskWidth:Number および 6 番目の maskHeight:Number オプション パラメータを設定して、複雑な形状の loupeDisplayObject:DisplayObject により適した maskSprite:Sprite のサイズを手動で設定できます。
無効化の前に Magnifier インスタンスの public deallocate() 関数を呼び出すと、ガベージ コレクションの対象としてマークされます。
クラスファイル:
package
{
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.ui.Mouse;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Regular;
public class Magnifier extends Sprite
{
//Class Variables
private var loupeDisplayObject:DisplayObject;
private var imageWidth:Number;
private var imageHeight:Number;
private var thumbScale:Number;
private var magnificationScale:Number;
private var maskWidth:Number;
private var maskHeight:Number;
private var imageBitmapData:BitmapData;
private var maskSprite:Sprite;
private var magnificationSprite:Sprite;
private var thumbSprite:Sprite;
private var loupeTween:Tween;
private var magnificationTween:Tween;
//Constructor
public function Magnifier (
loupeDisplayObject:DisplayObject,
imageURL:String,
thumbScale:Number = 0.5,
magnificationScale:Number = 1.0,
maskWidth:Number = NaN,
maskHeight:Number = NaN
)
{
this.loupeDisplayObject = loupeDisplayObject;
this.thumbScale = Math.max(0.1, Math.min(thumbScale, 1.0));
this.magnificationScale = Math.max(0.1, magnificationScale);
this.maskWidth = maskWidth;
this.maskHeight = maskHeight;
init(imageURL);
}
//Load And Handle Image
private function init(imageURL:String):void
{
var imageLoader:Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageHandler);
imageLoader.load(new URLRequest(imageURL));
}
private function errorHandler(evt:IOErrorEvent):void
{
throw(evt.text);
}
private function imageHandler(evt:Event):void
{
evt.target.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
evt.target.removeEventListener(Event.COMPLETE, imageHandler);
imageWidth = evt.target.content.width;
imageHeight = evt.target.content.height;
imageBitmapData = new BitmapData(imageWidth, imageHeight);
imageBitmapData.draw(evt.target.content);
createComponents();
}
//Create Components
private function createComponents():void
{
//Loupe Visibility
loupeDisplayObject.alpha = 0;
//Mask
if (isNaN(maskWidth)) maskWidth = loupeDisplayObject.width;
if (isNaN(maskHeight)) maskHeight = loupeDisplayObject.height;
maskSprite = new Sprite();
maskSprite.graphics.beginFill(0x00FF00, 0.5);
maskSprite.graphics.drawEllipse(0, 0, maskWidth, maskHeight);
maskSprite.graphics.endFill();
maskSprite.mouseEnabled = false;
//Magnification
magnificationSprite = scaleImage(new Matrix(magnificationScale, 0, 0, magnificationScale));
magnificationSprite.mouseEnabled = false;
magnificationSprite.alpha = 0;
magnificationSprite.mask = maskSprite;
//Thumb
thumbSprite = scaleImage(new Matrix(thumbScale, 0, 0, thumbScale));
thumbSprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
//Add Components To The Display List
addChild(thumbSprite);
addChild(magnificationSprite);
addChild(maskSprite);
addChild(loupeDisplayObject);
}
private function scaleImage(matrix:Matrix):Sprite
{
var scaledResult:Sprite = new Sprite();
scaledResult.graphics.beginBitmapFill(imageBitmapData, matrix, false, true);
scaledResult.graphics.drawRect(0, 0, imageWidth * matrix.a, imageHeight * matrix.d);
scaledResult.graphics.endFill();
return scaledResult;
}
//Mouse Event Handlers
private function mouseDownHandler(evt:MouseEvent):void
{
thumbSprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
thumbSprite.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mouseMoveHandler(evt);
setLoupeAsVisible(true);
}
private function mouseMoveHandler(evt:MouseEvent):void
{
loupeDisplayObject.x = evt.localX - loupeDisplayObject.width / 2;
loupeDisplayObject.y = evt.localY - loupeDisplayObject.height / 2;
maskSprite.x = evt.localX - maskSprite.width / 2;
maskSprite.y = evt.localY - maskSprite.height / 2;
magnificationSprite.x = 0 - evt.localX / thumbSprite.width * (magnificationSprite.width - thumbSprite.width);
magnificationSprite.y = 0 - evt.localY / thumbSprite.height * (magnificationSprite.height - thumbSprite.height);
}
private function mouseOutHandler(evt:MouseEvent):void
{
thumbSprite.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
setLoupeAsVisible(false);
}
private function mouseOverHandler(evt:MouseEvent):void
{
thumbSprite.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
setLoupeAsVisible(true);
}
private function mouseUpHandler(evt:MouseEvent):void
{
if (thumbSprite.hasEventListener(MouseEvent.MOUSE_OVER)) thumbSprite.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
thumbSprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
thumbSprite.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
setLoupeAsVisible(false);
}
//Loupe Tween And Visibility
private function setLoupeAsVisible(response:Boolean):void
{
var targetAlpha:Number;
if (response)
{
targetAlpha = 1.0;
Mouse.hide();
}
else
{
targetAlpha = 0.0;
Mouse.show();
}
loupeTween = new Tween(loupeDisplayObject, "alpha", Regular.easeIn, loupeDisplayObject.alpha, targetAlpha, 0.25, true);
magnificationTween = new Tween(magnificationSprite, "alpha", Regular.easeIn, magnificationSprite.alpha, targetAlpha, 0.25, true);
}
//Clean Up
public function deallocate():void
{
thumbSprite.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
}
}