Canvas Nasal API: Difference between revisions

→‎Path: Fleshed out some commands, and added some.
(→‎set: added clip-frame)
(→‎Path: Fleshed out some commands, and added some.)
Line 368: Line 368:
Inherits from Element.
Inherits from Element.


A path is similar to drawing with a pen on paper. The move and moveTo methods represent lifting the pen from the paper and moving to a new position. The drawing methods like lineTo would then be seen as starting from the current position of the pen. Therefore offcause the order the methods is called in, is important.
A path is similar to drawing with a pen on paper. The move and moveTo methods represent lifting the pen from the paper and moving to a new position. The drawing methods like lineTo would then be seen as starting from the current position of the pen. Therefore offcouse the order the methods is called in, is important.
=== pop_front ===
'''Parameters:''' ()
 
Remove first segment
=== pop_back ===
'''Parameters:''' ()
 
Remove last segment
=== getNumSegments ===
'''Parameters:''' ()
 
Get the number of segments
=== reset ===
'''Parameters:''' ()
 
Remove all existing path data
=== moveTo ===
=== moveTo ===
'''Parameters:''' (x, y)
'''Parameters:''' (x, y)
Line 376: Line 392:
'''Parameters:''' (x, y)
'''Parameters:''' (x, y)


Moves the position to an new relative position from the current.
Moves the position to a new relative position from the current.
=== reset ===
'''Parameters:''' ()
 
Remove all existing path data.
=== lineTo ===
=== lineTo ===
'''Parameters:''' (x, y)
'''Parameters:''' (x, y)
Line 406: Line 418:
Draws a vertical line to specified relative position.
Draws a vertical line to specified relative position.
=== quadTo ===
=== quadTo ===
'''Parameters:''' (x, y)
'''Parameters:''' (x0, y0, x1, y1)


Draws quadratic Bézier curve.
Draws quadratic Bézier curve.
=== quad ===
=== quad ===
'''Parameters:''' (x0, y0, x1, y1)
Draws quadratic Bézier curve. Relative coordinates.
=== squadTo ===
'''Parameters:''' (x, y)
Draws smooth quadratic Bézier curve.
=== squad ===
'''Parameters:''' (x, y)
'''Parameters:''' (x, y)


Draws quadratic Bézier curve. Relative coordinates.
Draws smooth quadratic Bézier curve. Relative coordinates.
=== cubicTo ===
=== cubicTo ===
'''Parameters:''' (x, y)
'''Parameters:''' (x0, y0, x1, y1, x2, y2)


Draws cubic Bézier curve.
Draws cubic Bézier curve.
=== cubic ===
=== cubic ===
'''Parameters:''' (x, y)
'''Parameters:''' (x0, y0, x1, y1, x2, y2)


Draws cubic Bézier curve. Relative coordinates.
Draws cubic Bézier curve. Relative coordinates.
=== scubicTo ===
=== scubicTo ===
'''Parameters:''' (x, y, x2, y2)
Add a smooth cubic Bézier curve
=== scubic ===
=== scubic ===
'''Parameters:''' (x, y)
Add a smooth cubic Bézier curve. Relative coordinates.
=== rect ===
'''Parameters:''' (x, y, w, h, cfg = nil)
cfg:  Optional settings (eg. {"border-top-radius": 5}, {"border-bottom-radius": 5}, {"border-radius": 5}, {"border-bottom-right-radius": 5} or {"border-left-radius": 5})
Add a (rounded) rectangle to the path
=== arcSmallCCWTo ===
=== arcSmallCCWTo ===
=== arcSmallCCW ===
=== arcSmallCCW ===
Line 486: Line 518:


=== close ===
=== close ===
'''Parameters:''' ()
Close the path (implicit lineTo to first point of path)
=== setColor ===
=== setColor ===
'''Parameters:''' (r, g, b)
'''Parameters:''' (r, g, b)
Line 502: Line 537:


The width of the path.
The width of the path.
=== setStrokeLineJoin ===
'''Parameters:''' (type)
Set stroke linejoin. Type can be "miter", "round" or "bevel".
=== setStrokeLineCap ===
=== setStrokeLineCap ===
'''Parameters:''' (type)
'''Parameters:''' (type)
Line 509: Line 548:
'''Parameters:''' (pattern)
'''Parameters:''' (pattern)


Make dashed path. Pattern is a vector of alternating dash and gap lengths. ? horizontal, or misunderstood the vector ?
Make dashed path. Pattern is a vector of alternating dash and gap lengths. Lines drawn will follow this pattern.


'''Example:''' my_path.setStrokeDashArray([10, 20, 10, 20, 10]);
'''Example:''' my_path.setStrokeDashArray([10, 20, 10, 20, 10]);
Line 523: Line 562:


=== setDataGeo ===
=== setDataGeo ===
'''Parameters:''' (cmds, points)
?
?
=== addSegment ===
=== addSegment ===
'''Parameters:''' (cmd, coords...)
Add a path segment
=== addSegmentGeo ===
'''Parameters:''' (cmd, coords...)
?
?


== Map ==
== Map ==
574

edits