joost_rtc
03-16-2009, 12:57 PM
Hi All,
On a canvas I have both predefined images (these already exist on the canvas) and no-predefined images (these exist in an other container).
The no-predefined images can be drag-and-dropped on the canvas. Both type of images can be moved witin the canvas to a new position.
So far so good.
My problem:
As I want to scale the images I have defined bindable variables for width and height.
The predefined images are scalable indeed by changing the values for lCalculatedWidthPosition en lCalculatedHeightPosition.
Those images which are dropped on the canvas are just created with the correct scale, however changing the variables does not make them to be rescaled on the canvas. When they are moved, and so they're dropped again their scaling is correct due to the drophandler.
How can I change the actionscript so that the .width and .height property refer to the variables rahter then to their values?
Brgds, Joost
This mxml creates the pre-defined images:
<mx:Image source="Assets/image.png" alpha="0.2"
x="{sldrOffset.value}" y="{sldrOffset.value}"
width="{lCalculatedWidthPosition}"
height="{lCalculatedHeightPosition}"
dragEnter="dragEnterHandler(event);"
dragOver="dragOverHandler(event);"
dragDrop="dragDropHandler(event);"/>
Code of the drophandler which drops the images on the canvas:
ActionScript:
private function dragDropHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img")) {
var draggedImage:Image =
event.dragSource.dataForFormat('img') as Image;
var dropCanvas:Canvas = event.currentTarget as Canvas;
// Since this is a copy, create a new object to
// add to the drop target.
var newImage:Image=new Image();
newImage.source = draggedImage.source;
newImage.x = (int(dropCanvas.mouseX/120)*120)+50;
newImage.y = (int(dropCanvas.mouseY/120)*120)+50;
newImage.width=lCalculatedWidthPosition;
newImage.height=lCalculatedHeightPosition;
newImage.alpha=0.8;
newImage.addEventListener(MouseEvent.MOUSE_MOVE, mouseOverHandler, false, 0, true);
newImage.addEventListener(DragEvent.DRAG_COMPLETE, dragCompleteHandler, false, 0, true);
dropCanvas.addChild(newImage);
}
}
On a canvas I have both predefined images (these already exist on the canvas) and no-predefined images (these exist in an other container).
The no-predefined images can be drag-and-dropped on the canvas. Both type of images can be moved witin the canvas to a new position.
So far so good.
My problem:
As I want to scale the images I have defined bindable variables for width and height.
The predefined images are scalable indeed by changing the values for lCalculatedWidthPosition en lCalculatedHeightPosition.
Those images which are dropped on the canvas are just created with the correct scale, however changing the variables does not make them to be rescaled on the canvas. When they are moved, and so they're dropped again their scaling is correct due to the drophandler.
How can I change the actionscript so that the .width and .height property refer to the variables rahter then to their values?
Brgds, Joost
This mxml creates the pre-defined images:
<mx:Image source="Assets/image.png" alpha="0.2"
x="{sldrOffset.value}" y="{sldrOffset.value}"
width="{lCalculatedWidthPosition}"
height="{lCalculatedHeightPosition}"
dragEnter="dragEnterHandler(event);"
dragOver="dragOverHandler(event);"
dragDrop="dragDropHandler(event);"/>
Code of the drophandler which drops the images on the canvas:
ActionScript:
private function dragDropHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img")) {
var draggedImage:Image =
event.dragSource.dataForFormat('img') as Image;
var dropCanvas:Canvas = event.currentTarget as Canvas;
// Since this is a copy, create a new object to
// add to the drop target.
var newImage:Image=new Image();
newImage.source = draggedImage.source;
newImage.x = (int(dropCanvas.mouseX/120)*120)+50;
newImage.y = (int(dropCanvas.mouseY/120)*120)+50;
newImage.width=lCalculatedWidthPosition;
newImage.height=lCalculatedHeightPosition;
newImage.alpha=0.8;
newImage.addEventListener(MouseEvent.MOUSE_MOVE, mouseOverHandler, false, 0, true);
newImage.addEventListener(DragEvent.DRAG_COMPLETE, dragCompleteHandler, false, 0, true);
dropCanvas.addChild(newImage);
}
}