Skip to content

Shape

Jump to bottom
Christopher Ross-Gill edited this page Aug 1, 2016 · 1 revision

Table of Contents

SHAPE

Draws shapes using the SHAPE sub-dialect

Arg Type Description Values
shape-cmd-block [block!]


Notes and Examples

For examples of specific SHAPE commands see HERE

ARC

Draws an elliptical arc from the current point.

Arg Type Description Values
end-point [pair!]
radius-x [decimal!]
radius-y [decimal!]
angle [decimal!]
sweep [word!] "positive angle" arc sweep
large [word!] large arc sweep large 
pen yellow
line-width 3
shape [
   move 100x200
   arc 300x200 120 50 0
]

Set SWEEP to draw arcs in a "positive-angle" direction:

pen yellow
line-width 3
shape [
	move 100x200
	arc 300x200 120 50 0 sweep
]


Set LARGE for arc sweeps greater than 180°:

pen yellow
line-width 3
shape [
	move 100x200
	arc 300x200 120 50 0 sweep large
]


More complex usage of arc:

pen yellow
line-width 3
shape [
	move 0x399
	line 42x357
	arc 84x315 25 20 -45 sweep
	line 126x273
	arc  168x231 25 40 -45 sweep
	line 210x189 
	arc  252x147 25 60 -45 sweep
	line 294x105 
	arc  336x63 25 80 -45 sweep
	line 399x0
	move 0x0 
]


Same complex example but with relative positioning commands:

pen red
line-width 3
translate 0x399
shape [
	move 0x0
	'line 42x-42 
	'arc 42x-42 25 20 -45 sweep
	'line 42x-42 
	'arc 42x-42 25 40 -45 sweep
	'line 42x-42 
	'arc 42x-42 25 60 -45 sweep
	'line 42x-42 
	'arc 42x-42 25 80 -45 sweep
	'line 63x-63
	move 0x0
]


CLOSE

Closes previously defined set of lines in the SHAPE block.

This command has no arguments.
Notes and Examples

In some case it is easier to use the CLOSE command as a shortcut instead of calculating the closing lines.

This is without CLOSE commands:

line-width 3
pen yellow
shape [
	move 100x100
	hline 50
	arc 100x50 50 50 0 large
	move 75x75 vline 25 arc 25x75 50 50 0
	move 0x160
	line 200x160 200x0 0x0
]


And here with CLOSE commands:

