Drawing UnFilled Circle with easeljs

[sandudhate]

Hi guys,

How can I create an unfilled circle with easeljs ? Is it possible ?

[dimumurray]

Use the Graphics class, set a strokestyle (thickness of the line among other properties), set a line color, and draw the circle.

 

var g = new createjs.Graphics();g.setStrokeStyle(1);g.beginStroke("#000000");g.drawCircle(0,0,30);

That's it.

Here's a link to the official docs for more details:

http://www.createjs.com/docs/easeljs/classes/Graphics.html

[sandudhate]

Thanks dimumurray.

It helps a lot. I have another question. When you draw only with beginStroke a circle, i can't use getObjectUnderPoint properly.

e.g. I used

mp = new createjs.Shape(); mp.graphics.setStrokeStyle(12).beginStroke("#00bb00")drawCircle(57,146,32);

stage.addChild(mp);

stage.removeChild(stage.getObjectUnderPoint(57,146));

stage.update();

I also changed params of getObjectUnderPoint but nothing works. Also, mp.x and mp.y both are returning 0. But, I need to remove them. And one more thing, beginFill works properly.

Thanks,

Sankarshan

[dimumurray]

I'm speculating here but I suspect that when a circle is drawn without a fill its hit area is limited to the line defined by its stroke. 
An old school (flash) trick is to apply a fill whose alpha is zero. So you might try something like this:

var g = new createjs.Graphics();g.setStrokeStyle(1);g.beginStroke("#000000");g.beginFill("rgba(0,0,0,0)");g.drawCircle(0,0,30);g.endFill();

[sandudhate]

Thanks again.

Your old-school trick looks awesome. But, actually I found that easel ignores objects having 0 alpha. 0.001 too didn't work. But, 0.01 works. Fill is almost invisible. That's great trick. Appreciate your help.

Regards,

Sankarshan