Canvas draw library: Difference between revisions

Jump to navigation Jump to search

Canvas draw library (view source)

Revision as of 14:00, 23 December 2018

4,112 bytes added ,  23 December 2018
no edit summary
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
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 ==
Jsb
277

edits

Retrieved from "https://wiki.flightgear.org/Special:MobileDiff/116884"

Navigation menu