textPath

[Valeriy Severin]

Hello! Is SVG textPath realized in Raphael (I was searching it at this
group and had found similar questions for 2009 year)? I can't find
them in documentation, but something about textPath I found in sources
(but not sure...). If textPath is not realized in Raphael how could I
extend base methods to add them?

If it's not difficult questions, please answer them... Tahnks!

[charles thomas]

Valeriy Textpath is not supported. Here is an example of applying angle to words. http://www.irunmywebsite.com/raphael/additionalhelp.php?q=rotatintextexactly You might be able to create something along a curved line (with stroke-width set to zero) by using inkscape or another editor. Then you could use getPointAtLength() http://www.irunmywebsite.com/raphael/additionalhelp.php?q=getPointAtLength I have an idea you can derive the angle at right angles to the tangent on the curve (at the point) Maybe if you get it working you will let us all know about it! Regards Charles --- On Fri, 10/8/10, Valeriy Severin <selm...@googlemail.com> wrote:

-- You received this message because you are subscribed to the Google Groups "Raphaël" group. To post to this group, send an email to raph...@googlegroups.com. To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[Valeriy Severin]

Thanks, Charles! Sad that textPath still not supported.

http://www.irunmywebsite.com - greate site. You give me a good idea,
but for begin I will try create textPath. I need something as titles
for curve lines. I think that with textPath it will be better (and
more easy for usages, maybe).

If I will make it, ofcourse I will write here.

On 9 окт, 04:24, charles thomas <charles...@yahoo.com> wrote:
> Valeriy
>
> Textpath is not supported.

> Here is an example of applying angle to words.http://www.irunmywebsite.com/raphael/additionalhelp.php?q=rotatintext...

>
> You might be able to create something along a curved line (with stroke-width set to zero) by using inkscape or another editor.
>

> Then you could use getPointAtLength()http://www.irunmywebsite.com/raphael/additionalhelp.php?q=getPointAtL...

>
> I have an idea you can derive the angle at right angles to the tangent on the curve (at the point)
>
> Maybe if you get it working you will let us all know about it!
>
> Regards Charles
>

> --- On Fri, 10/8/10, Valeriy Severin <selma...@googlemail.com> wrote:

>
> From: Valeriy Severin <selma...@googlemail.com>
> Subject: textPath
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Friday, October 8, 2010, 2:23 PM
>
> Hello! Is SVG textPath realized in Raphael (I was searching it at this
> group and had found similar questions for 2009 year)? I can't find
> them in documentation, but something about textPath I found in sources
> (but not sure...). If textPath is not realized in Raphael how could I
> extend base methods to add them?
>
> If it's not difficult questions, please answer them... Tahnks!
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[Valeriy Severin]

Yep! For curve line I use:

