1

クリックとダブルクリックのマウスイベントで、マスクされたマウスのパン画像をズームインおよびズームアウトしようとしています。画像をズームしましたが、クリックした場所ではなく、常に左端のレジストレーション ポイントがズームインされます。私はこれをコーディングする方法がまったくわからず、一日中インターネットでそれを理解しようとしましたが、うまくいきませんでした. 誰かがこれを理解するのを手伝ってくれることを願っています!

import com.greensock.*;//Greensock Tweening Platform.

//Variables
var percX:Number;
var percY:Number;
var destX:Number;
var destY:Number;

//Image panned and masked
this.mask = mask_mc;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mousemove);
function mousemove(e:MouseEvent) {
    if (mask_mc.hitTestPoint(stage.mouseX,stage.mouseY,false)) {
        if (imgLoader.width>mask_mc.width) {//Avoids Scrolling if image is under mask area width
            percX = mask_mc.mouseX/mask_mc.width;
        }
        if (imgLoader.height>mask_mc.height) {//Avoids Scrolling if image is under mask area height
            percY = mask_mc.mouseY/mask_mc.height;
        }
        destX = -(imgLoader.width-mask_mc.width)*percX;
        destY = -(imgLoader.height-mask_mc.height)*percY;
        TweenMax.to(imgLoader,.5,{x:destX,y:destY});
    }
}
//Add listeners for the imgLoader movie clip.
imgLoader.doubleClickEnabled = true;  
imgLoader.addEventListener(MouseEvent.CLICK, increaseSize);
imgLoader.addEventListener(MouseEvent.DOUBLE_CLICK, decreaseSize);

//This function increases the scale of the image
function increaseSize(event:MouseEvent):void{
TweenLite.to(imgLoader, 1, {scaleX:2, scaleY:2});
}

//This function decreases the scale of the image
function decreaseSize(event:MouseEvent):void{
TweenLite.to(imgLoader, 1, {scaleX:1, scaleY:1});
}
4

3 に答える 3

2

この答えはhereから派生しています

この関数を追加します。

function scaleAroundMouse(objectToScale:DisplayObject, scaleAmount:Number, bounds:Rectangle = null, onComplete:Function = null):TweenLite {
    // scaling will be done relatively
    var relScaleX:Number = scaleAmount / objectToScale.scaleX;
    var relScaleY:Number = scaleAmount / objectToScale.scaleY;
    // map vector to centre point within parent scope

    var scalePoint:Point = objectToScale.localToGlobal( new Point(objectToScale.mouseX, objectToScale.mouseY));
    scalePoint = objectToScale.parent.globalToLocal( scalePoint );
    // current registered postion AB
    var AB:Point = new Point( objectToScale.x, objectToScale.y );
    // CB = AB - scalePoint, objectToScale vector that will scale as it runs from the centre
    var CB:Point = AB.subtract( scalePoint );
    CB.x *= relScaleX;
    CB.y *= relScaleY;
    // recaulate AB, objectToScale will be the adjusted position for the clip
    AB = scalePoint.add( CB );
    // set actual properties

    if(bounds){
     var limits:Rectangle = new Rectangle(
        bounds.x + (bounds.width - (objectToScale.width * relScaleX)),
        bounds.y + (bounds.height - (objectToScale.height * relScaleY)),
        (objectToScale.width * relScaleX) - bounds.width,
        (objectToScale.height * relScaleY) - bounds.height
     );

     if(AB.x < limits.x) AB.x = limits.x;
     if(AB.x > limits.x + limits.width) AB.x = limits.x + limits.width;
     if(AB.y < limits.y) AB.y = limits.y;
     if(AB.y > limits.y + limits.height) AB.y = limits.y + limits.height;       
    }

    return TweenLite.to(objectToScale,1,{onComplete: onComplete, scaleX: scaleAmount, scaleY: scaleAmount, x: AB.x, y: AB.y);
}

次に、サイジング関数を次のように更新します。

function increaseSize(event:MouseEvent):void{
    stopMouseMove();
    scaleAroundMouse(imgLoader, 2, null, resumeMouseMove);
}

function decreaseSize(event:MouseEvent):void{
    stopMouseMove();
    scaleAroundMouse(imgLoader, 1, null, resumeMouseMove);
}

function stopMouseMove():void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,mousemove);
}

function resumeMouseMove():void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE,mousemove);
}

関数に境界パラメーターも追加しました。これは、コンテンツの端がマスク内に表示されないようにする場合に便利です。したがって、マスクの境界を関数に渡すことで使用できる場合:

scaleAroundMouse(imgLoader, 1, myMask.getBounds(this));
于 2012-11-05T22:17:55.770 に答える
0 
var mat:Matrix=new Matrix();
mat.translate(-p.x,-p.y);
mat.scale(desiredScale,desiredScale);
mat.translate(p.x,p.y);
yourObject.transform.matrix=mat;

これは、約 1 か月前に投稿した質問から取得したものです。ここで見ることができます。私はその特定のスニペットを使用することにはなりませんでしたが (実際には、LondongDrugs_MediaServ が投稿したスクリプトの修正版を使用しました)、それは機能し、理解と実装がはるかに簡単になります。

于 2012-11-05T23:23:28.030 に答える
0

この例では、http: //graphics-geek.blogspot.com/2010/06/video-image-zoom-effect-in-flex-4.htmlで探しているズーム効果を実現するのに役立つズーム効果クラスを使用しています。

于 2012-11-05T23:04:41.360 に答える