drawing on a canvas object

[tgf]

Hi there,

I have a question about the canvas object in flex 2.
I've created a canvas, and I'm placing gifs on it with the addChildren method. The user can drag the gifs around the canvas area, and if she moves them off the right edge or the bottom edge, scrollbars appear.

I want there to be lines connecting these gifs, so I'm currently drawing them using something like:

graphics.clear();
canvas1.graphics.lineStyle(1,0x000fff,0.3);

for each(var l:line in lines){
    canvas1.graphics.moveTo(l.x1, l.y1);
    canvas1.graphics.lineTo(l.x2, l.y2);
}

Now here's my problem:
Every time I move a gif off of the canvas (i.e. the scrollbars appear) the lines stay static on the screen. They don't respond to the movement of the view of the canvas at all.

Any ideas?

[nirth]

Well, there are 2 ways
1) redraw stuff on scroll events
2) make component from UIComponent (or any other container, but set it properties to show all content, and do not show scrollbars), do all drawing there, and add your component to canvas.

[sivakishore]

Hi,
I am on the same line with panels in canvas to be connected and the connection should stay when user drags the panel. Can any one help me out. plz

[arasgadl]

Hi.

I solve this problem, I put this function in application creationcomplete event and scroll canvas' event

private function dibujaMalla():void {

var despY:int=canvas1.verticalScrollPosition; //just up and down
//var desX:int=canvas1.horizontalScrollPosition; //not at the moment

canvas1.graphics.clear(); //clean any graphics in the canvas
canvas1.graphics.lineStyle(1,0x000fff,0.7);

//vertical lines
for (var y:int=5;y<ANCHO_CANVAS;y+=164) {//each 164 points a line

canvas1.graphics.moveTo(y,0);
canvas1.graphics.lineTo(y,ALTO_CANVAS);

}

//horizontal lines
var x:int=3; //first horizontal line
for (;x<ALTO_CANVAS;x+=40){//each 40 a horizontal line

if (x-despY>0) { //no before 0

canvas1.graphics.moveTo(0,x-despY);
canvas1.graphics.lineTo(ANCHO_CANVAS,x-despY);

}

}

var itamNewHeightCanvas:int=ALTO_CANVAS+despY;
if (itamNewHeightCanvas>x) {//x, next vertical line

var ipos:int=x;
while (ipos<itamNewHeightCanvas) {

canvas1.graphics.moveTo(0,ipos-despY);
canvas1.graphics.lineTo(ANCHO_CANVAS,ipos-despY);
ipos+=40;

}

}

}