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.x;
coord[i + i + 1] = handles.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.x;
coord[i + i + 1] = handles.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);
}
}
}
1 Correct answer
6
Replies
AdChoices