Draw circle with strong border

Draw circle with strong border
0.0 0

#1

He,

I would like to create a cercle with a strong border then i try this code

Size visibleSize = Director::getInstance()->getVisibleSize();
DrawPrimitives::setDrawColor4B(255, 0, 0, 255);
DrawPrimitives::setPointSize(10);
DrawPrimitives::drawCircle(Vec2(visibleSize.width / 2,visibleSize.height / 2), 100, CC_DEGREES_TO_RADIANS(360), 10, false);

But i have a poor simple circle.
I would like a circle same to my image.

Can you help me?

Thx you


Final topic about Anti-Aliasing disease
#2

I may be off track here as I’m currently learning some OpenGL as time allows. but could you solve this with something like glLineWidth(4.0);

http://www.opengl.org/sdk/docs/man3/xhtml/glLineWidth.xml


#3

Thx you.
I try

DrawPrimitives::setDrawColor4B(255, 255, 255, 255);
DrawPrimitives::setPointSize(10);
glLineWidth(17.0);
DrawPrimitives::drawCircle(Vec2(visibleSize.width / 2,visibleSize.height / 2), 150, CC_DEGREES_TO_RADIANS(180), 400, false);

But is not a perfect circle.


#4

I’m afraid I wouldn’t know why…Hopefully someone else will. I would think that you could use GL_LINE_LOOP.

Maybe this would help: http://slabode.exofire.net/circle_draw.shtml


#5

I wouldn’t recommend using glLineWidth, since:

Not all widths can be supported when line antialiasing is enabled. If an unsupported width is requested, the nearest supported width is used. Only width 1 is guaranteed to be supported; others depend on the implementation.

http://www.opengl.org/sdk/docs/man3/xhtml/glLineWidth.xml

If the circle is not required to have the variable width or some other tricky realtime transformations, I’d recommend a simple sprite prepared in any graphics editor.


#6

Yes i think you right.

But i would like to create this animation (i can’t explicate with words)



#7

See example at “cocos2d-x\tests\cpp-tests\Classes\ExtensionsTest\ControlExtensionTest\CCControlPotentiometerTest”


#8

DId you find the solution here?


#9

I recently did the similar widget. I used transparent png mask with smooth edges and draw filled state with DrawNode. It can be done.