252
edits
m (put canvas navigation below WIP note) |
No edit summary |
||
Line 51: | Line 51: | ||
=== arc() === | === arc() === | ||
[[File:Canvas-draw-scales03.png|thumb|circular marks]] | |||
arc(cgroup, radius, center, from_deg = nil, to_deg = nil) | arc(cgroup, radius, center, from_deg = nil, to_deg = nil) | ||
Draw an arc (part of a circle) with given radius around center. In the example image a red, green and blue arc are shown, nasal code below. | |||
'''center''' center point of circle as vector [x,y] | '''center''' center point of circle as vector [x,y] | ||
'''from_deg''', '''to_deg''' start and end of arc in degree of compass rose (0 = North, 90 = East, ...); defaults to 0, 360 (full circle) | '''from_deg''', '''to_deg''' start and end of arc in degree of compass rose (0 = North, 90 = East, ...); defaults to 0, 360 (full circle) | ||
<syntaxhighlight lang="nasal"> | |||
# [CX, CY] center point | |||
var start = -40; | |||
canvas.draw.arc(myGroup, radius, [CX, CY], start, start+190).setColor(COLORS["red"]); | |||
start += 90; | |||
canvas.draw.arc(myGroup, radius, [CX, CY], start, start+270).setColor(COLORS["green"]); | |||
start += 90; | |||
canvas.draw.arc(myGroup, radius, [CX, CY], start, start+190).setColor(COLORS["blue"]); | |||
</syntaxhighlight> | |||
=== rectange() === | === rectange() === | ||
Line 74: | Line 85: | ||
=== deltoid() === | === deltoid() === | ||
[[File:Canvas-draw-shapes01.png|thumbnail|right]] | |||
deltoid (cgroup, dx, dy1, dy2, x = 0, y = 0) | deltoid (cgroup, dx, dy1, dy2, x = 0, y = 0) | ||
Line 85: | Line 97: | ||
'''x''', '''y''' position of tip | '''x''', '''y''' position of tip | ||
<syntaxhighlight lang="nasal"> | |||
var dx = 40; | |||
#rhombus draws around a center point while deltoid uses x,y for tip point | |||
shapes["rhombus1"] = canvas.draw.rhombus(group, dx, 2*dx, 5 + dx/2, CY) | |||
.setColor(COLORS["cyan"]); | |||
# width = 40, height = 25 + 50; | |||
shapes["deltoid1"] = canvas.draw.deltoid(group, dx, 25, 50, 2*dx, CY) | |||
.setColor(COLORS["magenta"]); | |||
# y2 < 0 results in arrow head | |||
canvas.draw.deltoid(group, dx, 2*dx, -dx, 4*dx, CY) | |||
.setColor(COLORS["yellow"]); | |||
# y2 = 0 results in triangle | |||
canvas.draw.deltoid(group, dx, 2*dx, 0, 6*dx, CY) | |||
.setColor(COLORS["green"]); | |||
# y2 < 0 and |y2| > y1 results in arrowhead with tip above baseline | |||
canvas.draw.deltoid(group, dx, 1.5*dx, -2.5*dx, 8*dx, CY) | |||
.setColor(COLORS["red"]); | |||
</syntaxhighlight> | |||
=== rhombus() / diamond() === | === rhombus() / diamond() === | ||
rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0) | rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0) | ||
draws a diamond | draws a diamond around ['''center_x''', '''center_y'''] | ||
(first element from left in sample image above) | |||
'''dx''' width | '''dx''' width | ||
'''dy''' height | '''dy''' height | ||
=== grid() === | === grid() === | ||
[[File:Canvas-draw-grids01.png|thumbnail|right]] | |||
Draw horizontal and verical lines. Two signatures are available | Draw horizontal and verical lines. Two signatures are available | ||
Line 109: | Line 148: | ||
'''border''' optional boolean, draw lines at sizeX and sizeY, true by default. | '''border''' optional boolean, draw lines at sizeX and sizeY, true by default. | ||
<syntaxhighlight lang="nasal"> | |||
var group = myRoot.createChild("group", "grid_scales"); | |||
#-- grid test -- | |||
canvas.draw.grid(group, [62, 55], 10, 10, 0).setTranslation(10, 100); | |||
canvas.draw.grid(group, [62, 55], 10, 10, 1).setTranslation(100, 100); | |||
canvas.draw.grid(group, 4, 4, 20, 10, 0).setTranslation(10, 200); | |||
canvas.draw.grid(group, 4, 4, 20, 10, 1).setTranslation(100, 200); | |||
</syntaxhighlight> | |||
== Marks == | == Marks == | ||
Line 114: | Line 162: | ||
=== marksLinear() === | === marksLinear() === | ||
[[File:Canvas-draw-scales01.png|thumb|linear marks (horizontal)|right]] | |||
[[File:Canvas-draw-scales02.png|thumb|linear marks (vertical)|right]] | |||
marksLinear(cgroup, orientation, num_marks, interval, style) | marksLinear(cgroup, orientation, num_marks, interval, style) | ||
Line 125: | Line 175: | ||
'''style''' marksStyle hash with more parameters | '''style''' marksStyle hash with more parameters | ||
<syntaxhighlight lang="nasal"> | |||
#-- marks for linear scales -- | |||
var group = myRoot.createChild("group", "marks"); | |||
var style = canvas.draw.marksStyle.new() | |||
.setBaseline(1) | |||
.setMarkLength(0.8) # 0.8 * interval | |||
.setSubdivisions(2); | |||
canvas.draw.marksLinear(group, "right", 5, 30, style).setTranslation(CX, 150) | |||
.setColor(COLORS["green"]); | |||
style.setSubdivisions(1); | |||
style.setMarkOffset(style.MARK_LEFT); # left/up | |||
canvas.draw.marksLinear(group, "v", 5, 20, style).setTranslation(50, CY) | |||
.setColor(COLORS["red"]); | |||
canvas.draw.marksLinear(group, "h", 4, 20, style).setTranslation(CX, 30) | |||
.setColor(COLORS["red"]); | |||
style.setMarkOffset(style.MARK_CENTER); #center | |||
canvas.draw.marksLinear(group, "down", 5, 20, style).setTranslation(100, CY) | |||
.setColor(COLORS["green"]); | |||
canvas.draw.marksLinear(group, "left", 4, 20, style).setTranslation(CX, 70) | |||
.setColor(COLORS["green"]); | |||
style.setMarkOffset(style.MARK_RIGHT); #right / down | |||
canvas.draw.marksLinear(group, "up", 5, 20, style).setTranslation(150, CY) | |||
.setColor(COLORS["blue"]); | |||
canvas.draw.marksLinear(group, "r", 4, 20, style).setTranslation(CX, 110) | |||
.setColor(COLORS["blue"]); | |||
</syntaxhighlight> | |||
=== marksCircular() === | === marksCircular() === | ||
[[File:Canvas-draw-scales03.png|thumb|circular marks|right]] | |||
marksCircular(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil) | marksCircular(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil) | ||
Line 138: | Line 218: | ||
'''phi_stop''' position of last mark in degree (default 360) | '''phi_stop''' position of last mark in degree (default 360) | ||
<syntaxhighlight lang="nasal"> | |||
#-- marks on arc / circle -- | |||
style.setMarkLength(0.1); | |||
style.setMarkOffset(style.MARK_IN); # pointing to center | |||
style.setSubdivisions(2); | |||
style.setBaseline(1); | |||
var radius = 150; | |||
var interval = 30; | |||
canvas.draw.marksCircular(group, radius, interval, 30, 120, style) | |||
.setTranslation(CX,CY); | |||
style.setMarkOffset(style.MARK_OUT); # pointing outside | |||
style.setSubdivisions(1); | |||
radius = 90; | |||
interval = 10; | |||
canvas.draw.marksCircular(group, radius, interval, 0, 360, style) | |||
.setTranslation(CX,CY) | |||
.setColor(COLORS["cyan"]); | |||
</syntaxhighlight> | |||
== draw.style == | == draw.style == |
edits