Curved Text - path

Modified on Fri, Oct 4 at 2:36 PM

path

Description

path is used to fit text to path. The path can be drawn or hidden. 
 The same command can be used to draw the path only (if no text was entered). 
 The path can be of any shape created using a series of points and curve types.

Value Syntax

General:
[path x1,y1,move,oplist][path x2,y2,control,oplist][path x3,y3,control,oplist][path x4,y4,curve,oplist]
 [origin x,y][position horizontal-alignment, vertical-alignment][settings Path-Settings,Text-Settings] 

 Note: Unlike path, origin and position parts can only be used once. 

 Short form - Special Case (specific to full circular path) 

 incircular left,bottom   (,Path-Settings,Text-Settings) 
or
 circular left,bottom   (,Path-Settings,Text-Settings)

Details

circular

Add a circular arc from the current point to the new point with the previously defined control point as third circular arc point which is required. If the new point is identical with the current point a circle with diameter between the current point and the control point will be created.

control

Add a Bézier curve from the current point to the new point with the previously defined control points. At least one control point must be provided. If only one control point is available, it will be used as the sec-ond control point for the curve, and the first control point will be constructed as the reflection of the sec-ond control point at the endpoint of the previous Bézier curve.

curve

Control point for a Bézier curve or a circular arc.

line

Add a line segment from the current point to the new point.

move

Move to start point of a path. The first sub-path starts at the origin.

origin

New origin for absolute coordinates. Default: (0,0)

path

Start a new path segment. x and y coordinates of the next point is added then type of segment followed by an option list

position

specifies horizontal and vertical alignment

Option List (optlist parameters)

close

If true, the subpath will be closed with a straight line. (close=true or close=false [default])

fill

(only for type=move) If true the subpath will be closed and filled.

polar

If true, the (x, y) parameters are polar coordinates specifying radius r and angle phi, other-wise cartesian coordinates specifying x and y values. Default:false

radians

If true, angles for polar coordinates are specified in radians, otherwise in degrees. Default: false

relative

If true, (x, y) are relative to the current point, otherwise to the current origin.

round

(only for type=move) Adjacent line vertices in the subpath will be rounded in their joining point by a circular arc with the line segments as its tangents and with the specified radius. If the radius is negative the arc will be grooved so that the corners are circularly grooved. If close=true and no line from the last to the first point was explicitly specified, the first line and the closing line will also be rounded. If round=0 no rounding will be done.

stroke

(only for type=move) If true the subpath will be stroked.



 Other Options (only for type=move): dasharray, dashphase, fillcolor, fillrule, flatness, gstate, linecap, linejoin, linewidth, miterlimit, strokecolor 

 

 

Examples

Code

Sample

incircular left,bottom

 

incircular center,bottom

 

incircular right,bottom

 

 

 

Examples

Code

Sample

[path 0,50,move,][path 25,100,control,][path 75,0,control,][path 100,50,curve,] [origin 400,200][position center, bottom]

 

[path 0,25,move,][path 50,75,line,][path 100,25,line,] [origin 400,50][position center, bottom]

 

circular left,bottom

 

 

 

Examples

Code

Sample

circular center,bottom

circular right,bottom

[path 50,0,move,][path 0,50,control,][path 50,100,circular,] [path 100,50,control,][path 50,0,circular,][origin 400,200][position center, bottom]

 

 

Centering text on top of a circle


[path 0,0,move,][path 50,60,control,][path 50,60,control,][path 100,0,curve,][position center, bottom]

Tweak the numbers in red to fit properly, I think lower is better or move the block lower. For your case they should both match.

Another slightly different look
[path 0,0,move,][path 25,50,control,][path 75,50,control,][path 100,0,curve,][position center, bottom]

or

 [path 0,0,move,][path 50,50,control,][path 100,0,circular,][position center, bottom]

 

 

FULL CIRCLE

[path 0,50,move,][path 50,100,control,][path 100,50,circular,][path 50,0,control,][path 0,50,circular,][position left, bottom]

Assuming starting point is lower left (0,0)

[path 0,50,move,]                            Move left most (starting point)

[path 50,100,control,]                   Control Point at the very top

[path 100,50,circular,]                     Draw to right most

[path 50,0,control,]                         Control Point at the very bottom

[path 0,50,circular,]                         Draw to left most (starting point)

[position left, bottom]                   Start text from left most point heading up

 

Text starts at top

[path 50,0,move,][path 0,50,control,][path 50,100,circular,][path 100,50,control,][path 50,0,circular,][position center, bottom][settings  showborder=true]

Text starts at bottom

[path 50,100,move,][path 100,50,control,][path 50,0,circular,][path 0,50,control,][path 50,100,circular,][position center, bottom][settings  showborder=true]

Text starts at left

[path 0,50,move,][path 50,100,control,][path 100,50,circular,][path 50,0,control,][path 0,50,circular,][position left, bottom][settings  showborder=true]

 

 

Text attributes can be added as a prefix to the block (like change color or size)

 

Notes:

Starting point 0,0 is at the left bottom corner

All numbers are percentages of the block dimension (100 means leftmost point or topmost point – x or y direction)

End point is where text starts to print. It can either print to the left, right or center of that point.

Top, Bottom or Center defines the location of text against the path.

To print text in the other direction, reverse the path (counter clockwise to clockwise or vice versa)

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article