var captRectAttr = { "stroke": "#777", "fill": "#fff", "stroke-
width": 1 };
var captAttr = { "fill": "#777", "font-size": 12, "font-weight":
"bold" };

var center = myLine.getTotalLength() / 2;

var rightPoint = myLine.getPointAtLength(center - 20);
var leftPoint = myLine.getPointAtLength(center + 20);
var angle = Raphael.angle(rightPoint.x, rightPoint.y, leftPoint.x,
leftPoint.y);

var myCaption = this.text(centerPoint.x, centerPoint.y, caption);
myCaption.caption.attr(captAttr);

var captBBox =myCaption.getBBox();
var myCaptionRectangle = this.rect(captBBox.x - 5, captBBox.y - 5,
captBBox.width + 10, captBBox.height + 10, 5).attr(captRectAttr);

myCaptionRectangle.rotate(angle, true);
myCaptionRectangle.rotate(angle, true);

myCaption.toFront();

I didn't try do it with textPath becouse this result is satisfied me.

Charles, thanks again!

On 10 окт, 18:02, Valeriy Severin <selma...@googlemail.com> wrote:
> Thanks, Charles! Sad that textPath still not supported.
>

> http://www.irunmywebsite.com- greate site. You give me a good idea,

[charles thomas]

Valeriy could you fiddle with it for 5 minutes so that it works in the database (@ http://www.irunmywebsite.com/raphael/additionalhelp.php) and I will include your good work for other people. http://www.irunmywebsite.com/raphael/additionalhelp.php?q=getPointAtLength Regards Charles http://www.irunmywebsite.com

--- On Mon, 10/11/10, Valeriy Severin <selm...@googlemail.com> wrote:

> > To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.

> > For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB.

-- You received this message because you are subscribed to the Google Groups "Raphaël" group. To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.

[Valeriy Severin]

No problem! I will do it tommorow. But it's my first Raphael
expirience, I don't sure that it's realy useful for somebody, but I
will try.

On 11 окт, 19:21, charles thomas <charles...@yahoo.com> wrote:
> Valeriy
>

> could you fiddle with it for 5 minutes so that it works in the database (@http://www.irunmywebsite.com/raphael/additionalhelp.php) and I will include your good work for other people.
>
> http://www.irunmywebsite.com/raphael/additionalhelp.php?q=getPointAtL...
>
> Regards Charleshttp://www.irunmywebsite.com

> >http://www.irunmywebsite.com-greate site. You give me a good idea,

> > > To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

> > > For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB.
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[Valeriy Severin]

Charles,

my example:

// Stylization of line, rectangle and text

var captRectAttr = { "stroke": "#777", "fill": "#fff", "stroke-
width": 1 };
var captAttr = { "fill": "#777", "font-size": 12, "font-weight":
"bold" };

var lineAttr = { stroke:'#FF0000', 'stroke-width': 4 };
var caption = "Line caption\nexample";

// Simple curve line
var myLine = paper.path('M50,50C120,50,120,200,250,200');
myLine.attr(lineAttr);

var center = myLine.getTotalLength() / 2; // Calculate length to
center of line
var centerPoint= myLine.getPointAtLength(center); // Calculate center
point on line
var rightPoint = myLine.getPointAtLength(center - 20); // and right
point
var leftPoint = myLine.getPointAtLength(center + 20); // and left
point for angle calculating

if (rightPoint.x > leftPoint.x) { // For right text rotation (it's
can be upside down)
var tmp = leftPoint;
leftPoint = rightPoint;
rightPoint = tmp;
}

// Calculate angle
var angle = Raphael.angle(leftPoint.x, leftPoint.y, rightPoint.x,
rightPoint.y);

// Painting of text at center of curve line
var myCaption = paper.text(leftPoint.x, leftPoint.y, caption);
myCaption.attr(captAttr);

// Get BBox of text for calculating coordinats of rectangle
var captBBox =myCaption.getBBox();

// Painting of rectangle
var myCaptionRectangle = paper.rect(captBBox.x - 5, captBBox.y - 5,

captBBox.width + 10, captBBox.height + 10, 5).attr(captRectAttr);

// Rotate text on angle of line
myCaption.rotate(angle, true);
// Rotate rectangle on angle of line
myCaptionRectangle.rotate(angle, true);
// Moves text to front (at begining we paint text, and it's cover by
rectangle)
myCaption.toFront();

On 11 окт, 19:21, charles thomas <charles...@yahoo.com> wrote:
> Valeriy
>

> could you fiddle with it for 5 minutes so that it works in the database (@http://www.irunmywebsite.com/raphael/additionalhelp.php) and I will include your good work for other people.
>
> http://www.irunmywebsite.com/raphael/additionalhelp.php?q=getPointAtL...
>
> Regards Charleshttp://www.irunmywebsite.com

> >http://www.irunmywebsite.com-greate site. You give me a good idea,

> > > To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

> > > For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB.
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[charles thomas]

Valeriy Go to http://www.irunmywebsite.com/raphael/additionalhelp.php?q=anglebannersoncurves where this example has been implemented. A nice by product was the attributes you carefully chose for the text. As you can see from other examples some text / attribute choices do not look as good in IE as they do in FF. However the attributes you selected of:

{ "fill": "#777", "font-size": 12, "font-weight":"bold" };

Look very good cross-browser. Regards Charles http://www.irunmywebsite.com

--- On Tue, 10/12/10, Valeriy Severin <selm...@googlemail.com> wrote:

> > > To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.

> > > For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB. > > -- > You received this message because you are subscribed to the Google Groups "Raphaël" group. > To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.

> For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB. -- You received this message because you are subscribed to the Google Groups "Raphaël" group. To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.