Class Text
Defined in: text.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
Text(string, x, y, font, size, outsideCanvas)
A simple text class to render text on a HTML 5 canvas
Right now all the texts are horizontaly and verticaly centered so the (x,y) is the center of the text
|
| Field Attributes | Field Name and Description |
|---|---|
|
Horizontal alignement of the text, can be: left, center, right
|
|
| <static> |
Text.ALIGN_CENTER
Center alignment
|
| <static> |
Text.ALIGN_LEFT
Left alignment
|
| <static> |
Text.ALIGN_RIGHT
Right alignment
|
| <static> |
Text.ALIGNMENTS
An {Array} with horizontal alignments
|
|
Used to display visual debug information
|
|
| <static> |
Text.DEFAULT_SIZE
The default size of the created font
|
|
Font used to draw text
|
|
| <static> |
Text.FONTS
An {Array} of fonts
|
|
Line spacing.
|
|
|
Size of the text
|
|
| <static> |
space between 2 caracters
|
|
Text used to display
|
|
|
Style of the text
|
|
|
Vertical alignement of the text - for now always middle
|
|
| <static> |
Text.VALIGN_BOTTOM
Bottom alignment
|
| <static> |
Text.VALIGN_MIDDLE
Middle alignment
|
| <static> |
Text.VALIGN_TOP
Top alignment
|
| <static> |
Text.VALIGNMENTS
An {Array} of vertical alignments
|
|
We will keep the initial point (as base line) and another point just above it - similar to a vector.
|
| Method Attributes | Method Name and Description |
|---|---|
|
clone()
|
|
|
contains(x, y)
|
|
|
equals(anotherText)
|
|
|
escapeString(s)
There are characters that must be escaped when exported to SVG
Ex: < (less then) will cause SVG parser to fail
|
|
|
getAngle()
Get the angle around the compas between the vector and North direction
|
|
|
Text should not add it's bounds to any figure.
|
|
|
Returns the bounds the text might have if in normal space (not rotated)
We will keep it as a Polygon
|
|
|
Approximates the height of the text in normal space (no rotation)
It is based on the size of the font and the line spacing used.
|
|
|
Returns the width of the text in normal space (no rotation)
We need to know the width of each line and then we return the maximum of all widths
|
|
|
gettext()
|
|
| <static> |
Text.load(o)
Creates a new {Text} out of JSON parsed object
|
|
near(x, y, radius)
|
|
|
paint(context)
Paints the text
|
|
|
settext(text, str)
|
|
|
settextSize(text, size)
|
|
|
toString()
|
|
|
toSVG()
Convert text to SVG representation
|
|
|
transform(matrix)
Transform the Text
Upon transformation the vector is tranformed but the text remains the same.
|
Class Detail
Text(string, x, y, font, size, outsideCanvas)
A simple text class to render text on a HTML 5 canvas
Right now all the texts are horizontaly and verticaly centered so the (x,y) is the center of the text
Author: Alex Gheroghiu, Augustin
Note:
Canvas's metrics do not report updated width for rotated (context) text ...so we need to compute it All texts will be center aligned...for now Alignement note:
It can be Center|Left|Right http://dev.w3.org/html5/2dcontext/#dom-context-2d-textalign.
Author: Alex Gheroghiu
Canvas's metrics do not report updated width for rotated (context) text ...so we need to compute it All texts will be center aligned...for now Alignement note:
It can be Center|Left|Right http://dev.w3.org/html5/2dcontext/#dom-context-2d-textalign.
- Parameters:
- {String} string
- - the text to display
- {Number} x
- - the x pos
- {Number} y
- - the y pos
- {String} font
- - the font we are using for this text
- {Number} size
- - the size of the font
- {Boolean} outsideCanvas
- - set this on true if you want to use the Text outside of canvas (ex: Export to SVG)
- See:
- list of web safe fonts : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html Arial, Verdana
- /documents/specs/text.png
Field Detail
align
Horizontal alignement of the text, can be: left, center, right
<static>
Text.ALIGN_CENTER
Center alignment
<static>
Text.ALIGN_LEFT
Left alignment
<static>
Text.ALIGN_RIGHT
Right alignment
<static>
Text.ALIGNMENTS
An {Array} with horizontal alignments
debug
Used to display visual debug information
<static>
Text.DEFAULT_SIZE
The default size of the created font
font
Font used to draw text
<static>
Text.FONTS
An {Array} of fonts
lineSpacing
Line spacing. It should be a percent of the font size so it will grow with the font
size
Size of the text
<static>
Text.SPACE_BETWEEN_CHARACTERS
space between 2 caracters
str
Text used to display
style
Style of the text
valign
Vertical alignement of the text - for now always middle
<static>
Text.VALIGN_BOTTOM
Bottom alignment
<static>
Text.VALIGN_MIDDLE
Middle alignment
<static>
Text.VALIGN_TOP
Top alignment
<static>
Text.VALIGNMENTS
An {Array} of vertical alignments
vector
We will keep the initial point (as base line) and another point just above it - similar to a vector.
So when the text is transformed we will only transform the vector and get the new angle (if needed)
from it
Method Detail
clone()
contains(x, y)
- Parameters:
- x
- y
equals(anotherText)
- Parameters:
- anotherText
escapeString(s)
There are characters that must be escaped when exported to SVG
Ex: < (less then) will cause SVG parser to fail
Author: Alex.
Author: Alex
- Parameters:
- s
{Number}
getAngle()
Get the angle around the compas between the vector and North direction
Author: alex@scriptoid.com.
Author: alex@scriptoid.com.
- Returns:
- {Number} - the angle in radians
- See:
- /documentation/specs/angle_around_compass.jpg
{Array}
getBounds()
Text should not add it's bounds to any figure...so the figure should
ignore any bounds reported by text
- Returns:
- {Array
} - returns [minX, minY, maxX, maxY] - bounds, where all points are in the bounds.
{Polygon}
getNormalBounds()
Returns the bounds the text might have if in normal space (not rotated)
We will keep it as a Polygon
- Returns:
- {Polygon} - a 4 points Polygon
getNormalHeight()
Approximates the height of the text in normal space (no rotation)
It is based on the size of the font and the line spacing used.
Author: Augustin.
Author: Augustin
getNormalWidth()
Returns the width of the text in normal space (no rotation)
We need to know the width of each line and then we return the maximum of all widths
Author: Augustin.
Author: Augustin
getPoints()
gettext()
gettextSize()
<static>
{Text}
Text.load(o)
Creates a new {Text} out of JSON parsed object
Author: Alex Gheorghiu.
Author: Alex Gheorghiu
- Parameters:
- {JSONObject} o
- - the JSON parsed object
- Returns:
- {Text} a newly constructed Text
near(x, y, radius)
- Parameters:
- x
- y
- radius
paint(context)
Paints the text
Author: Augustin, Alex .
Author: Augustin
- Parameters:
- context
settext(text, str)
- Parameters:
- text
- str
settextSize(text, size)
- Parameters:
- text
- size
toString()
toSVG()
Convert text to SVG representation
Author: Alex
Note:
The position of the text is determined by the x and y attributes of the element.
The x-attribute determines where to locate the left edge of the text (the start of the text).
The y-attribute determines where to locate the bottom of the text (not the top).
Thus, there is a difference between the y-position of a text and the y-position of lines,
rectangles, or other shapes..
Author: Alex
- See:
- http://www.w3.org/TR/SVG/text.html
- http://tutorials.jenkov.com/svg/text-element.html for rotation
- http://tutorials.jenkov.com/svg/tspan-element.html for tspan
- http://tutorials.jenkov.com/svg/svg-transformation.html for detailed rotation
- http://www.w3.org/TR/SVG/coords.html#TransformAttribute for a very detailed rotation documentation
- Also read /documents/specs/text.png
transform(matrix)
Transform the Text
Upon transformation the vector is tranformed but the text remains the same.
Later we are gonna use the vector to determine the angle of the text
Author: Alex Gheorghiu.
Author: Alex Gheorghiu
- Parameters:
- {Matrix} matrix
- - the transformation matrix