Question

My question is: how do I redraw a shape using only code?

Short comment on the task itself. I’ve an eventListener, which grabs clicks on stage and stage resizes. Both execute the same function – redrawEvents(evt:Event). The stage contains a number of blocks, which represent certain events. On each redraw these blocks are repositioned, and also lines (which represent connections between events) are drawn.

I’ve figured out a way to reposition all the blocks, but I got stuck on redrawing lines.

I’m using a single shape to hold all the lines, because lines, unlike blocks, are not interactive. Since the whole point of the application is creating sets of interconnected events, I have to modify this shape every time a new block is created, which also calls redraw function.

Here’s the code I use to modify the shape

stage.addEventListener(MouseEvent.CLICK,redrawEvents);

function redrawEvents (evt:Event) {
    var lines:Shape = new Shape();
    lines.graphics.lineStyle(2, 0xFFFFFF, .75);
    lines.graphics.clear();
    for (var k:int = 0; k < connections.length; k++){
        lines.graphics.moveTo(eventList[connections[k][0]].x + 50, eventList[connections[k][0]].y + 50);
        lines.graphics.lineTo(eventList[connections[k][1]].x + 50, eventList[connections[k][1]].y + 50);
    }
    addChild(lines);
}

However, whenever the shape is modified, it still leaves the ‘older versions’ of itself on screen, and i don’t want that. I tried to create and delete instances, varions type conversions, but still that haven’t solved the problem.

Thanks in advance

Answer 1

Each time you draw the lines, you’re adding a new Shape to the stage. You can keep a reference to it and remove it from the display list each time, or just use one instance and the clear() method of Graphics before drawing the new set of lines.