mapping rect in small image to larger image (in order to do a copyPixels operation)

Posted by skinnyTOD on Stack Overflow See other posts from Stack Overflow or by skinnyTOD
Published on 2010-06-16T15:18:08Z Indexed on 2010/06/16 18:12 UTC
Read the original article Hit count: 164

Filed under:
|

Hi all - this is (I think) a relatively simple math question but I've spent a day banging my head against it and have only the dents and no solution...

I'm coding in actionscript 3 - the functionality is:

  1. large image loaded at runtime. The bitmapData is stored and a smaller version is created to display on the available screen area (I may end up just scaling the large image since it is in memory anyway).

  2. The user can create a rectangle hotspot on the smaller image (the functionality will be more complex: multiple rects with transparency: example a donut shape with hole, etc)

3 When the user clicks on the hotspot, the rect of the hotspot is mapped to the larger image and a new bitmap "callout" is created, using the larger bitmap data. The reason for this is so the "callout" will be better quality than just scaling up the area of the hotspot.

The image below shows where I am at so far- the blue rect is the clicked hotspot. In the upper left is the "callout" - copied from the larger image. I have the aspect ratio right but I am not mapping to the larger image correctly.

Ugly code below... Sorry this post is so long - I just figured I ought to provide as much info as possible. Thanks for any tips!

--trace of my data values

*source BitmapDada 1152 864

scaled to rect 800 600

scaled BitmapData 800 600

selection BitmapData 58 56

scaled selection 83 80

ratio 1.44

before (x=544, y=237, w=58, h=56)

(x=544, y=237, w=225.04, h=217.28) *

Image here: http://i795.photobucket.com/albums/yy237/skinnyTOD/exampleST.jpg

public function onExpandCallout(event:MouseEvent):void{
    if (maskBitmapData.getPixel32(event.localX, event.localY) != 0){
        var maskClone:BitmapData = maskBitmapData.clone();

        //amount to scale callout - this will vary/can be changed by user
        var  scale:Number =150 //scale percentage
        var normalizedScale :Number = scale/=100;

        var w:Number = maskBitmapData.width*normalizedScale;
        var h:Number = maskBitmapData.height*normalizedScale;

        var ratio:Number =  (sourceBD.width /targetRect.width);

        //creat bmpd of the scaled size to copy source into
       var scaledBitmapData:BitmapData = new BitmapData(maskBitmapData.width * ratio, maskBitmapData.height * ratio, true, 0xFFFFFFFF);

       trace("source BitmapDada " + sourceBD.width, sourceBD.height);
       trace("scaled to rect " + targetRect.width, targetRect.height);
       trace("scaled BitmapData", bkgnImageSprite.width, bkgnImageSprite.height);
       trace("selection BitmapData", maskBitmapData.width, maskBitmapData.height);
       trace("scaled selection", scaledBitmapData.width, scaledBitmapData.height);
       trace("ratio", ratio);

       var scaledBitmap:Bitmap = new Bitmap(scaledBitmapData);

       var scaleW:Number = sourceBD.width / scaledBitmapData.width;
       var scaleH:Number = sourceBD.height / scaledBitmapData.height;

       var scaleMatrix:Matrix = new Matrix();   
       scaleMatrix.scale(ratio,ratio);

       var sRect:Rectangle = maskSprite.getBounds(bkgnImageSprite);
       var sR:Rectangle = sRect.clone();
       var ss:Sprite = new Sprite();
       ss.graphics.lineStyle(8, 0x0000FF);
       //ss.graphics.beginFill(0x000000, 1);
       ss.graphics.drawRect(sRect.x, sRect.y, sRect.width, sRect.height);
       //ss.graphics.endFill();
       this.addChild(ss);

       trace("before " + sRect);

       w = uint(sRect.width * scaleW);
       h = uint(sRect.height  * scaleH);

       sRect.inflate(maskBitmapData.width * ratio, maskBitmapData.height * ratio);
       sRect.offset(maskBitmapData.width * ratio, maskBitmapData.height * ratio);

       trace(sRect);

       scaledBitmapData.copyPixels(sourceBD, sRect, new Point());
       addChild(scaledBitmap);
       scaledBitmap.x = offsetPt.x;
       scaledBitmap.y = offsetPt.y;
    }
}

© Stack Overflow or respective owner

Related posts about math

Related posts about actionscript