Sprites inside canvas overlap canvas borders (scrollable canvas wanted)

[lantern]

Hi,

I've tried to search for similar cases around the forums but managed to find none. So, in short my task is to draw an audio waveform. The program is divided into the Flex-declared UI (which contains all the static interface elements such as buttons, etc.) and the program logic which is written in Actionscript 3. My current problem is that when I try to draw the waveform, it bleeds straight out the canvas borders in which it's drawn in, like this. (http://www.student.oulu.fi/~tuomasri/waveformexample.jpg) The preferred functionality is that the canvas becomes scrollable, if the waveform width exceeds the canvas width.

The lines inside the canvas are datatype of Sprite (would Shape be the best option in this case anyway?) and they are drawn in simple for-clauses for both channels, like this (forgive me for the slightly ugly code):

for(i=0; i<waveformWidth+140; i++)
{
lineHeight=random(0, waveformHeight);
line.graphics.moveTo(drawX, drawY);
line.graphics.lineTo(drawX, yBegin-lineHeight);
drawX++;
}


The example above produces the left (the upper channel) in the waveform. As you can see, the generated waveform is quite random, which is going to be fixed of course. The i<waveformWidth+140 part in the for-clause is just to test what happens when the waveform is drawn longer than the canvas.

The canvas is declared in mxml like this: <mx:Canvas id="wfc" horizontalScrollPolicy="on" alpha="1" clipContent="true" backgroundColor="0x104050" x="10" y="58" width="566" height="106"/> and the lines (Sprites) are added into the canvas in Actionscript like this: wfc.rawChildren.addChild(line);.

Could anyone help, this problem seems simple yet so frustrating at the same time.

[rawmantick]

First of all post Flex problems at Flex forum (I mean another sub-forum of as.org).

Second. If you work with rawChildren - forget the flex advantages. All the clippings are only applied to children added with addChild(), which has a lot of logics inside it. You throw all that logic away, by simply calling rawChildren.addChild(), which only adds the object to flash display list making no Flex routines.

Third. I should make subclass of UIComponent, to be able to add it to Flex containers. Simple draw on it and do all the things you need. But donb't forget to override measure() and updateDisplayList() methods to make the component's behavior good for flex. Cause if you just put your code into constructor - you'll get much Flex bug, and probably will think that the framework is stupid.

Since you use the framework, respect its rules and common workflows. Don't try to invent something yourself, it's already inside. Moreover if you want the simplicity of flash, why do you use Flex?

I can recommend "Creating and extending Flex 3 Components" book. It will tell how to do what you need correctly to be absolutely correct from the Flex point of view.