RE: [flexcoders] Drawing in a Scrollable Canvas
I'm new to Flash 9/Flex AS3, but I know that in previous version of the
Flash player and actionscript, the draw API would draw directly on the
screen - in the indicated movieclip/sprite, so you would likely need to
instead draw into a sprite container and move than with the panels
instead of drawing directly on the canvas. My best guess anyway.
Jason Merrill
Bank of America
Global Technology Operations, Learning Leadership Development
eTools Multimedia Team
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Mike Cantrell
Sent: Wednesday, March 07, 2007 2:07 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Drawing in a Scrollable Canvas
I'm attempting to make an Organization Chart component for Flex.
In short, I have a canvas which contains child panels These child panels
represent a position in the organization. I'm drawing lines (on the
canvas) between the panels to represent their relationship to each
other.
Everything works great until I scroll the canvas. The lines are
not drawn in relationship to their position in the canvas, but stay were
they are in relation to the screen. For example, if I scroll down, the
panels move up as they should, but the lines stay where they are which
breaks the connections. I'd like to have them scroll upwards like the
panels do.
Due to my lack of experience with flash (and any graphics
programming for that matter), I may be ramming a square peg in a round
hole. Here's the panel code which recursively draws its lines to its
child panels:
public function
drawLinesToChildren(canvas:HierarchyCanvas):void {
var startPoint:Point = new Point(x + (width /
2), y + height); // adjust to bottom/center of the parent panel
for (var i:int = 0; i children.length; i++) {
var child:HierarchyPanel = children[i];
var endPoint:Point = new Point(child.x,
child.y);
! nbsp; endPoint = new Point(endPoint.x +
(child.width / 2), endPoint.y); // adjust top/center of the child panel
canvas.graphics.moveTo(startPoint.x,
startPoint.y);
canvas.graphics.lineTo(endPoint.x,
endPoint.y);
child.drawLinesToChildren(canvas);
}
}
If anyone could offer any suggestions, I'd be very grateful.
RE: [flexcoders] Drawing in a Scrollable Canvas
I know that in previous version of the Flash player and actionscript,
the draw API would draw directly on the screen
Actually, the Flash Player has never drawn directly on the screen. The
vector graphics of each Sprite get rasterized into pixels (not
immediately when you call a drawing API like lineTo() but sometime later
when the current frame is rendered), the pixels from the various
Sprites are composited together offscreen, and then the resulting
composite pixels are blitted to the screen.
If you are drawwing into a scrollable Canvas, you probably need to
adjust your coordinates by horizontalScrollPosition and
verticalScrollPosition. But I haven't tried it to make sure this fixes
the problem.
- Gordon
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Merrill, Jason
Sent: Wednesday, March 07, 2007 11:12 AM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Drawing in a Scrollable Canvas
I'm new to Flash 9/Flex AS3, but I know that in previous version of the
Flash player and actionscript, the draw API would draw directly on the
screen - in the indicated movieclip/sprite, so you would likely need to
instead draw into a sprite container and move than with the panels
instead of drawing directly on the canvas. My best guess anyway.
Jason Merrill
Bank of America
Global Technology Operations, Learning Leadership Development
eTools Multimedia Team
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Mike Cantrell
Sent: Wednesday, March 07, 2007 2:07 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Drawing in a Scrollable Canvas
I'm attempting to make an Organization Chart component for Flex.
In short, I have a canvas which contains child panels These child panels
represent a position in the organization. I'm drawing lines (on the
canvas) between the panels to represent their relationship to each
other.
Everything works great until I scroll the canvas. The lines are
not drawn in relationship to their position in the canvas, but stay were
they are in relation to the screen. For example, if I scroll down, the
panels move up as they should, but the lines stay where they are which
breaks the connections. I'd like to have them scroll upwards like the
panels do.
Due to my lack of experience with flash (and any graphics
programming for that matter), I may be ramming a square peg in a round
hole. Here's the panel code which recursively draws its lines to its
child panels:
public function
drawLinesToChildren(canvas:HierarchyCanvas):void {
var startPoint:Point = new Point(x + (width /
2), y + height); // adjust to bottom/center of the parent panel
for (var i:int = 0; i children.length; i++) {
var child:HierarchyPanel = children[i];
var endPoint:Point = new Point(child.x,
child.y);
! nbsp; endPoint = new Point(endPoint.x +
(child.width / 2), endPoint.y); // adjust top/center of the child panel
canvas.graphics.moveTo(startPoint.x,
startPoint.y);
canvas.graphics.lineTo(endPoint.x,
endPoint.y);
child.drawLinesToChildren(canvas);
}
}
If anyone could offer any suggestions, I'd be very grateful.
RE: [flexcoders] Drawing in a Scrollable Canvas
Interesting - so why then is MovieClip.clear() necssary? I was always
confused when I drew on a movie clip, and then deleted the movie clip,
but the drawing was still on-screen, even after several frame events.
I'm not questioning you, you're Adobe, so you probably know what you're
talking about, but this has always puzzled me. I had been told the draw
API utilized the video card directly to draw on screen - whatever that
means.
Jason Merrill
Bank of America
Global Technology Operations, Learning Leadership Development
eTools Multimedia Team
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Gordon Smith
Sent: Wednesday, March 07, 2007 2:27 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Drawing in a Scrollable Canvas
I know that in previous version of the Flash player and
actionscript, the draw API would draw directly on the screen
Actually, the Flash Player has never drawn directly on the
screen. The vector graphics of each Sprite get rasterized into pixels
(not immediately when you call a drawing API like lineTo() but sometime
later when the current frame is rendered), the pixels from the various
Sprites are composited together offscreen, and then the resulting
composite pixels are blitted to the screen.
If you are drawwing into a scrollable Canvas, you probably need
to adjust your coordinates by horizontalScrollPosition and
verticalScrollPosition. But I haven't tried it to make sure this fixes
the problem.
- Gordon
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Merrill, Jason
Sent: Wednesday, March 07, 2007 11:12 AM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Drawing in a Scrollable Canvas
I'm new to Flash 9/Flex AS3, but I know that in previous version
of the Flash player and actionscript, the draw API would draw directly
on the screen - in the indicated movieclip/sprite, so you would likely
need to instead draw into a sprite container and move than with the
panels instead of drawing directly on the canvas. My best guess anyway.
Jason Merrill
Bank of America
Global Technology Operations, Learning Leadership
Development
eTools Multimedia Team
From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Mike Cantrell
Sent: Wednesday, March 07, 2007 2:07 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Drawing in a Scrollable Canvas
I'm attempting to make an Organization Chart component
for Flex. In short, I have a canvas which contains child panels These
child panels represent a position in the organization. I'm drawing
lines (on the canvas) between the panels to represent their relationship
to each other.
Everything works great until I scroll the canvas. The
lines are not drawn in relationship to their position in the canvas, but
stay were they are in relation to the screen. For example, if I scroll
down, the panels move up as they should, but the lines stay where they
are which breaks the connections. I'd like to have them scroll upwards
like the panels do.
Due to my lack of experience with flash (and any
graphics programming for that matter), I may be ramming a square peg in
a round hole. Here's the panel code which recursively draws its lines to
its child panels:
public function
drawLinesToChildren(canvas:HierarchyCanvas):void {
var startPoint:Point = new Point(x +
(width / 2), y + height); // adjust to bottom/center of the parent
panel
for (var i:int = 0; i children.length;
i++) {
var child:HierarchyPanel =
children[i];
var endPoint:Point = new
Point(child.x, child.y);
! nbsp; endPoint = new
Point(endPoint.x + (child.width / 2), endPoint.y); // adjust top/center
of the child panel
canvas.graphics.moveTo(startPoint.x,
startPoint.y);
canvas.graphics.lineTo(endPoint.x,
endPoint.y);
child.drawLinesToChildren(canvas);
}
}
If anyone could offer any suggestions, I'd be very
grateful.
