Question

I have a sprite that holds a bitmap data.
I want to give the user the ability to resize the image with a slider.
I am using the code beneath, as you can see the problem is that the scaling is additive so very quickly the image is gone totally.

I understand that i have to scale it in non additive way, just can not figure out how?

I tried to pass :

var m:Matrix = userImageCopy.transform.matrix;

when userImageCopy holds the original image. that helped for the scaling but then, each time the scaling started the userImage jumped to the position of the userImageCopy.

Any help?

function onSliderChange(evt:Event):void
    {
        trace( evt.target.value);
        //this will create a point object at the center of the display object

        var ptRotationPoint:Point = new Point(userImage.x + userImage.width / 2,userImage.y + userImage.height / 2);
        //call the function and pass in the object to be rotated, the amount to scale X and Y (sx, sy), and the point object we created
        scaleFromCenter(userImage, evt.target.value, evt.target.value, ptRotationPoint);
    }

    private function scaleFromCenter(ob:*, sx:Number, sy:Number, ptScalePoint:Point)
    {
        var m:Matrix = userImage.transform.matrix;
        m.tx -=  ptScalePoint.x;
        m.ty -=  ptScalePoint.y;
        m.scale(sx, sy);
        m.tx += ptScalePoint.x;
        m.ty += ptScalePoint.y;
        ob.transform.matrix = m;
    }

Answer 1

Rather than combining your center values with the current tx and ty, just set them directly with the Matrix.translate method:

private function scaleFromCenter(ob:*, sx:Number, sy:Number, ptScalePoint:Point)
{
    var m:Matrix = new Matrix();
    m.translate(-ptScalePoint.x,-ptScalePoint.y);
    m.scale(sx, sy);
    m.translate(ptScalePoint.x,ptScalePoint.y);
    ob.transform.matrix = m;
}