<pre> line-width 3 pen yellow shape [ move 100x100 hline 50 arc 100x50 50 50 0 large close move 75x75 vline 25 arc 25x75 50 50 0 close move 0x160 line 200x160 200x0 0x0 ] </pre> [[images/CLOSE-2.png|CLOSE example 2]] <br> == CURV== Smooth '''CURVE''' command shortcut. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point2 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | ... | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>From http://www.w3.org/TR/SVG11/paths.html:</p> <p>"The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous curve command, the first control point is the current point.)"</p> <p>Simple example:</p> <pre> line-width 3 pen yellow shape [ move 100x50 vline 150 curv 300x150 300x50 move 0x0 ] </pre> [[images/CURV-1.png|CURV example 1]] <br> <p>Same example but with relative positioning commands:</p> <code><pre> <pre> line-width 3 pen red shape [ 'move 100x50 'vline 100 'curv 200x0 200x-100 move 0x0 ] </pre> [[images/CURV-2.png|CURV example 2]] <br> == CURVE== Draws a cubic Bézier curve. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point2 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point3 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point4 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | ... | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>A cubic Bézier curve is defined by a start point, an end point, and two control points.</p> <pre> line-width 3 pen yellow shape [ move 100x50 curve 100x150 300x150 300x50 move 0x0 ] </pre> [[images/SCURVE-1.png|CURVE example 1]] <br> <p>Same example but with relative positioning commands:</p> <code><pre> <pre> line-width 3 pen red shape [ move 100x50 'curve 0x100 200x100 200x0 move 0x0 ] </pre> [[images/SCURVE-2.png|CURVE example 2]] <br> == HLINE== Draws a horizontal line from the current point. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | end-x | bgcolor="white" | [decimal!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>Using absolute coordinates:</p> pen yellow line-width 4 shape [ <pre> move 100x100 hline 300 move 100x150 hline 250 move 100x200 hline 200 </pre> ] [[images/HLINE-1.png|HLINE example 1]] <br> <p>Using relative coordinates:</p> pen red line-width 4 shape [ <pre> move 100x100 'hline 200 'move -200x50 'hline 150 'move -150x50 'hline 100 </pre> ] [[images/HLINE-2.png|HLINE example 2]] <br> == LINE== Draws a line from the current point through the given points, the last of which becomes the new current point. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point2 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point3 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point4 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | ... | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>Using absolute coordinates:</p> pen yellow line-width 4 shape [ <pre> move 50x50 line 300x120 50x120 300x50 move 0x0 </pre> ] [[images/SLINE-1.png|LINE example 1]] <br> <p>Using relative coordinates:</p> pen red line-width 4 shape [ <pre> move 50x50 move 50x50 'line 250x70 -250x0 250x-70 move 0x0 </pre> ] [[images/SLINE-2.png|LINE example 2]] <br> == MOVE== Set's the starting point for a new path without drawing anything. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>The effect is as if the "pen" were lifted and moved to a new location.</p> <p>Used at the end of a SHAPE command, MOVE prevents the shape from being drawn as a closed polygon.</p> <p>Note: Every path defined in SHAPE block is automatically closed. To disable the auto-close feature just put at the end of the SHAPE block: '''move 0x0'''</p> line-width 4 pen red shape [ <pre> move 100x100 line 20x20 150x50 move 0x0 </pre> ] pen blue shape [ <pre> move 100x200 line 20x120 150x150 </pre> ] [[images/MOVE-1.png|MOVE example 1]] <br> <p>Using relative coordinates for the second shape:</p> line-width 4 pen red shape [ <pre> move 100x100 line 20x20 150x50 move 0x0 </pre> ] pen blue shape [ <pre> move 100x100 'move 0x100 'line -80x-80 130x30 'move 0x0 </pre> ] [[images/MOVE-2.png|MOVE example 2]] <br> == QCURV== Smooth '''QCURVE''' command shortcut. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>Draws a cubic Bézier curve from the current point to point1.</p> <p>See: http://www.w3.org/TR/SVG11/paths.html and CURV</p> <p>Using absolute coordinates:</p> pen yellow line-width 4 shape [ <pre> move 0x150 qcurve 100x250 200x150 qcurv 400x150 move 0x0 </pre> ] [[images/QCURV-1.png|QCURV example 1]] <br> <p>Using relative coordinates:</p> pen red line-width 4 shape [ <pre> move 0x150 'qcurve 100x100 200x0 'qcurv 200x0 move 0x0 </pre> ] [[images/QCURV-2.png|QCURV example 2]] <br> == QCURVE== Draws quadratic Bézier curve. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | point1 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point2 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | point3 | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |- | bgcolor="white" | ... | bgcolor="white" | [pair!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>A quadratic Bézier curve is defined by a start point, an end point, and one control point.</p> <p>Using absolute coordinates:</p> pen yellow line-width 4 shape [ <pre> move 100x50 qcurve 200x150 300x50 move 0x0 </pre> ] [[images/QCURVE-1.png|QCURVE example 1]] <br> <p>Using relative coordinates:</p> pen red line-width 4 shape [ <pre> move 100x50 'qcurve 100x100 200x0 move 0x0 </pre> ] [[images/QCURVE-2.png|QCURVE example 2]] <br> == VLINE== Draws a vertical line from the current point. {| cellspacing="1" cellpadding="4" border="0" style="background: black; color: black" ! bgcolor="silver" | Arg ! bgcolor="silver" | Type ! bgcolor="silver" | Description ! bgcolor="silver" | Values |- | bgcolor="white" | end-y | bgcolor="white" | [decimal!] | bgcolor="white" | | bgcolor="white" | |} <br>'''Notes and Examples''' <p>Using absolute coordinates:</p> pen yellow line-width 4 shape [ <pre> move 100x100 vline 300 move 150x100 vline 250 move 200x100 vline 200 </pre> ] [[images/VLINE-1.png|VLINE example 1]] <br> <p>Using relative coordinates:</p> pen red line-width 4 shape [ <pre> move 100x100 'vline 200 'move 50x-200 'vline 150 'move 50x-150 'vline 100 </pre> ] [[images/VLINE-2.png|VLINE example 2]] <br> ---- <TABLE WIDTH=100%><TR><TD ALIGN=LEFT VALIGN=TOP WIDTH=14%> Pages <font size=1> *[[Draw]] *[[Anti-Alias]] *[[Arc]] *[[Arrow]] *[[Box]] *[[Circle]] *[[Clip]] *[[Curve]] *[[Ellipse]] </font></td> <TD ALIGN=LEFT VALIGN=TOP WIDTH=14%> <font size=1> *[[Fill-Pen]] *[[Fill-Rule]] *[[Gamma]] *[[Grad-Pen]] *[[Invert-Matrix]] *[[Image]] *[[Image-Filter]] *[[Line]] *[[Line-Cap]] </font></td> <TD ALIGN=LEFT VALIGN=TOP WIDTH=14%> <font size=1> *[[Line-Join]] *[[Line-Pattern]] *[[Line-Width]] *[[Matrix]] *[[Pen]] *[[Polygon]] *[[Push]] *[[Reset-Matrix]] *[[Rotate]] </font></td> <TD ALIGN=LEFT VALIGN=TOP WIDTH=14%> <font size=1> *[[Scale]] *[[Shape]] *[[Skew]] *[[Spline]] *[[Text]] *[[Transform]] *[[Translate]] *[[Triangle]] </font></td> <TD ALIGN=LEFT VALIGN=TOP width=30%> Chapters <font size=1> *[[R3 Introduction]] *[[Getting Started With R3]] *[[The Graphical User Interface]] *[[Script Writing With The Visual Interface Dialect|Script Writing With The VID Dialect]] *'''Script Writing With The Draw Dialect''' *[[The Graphic Object]]</font></td> <TD ALIGN=LEFT VALIGN=TOP WIDTH=14%> <font size=1> *[[Table Of Contents]] </font></td> </tr></table>
Clone this wiki locally