PDA

View Full Version : How to draw "arc " inside circle using ExtJS4.2 ?



DineshGudikandula
24 Apr 2013, 3:55 AM
Hi,

I am draw a circle inside Ext.draw.Componet,And inside that circle i want draw "arc" from 0 to 180 degrees,with width 5.
Gide me to draw the Arc.
My Code:


Ext.create('Ext.draw.Component', {
height:250,
width:250,
items: [{
type: 'circle',
radius: 50,
x: 100,
y: 100,
fill: '#2d2d2d'
}]
});



Can any one help me plz...
Thanks in advance...

DineshGudikandula
24 Apr 2013, 5:07 AM
Find image below..

43332

slemmon
25 Apr 2013, 6:49 PM
I've not seen anyone post code like that, really. Though the Guage series chart does create an arc when it's rendered. You could look into the source on that charting series.

That said, the draw package will draw any svg path you'd like, so if you can determine the programmatic way to define your path into SVG you'll be able to pass that over to a draw component.

Best of luck!

DineshGudikandula
25 Apr 2013, 8:29 PM
Thanks slemmon..

I done the same thing ..finally i achieved.

DineshGudikandula
26 Apr 2013, 4:59 AM
Hi...
I have one more problem like i need to draw the text on curve ( arch)..SVG support textPath element but extjs do't have type:'textPath'..like in above image.

Can u help?

slemmon
26 Apr 2013, 12:51 PM
Hmm... you can specify a path for text from the framework today. But, you may be able to override / extend the surface / sprite / text classes to do that. You'll have to search the source to see where the text SVG element is actually being defined/rendered.

DineshGudikandula
28 Apr 2013, 8:55 PM
Thanks for reply slemmon..

I try but i unable to find the way to override/extend text type code...

Can u plz help me to draw "textpath"...(override code)

Alok.Ranjan
28 Apr 2013, 10:09 PM
Hello Dinesh
Below link contains example where it explains how to draw text along the curve:
http://www.svgbasics.com/text2.html

I hope you find this helpful.

mridul64
1 Jun 2013, 10:13 PM
Hi Dinesh,

I am trying to do a similar thing. I have to load a rectangle inside a circle and then load an image inside a circle. Can you share your code or else advice me how to do it?

Mridul


Thanks slemmon..

I done the same thing ..finally i achieved.

DineshGudikandula
2 Jun 2013, 10:04 PM
@mridul64

Can u share the sample image.With that I can give the approach for that.

mridul64
3 Jun 2013, 10:55 AM
Hi Dinesh,

Attached is the image. As you can see I want to load a circle inside a rectangle, so the part of the circle outside the rectangle goes away. Similarly, I want to load the image inside the circle so that the part of the image outside the circle goes away. Unfortunately, I have not been able to do either uptill now. Kindly look into it.

44154


@mridul64

Can u share the sample image.With that I can give the approach for that.

mridul64
3 Jun 2013, 10:58 AM
44155
Hi Dinesh,

Attached is the image, as you can see I want to load a circle inside a rectangle such that the part of circle outside the rectangle goes away. Similarly I want to load the image inside the circle so that the image part outside the circle goes away. Unfortunately, I havent been able to do either. Kindly help.