javascript easelJs onPress enlarge image circle

Question

Working with javascript and the Easeljs lib and createjs, i need some help. my program draws some circles and fills them with color. also with a Ticker they are moving and with some if statements they are bouncing from the walls of the window. The circles are created dynamicly and the amount of circles is different everytime.

Now I need to implement a feature so that the circles will enlarge when you press them. They should get their radius +1px bigger every 30 ms. I don't know how to do that. 1. Do u use onPress for this?which callbacks do i need to use and how will i find out if the mouse is released and the circle can stop growing? 2. do i need to delete circleObject from my circlesArray or is it enough to delete it from the stage and draw them again? I'm desperate for help, i would be glad if someone could give me some clues!

Greetings T

Answer 1

With the information you provided I would refer you to take a look at this EaselJS Example on github: https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop_hitArea.html The onPress-Method is used there in a way that you could probably almost copy as is.

Yours could look like this:

function(target){
    target.onPress = function(evt) {
        target.grow = true; //or a grow-factor or so
        evt.onMouseUp = function(ev) {
            target.grow = false;
        }
    }
}(circle);

and in your tick-function you look through all circles, check for their grow==true and increase their radius if so

And 2: Your circleObjects all are a createjs.Shape right? You don't have to delete them from the stage or from the array, you can use circle.graphics.clear(); and then redraw the circle with the new radius.