-
1. Re: How do I scale a rectangle
kglad Sep 10, 2013 6:34 AM (in response to dazzfazz)you can use the following function to change your reg point. ie, when a corner is clicked change the rectangle's reg point to that corner and then adjust the rectangle's scaleX and scaleY properties.
function changeRegPtF(dobj:DisplayObjectContainer,x:Number,y:Number):void {
var r:Rectangle = dobj.getRect(dobj);
for (var i:int=0; i<dobj.numChildren; i++) {
dobj.getChildAt(i).x-=r.x+x;
dobj.getChildAt(i).y-=r.y+y;
}
dobj.x+=r.x+x;
dobj.y+=r.y+y;
}
-
2. Re: How do I scale a rectangle
dazzfazz Sep 10, 2013 7:29 AM (in response to kglad)Hi kglad,
Sorry to ask as Im very new to Flash, do you have a more detailed example?
Thanks
-
3. Re: How do I scale a rectangle
kglad Sep 10, 2013 7:51 AM (in response to dazzfazz)i don't have a more detailed example in my resource files. i could create that but 90% of the work i've already done and posted in the changeRegPtF function.
-
4. Re: How do I scale a rectangle
Andrei1 Sep 14, 2013 9:54 AM (in response to dazzfazz)Here is an adaptation of an old code I found in my libraries that does similar things.
There are both timeline and class variations.
Read comments.
Timeline:
import flash.display.Graphics; import flash.display.GraphicsPathWinding; import flash.display.MovieClip; import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; // rectangle container var container:Sprite; // rectangle visual var rectangle:Shape; /** * rectangle Graphicts * @see updateRectangle() */ var rectGraphics:Graphics; // rectanlge aspect ratio as width / height var ratio:Number = 2 / 3; // handle that is currently dragged var currentHandle:MovieClip; // collection of handles var handles:Vector.<MovieClip>; /** * commands for rectangle drawing * @see updateRectangle() */ var commands:Vector.<int>; /** * coordinates for rectangle drawing * @see updateRectangle() */ var coord:Vector.<Number>; // flags whether ractangle aspect ratio must be preserved var preserveRatio:Boolean = true; /** * used for rectangle width calculations * @see invalidateToRatio() */ var rw:Number = 0; /** * used for rectangle height calculations * @see invalidateToRatio() */ var rh:Number = 0; init(); function init():void { commands = new Vector.<int>(); commands.push(1, 2, 2, 2, 2); coord = new Vector.<Number>(); drawRect(); } function drawRect():void { initContainer() initRect(); container.addChild(rectangle); var initWidth:Number = 100; var initHeight:Number = 150; ratio = initWidth / initHeight; drawHandles(); handles[1].x = initWidth; handles[2].x = initWidth; handles[2].y = initHeight; handles[3].y = initHeight; updateRectangle(); } function initContainer():void { container = new Sprite(); container.x = container.y = 100; addChild(container); } function initRect():void { rectangle = new Shape(); rectGraphics = rectangle.graphics; } /** * Populates hadles collection. */ function drawHandles():void { handles = new Vector.<MovieClip>(); for (var i:int = 0; i < 4; i++) { var h:MovieClip = handle; h.index = i; container.addChild(h); handles.push(h); } } /** * Draws individual handle. */ function get handle():MovieClip { var h:MovieClip = new MovieClip(); h.graphics.beginFill(0xffffff * Math.random()); h.graphics.drawRect(-5, -5, 10, 10); h.graphics.endFill(); h.buttonMode = true; h.useHandCursor = true; h.addEventListener(MouseEvent.MOUSE_DOWN, onHandleDown); return h; } function onHandleDown(e:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_UP, onHandleUp); stage.addEventListener(MouseEvent.MOUSE_MOVE, onHandleMove); currentHandle = MovieClip(e.currentTarget); } function onHandleMove(e:MouseEvent):void { /** * place current handle to mouse position - * may be recalculated later due to ratio */ currentHandle.x = container.mouseX; currentHandle.y = container.mouseY; switch (currentHandle.index) { case 0: if (preserveRatio) invalidateToRatio(2, 0, 2, 0, 2, 2, -1, -1); placeDependentHandles(3, 1); break; case 1: if (preserveRatio) invalidateToRatio(1, 0, 2, 1, 0, 2, 1, -1); placeDependentHandles(2, 0); break; case 2: if (preserveRatio) invalidateToRatio(2, 0, 2, 0, 0, 0, 1, 1); placeDependentHandles(1, 3); break; case 3: if (preserveRatio) invalidateToRatio(3, 2, 3, 2, 0, 0, -1, -1); placeDependentHandles(0, 2); break; } updateRectangle(); e.updateAfterEvent(); } /** * Places dependent handles relative to current handle position. * @param ix index of handle that must bo positioned to the current handle x * @param iy index of handle that must bo positioned to the current handle y */ function placeDependentHandles(ix:int, iy:int):void { handles[ix].x = currentHandle.x; handles[iy].y = currentHandle.y; } /** * Calculates hadles positions based on rectangle aspect ratio. * * @param wi1 index of handle which x position is used as largests to claculate current width * @param wi2 index of handle which x position is used as smalles to claculate current width * @param hi1 index of handle which y position is used as largests to claculate current height * @param hi2 index of handle which y position is used as smalles to claculate current height * @param xi index of handle which x position is used as base for adding adjusted width * @param yi index of handle which y position is used as base for adding adjusted height * @param wm mutliplier used to add or subtract width * @param hm mutliplier used to add or subtract height */ function invalidateToRatio(wi1:int, wi2:int, hi1:int, hi2:int, xi:int, yi:int, wm:int, hm:int):void { rw = handles[wi1].x - handles[wi2].x; rh = handles[hi1].y - handles[hi2].y; // reltionships of current ratio to actual ratio defines current handle x/y position calculations rw / rh >= ratio ? currentHandle.x = handles[xi].x + wm * rh * ratio : currentHandle.y = handles[yi].y + hm * rw / ratio; } /** * Rerdraws rectangle based on handles positions. */ function updateRectangle():void { for (var i:int = 0; i < 4; i++) { coord[i + i] = handles[i].x; coord[i + i + 1] = handles[i].y; } coord[8] = handles[0].x; coord[9] = handles[0].y; rectGraphics.clear(); rectGraphics.lineStyle(1); rectGraphics.drawPath(commands, coord, GraphicsPathWinding.NON_ZERO); } function onHandleUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, onHandleUp); stage.removeEventListener(MouseEvent.MOUSE_MOVE, onHandleMove); }As Class:
package { import flash.display.Graphics; import flash.display.GraphicsPathWinding; import flash.display.MovieClip; import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; public class DynamicRectangle extends Sprite { // rectangle container private var container:Sprite; // rectangle visual private var rectangle:Shape; /** * rectangle Graphicts * @see updateRectangle() */ private var rectGraphics:Graphics; // rectanlge aspect ratio as width / height private var ratio:Number = 2 / 3; // handle that is currently dragged private var currentHandle:MovieClip; // collection of handles private var handles:Vector.<MovieClip>; /** * commands for rectangle drawing * @see updateRectangle() */ private var commands:Vector.<int>; /** * coordinates for rectangle drawing * @see updateRectangle() */ private var coord:Vector.<Number>; // flags whether ractangle aspect ratio must be preserved private var preserveRatio:Boolean = true; /** * used for rectangle width calculations * @see invalidateToRatio() */ private var rw:Number = 0; /** * used for rectangle height calculations * @see invalidateToRatio() */ private var rh:Number = 0; public function DynamicRectangle() { init(); } private function init():void { commands = new Vector.<int>(); commands.push(1, 2, 2, 2, 2); coord = new Vector.<Number>(); drawRect(); } private function drawRect():void { initContainer() initRect(); container.addChild(rectangle); var initWidth:Number = 100; var initHeight:Number = 150; ratio = initWidth / initHeight; drawHandles(); handles[1].x = initWidth; handles[2].x = initWidth; handles[2].y = initHeight; handles[3].y = initHeight; updateRectangle(); } private function initContainer():void { container = new Sprite(); container.x = container.y = 100; addChild(container); } private function initRect():void { rectangle = new Shape(); rectGraphics = rectangle.graphics; } /** * Populates hadles collection. */ private function drawHandles():void { handles = new Vector.<MovieClip>(); for (var i:int = 0; i < 4; i++) { var h:MovieClip = handle; h.index = i; container.addChild(h); handles.push(h); } } /** * Draws individual handle. */ private function get handle():MovieClip { var h:MovieClip = new MovieClip(); h.graphics.beginFill(0xffffff * Math.random()); h.graphics.drawRect(-5, -5, 10, 10); h.graphics.endFill(); h.buttonMode = true; h.useHandCursor = true; h.addEventListener(MouseEvent.MOUSE_DOWN, onHandleDown); return h; } private function onHandleDown(e:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_UP, onHandleUp); stage.addEventListener(MouseEvent.MOUSE_MOVE, onHandleMove); currentHandle = MovieClip(e.currentTarget); } private function onHandleMove(e:MouseEvent):void { /** * place current handle to mouse position - * may be recalculated later due to ratio */ currentHandle.x = container.mouseX; currentHandle.y = container.mouseY; switch (currentHandle.index) { case 0: if (preserveRatio) invalidateToRatio(2, 0, 2, 0, 2, 2, -1, -1); placeDependentHandles(3, 1); break; case 1: if (preserveRatio) invalidateToRatio(1, 0, 2, 1, 0, 2, 1, -1); placeDependentHandles(2, 0); break; case 2: if (preserveRatio) invalidateToRatio(2, 0, 2, 0, 0, 0, 1, 1); placeDependentHandles(1, 3); break; case 3: if (preserveRatio) invalidateToRatio(3, 2, 3, 2, 0, 0, -1, -1); placeDependentHandles(0, 2); break; } updateRectangle(); e.updateAfterEvent(); } /** * Places dependent handles relative to current handle position. * @param ix index of handle that must bo positioned to the current handle x * @param iy index of handle that must bo positioned to the current handle y */ private function placeDependentHandles(ix:int, iy:int):void { handles[ix].x = currentHandle.x; handles[iy].y = currentHandle.y; } /** * Calculates hadles positions based on rectangle aspect ratio. * * @param wi1 index of handle which x position is used as largests to claculate current width * @param wi2 index of handle which x position is used as smalles to claculate current width * @param hi1 index of handle which y position is used as largests to claculate current height * @param hi2 index of handle which y position is used as smalles to claculate current height * @param xi index of handle which x position is used as base for adding adjusted width * @param yi index of handle which y position is used as base for adding adjusted height * @param wm mutliplier used to add or subtract width * @param hm mutliplier used to add or subtract height */ private function invalidateToRatio(wi1:int, wi2:int, hi1:int, hi2:int, xi:int, yi:int, wm:int, hm:int):void { rw = handles[wi1].x - handles[wi2].x; rh = handles[hi1].y - handles[hi2].y; // reltionships of current ratio to actual ratio defines current handle x/y position calculations rw / rh >= ratio ? currentHandle.x = handles[xi].x + wm * rh * ratio : currentHandle.y = handles[yi].y + hm * rw / ratio; } /** * Rerdraws rectangle based on handles positions. */ private function updateRectangle():void { for (var i:int = 0; i < 4; i++) { coord[i + i] = handles[i].x; coord[i + i + 1] = handles[i].y; } coord[8] = handles[0].x; coord[9] = handles[0].y; rectGraphics.clear(); rectGraphics.lineStyle(1); rectGraphics.drawPath(commands, coord, GraphicsPathWinding.NON_ZERO); } private function onHandleUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, onHandleUp); stage.removeEventListener(MouseEvent.MOUSE_MOVE, onHandleMove); } } } -
5. Re: How do I scale a rectangle
dazzfazz Sep 16, 2013 3:34 AM (in response to Andrei1)Hi Andrei1,
Thats exactly what I was looking for. Thank you
And thank you Kglad for your help too.
-
6. Re: How do I scale a rectangle
kglad Sep 16, 2013 6:32 AM (in response to dazzfazz)you're welcome.




