代码之家  ›  专栏  ›  技术社区  ›  Carlo

基于鼠标位置缩放对象

  •  2
  • Carlo  · 技术社区  · 15 年前

    我有一个大的精灵,我想放大和缩小鼠标位置作为轴心点,确切地说,当你转动鼠标滚轮时,谷歌地图或Photoshop缩放是如何工作的。

    为了实现scalex和scaley属性之间的缩放效果,但固定点是(0,0),而我需要鼠标位置(当然,每次都会改变)。

    我怎么能换这个?

    谢谢。

    3 回复  |  直到 9 年前
        1
  •  2
  •   ChrisF    15 年前

    我只是做了一个 Google search 对于“缩放任意点”(减去引号),第一个结果看起来很有希望。

    您必须将原始偏移量从比例中取出,然后在新比例中重新应用它。我自己也做过,但现在还没有代码,所以我会看看是否可以挖掘出来,稍后再发布。

    它的伪代码类似于这样(从内存中):

    float dir = UP ? 1 : -1;
    float oldXscale = Xscale;
    float oldYscale = Yscale;
    Xscale += dir * increment;
    Yscale += dir * increment;
    newX = (oldX - Xoffset) / Xscale;
    newY = (oldY - Yoffset) / Yscale;
    Xoffset += (newX * oldXscale) - (newX * Xscale);
    Yoffset += (newY * oldYscale) - (newY * Yscale);
    

    任何未声明的内容都是“全局”

        2
  •  2
  •   Carlo    15 年前

    通过在谷歌上搜索正确的单词… 这个链接解释了仿射变换 http://gasi.ch/blog/zooming-in-flash-flex/ 所以我可以在变换矩阵之间:

    var affineTransform:Matrix = board.transform.matrix;
    affineTransform.translate( -mouseX, -mouseY );
    affineTransform.scale( 0.8, 0.8 );
    affineTransform.translate( mouseX, mouseY );
    var originalMatrix:Matrix = board.transform.matrix;
    TweenLite.to(originalMatrix, 0.7, {a:affineTransform.a, b:affineTransform.b, c:affineTransform.c, d:affineTransform.d, tx:affineTransform.tx, ty:affineTransform.ty, onUpdate:applyMatrix, onUpdateParams:[originalMatrix]});
    

    -)

        3
  •  -1
  •   apscience    9 年前
    private static function onMouseWheel(event:MouseEvent):void {
        var zoomAmount:Number = 0.03;
    
        if (event.delta < 0)
            zoomAmount *= -1;
    
        var x:int = largeLargeSprite.mouseX;
        var y:int = largeLargeSprite.mouseY;
        largeLargeSprite.scaleX += zoomAmount;
        largeLargeSprite.scaleY += zoomAmount;
        largeLargeSprite.x -= x * zoomAmount;
        largeLargeSprite.y -= y * zoomAmount;
    }