# # canvas.draw library # created 12/2018 by jsb # based on plot2D.nas from the oscilloscope add-on by R. Leibner # # Contains functions to draw path elements on an existing canvas group. # - basic shapes # - grids # - scale marks # # Basic shapes: # These are macros calling existing API command for path elements. # They return a path element, no styling done. You can easily do by passing # the returned element to other existing functions like setColor, e.g. # var myCircle = canvas.circle(myCanvasGroup, 10, 30, 30).setColor(myColor) # # Grids: # draw horizontal and vertical lines # from the Oscilloscope add-on by rleibner with a few modifications # # Scale marks: # Draw equidistant lines ("marker", "ticks") perpendicular to a baseline. # Baseline can be a horizontal or vertical line or a part of a circle. # This is a building block for compass rose and tapes. # var draw = { # draw line; from and to must be vectors [x,y] line: func(cgroup, from, to) { var path = cgroup.createChild("path", "line"); return path.moveTo(from[0], from[1]).lineTo(to[0], to[1]); }, # draw horizontal line; # from: optional, vector, defaults to [0,0] # or scalar hline: func(cgroup, length, from = nil) { if (from == nil) { to = [length, 0]; from = [0,0]; } elsif (typeof(from) == "scalar") { to = [num(from) + length, 0]; from = [num(from) ,0]; } else to = [from[0] + length, from[1]]; me.line(cgroup, from, to); }, # draw vertical line; # from: optional, vector, defaults to [0,0] # or scalar vline: func(cgroup, length, from = nil) { if (from == nil) { to = [0, length]; from = [0,0]; } elsif (typeof(from) == "scalar") { to = [0, num(from) + length]; from = [0, num(from)]; } else to = [from[0], from[1] + length]; me.line(cgroup, from, to); }, # if center_x is given as vector, its first two elements define the center # and center_y is ignored circle: func(cgroup, radius, center_x = nil, center_y = nil) { var path = cgroup.createChild("path", "circle"); return path.circle(radius, center_x, center_y); }, # if center_x is given as vector, its first two elements define the center # and center_y is ignored ellipse: func(cgroup, radius_x, radius_y, center_x = nil, center_y = nil) { var path = cgroup.createChild("path", "ellipse"); return path.ellipse(radius_x, radius_y, center_x, center_y); }, # draw part of a circle # radius as integer (for circle) or [rx,ry] (for ellipse) in pixels. # center vector [x,y] # from_deg begin of arc in degree (0 = north, increasing clockwise) # to_deg end of arc arc: func(cgroup, radius, center, from_deg = nil, to_deg = nil) { if (from_deg == nil) return me.circle(radius, center); var path = cgroup.createChild("path", "arc"); from_deg *= D2R; to_deg *= D2R; var (rx, ry) = (typeof(radius) == "vector") ? [radius[0], radius[1]] : [radius, radius]; var (fs, fc) = [math.sin(from_deg), math.cos(from_deg)]; var dx = (math.sin(to_deg) - fs) * rx; var dy = (math.cos(to_deg) - fc) * ry; path.moveTo(center[0] + rx*fs, center[1] - ry*fc); if(abs(to_deg - from_deg) > 180*D2R) { path.arcLargeCW(rx, ry, 0, dx, -dy); } else { path.arcSmallCW(rx, ry, 0, dx, -dy); } return path; }, # x, y is top, left corner rectangle: func(cgroup, width, height, x = 0, y = 0, rounded = nil) { var path = cgroup.createChild("path", "rectangle"); return path.rect(x, y, width, height, {"border-radius": rounded}); }, # x, y is top, left corner square: func(cgroup, length, center_x = 0, center_y = 0, cfg = nil) { var path = cgroup.createChild("path", "square"); return path.square(center_x, center_y, length, cfg = nil); }, # deltoid draws a kite (dy1 > 0 and dy2 > 0) or a arrow head (dy2 < 0) # dx = width # dy1 = height of "upper" triangle # dy2 = height of "lower" triangle, < 0 draws an arrow head # x, y = position of tip deltoid: func (cgroup, dx, dy1, dy2, x = 0, y = 0) { var path = cgroup.createChild("path", "deltoid"); path.moveTo(x, y) .line(-dx/2, dy1) .line(dx/2, dy2) .line(dx/2, -dy2) .close(); return path; }, # draw a "diamond" # dx: width # dy: height rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0) { return draw.deltoid(cgroup, dx, dy/2, dy/2, center_x, center_y - dy/2); }, }; #aliases draw.diamond = draw.rhombus; draw.colors = { white: [1, 1, 1], grey50: [0.5, 0.5, 0.5], grey25: [0.25, 0.25, 0.25], black: [0, 0, 0], red: [1, 0, 0], green: [0, 1, 0], blue: [0, 0, 1], cyan: [0, 1, 1], magenta: [1, 0, 1], yellow: [1, 1, 0], orange: [1, 0.5, 0], }; #base class for styles draw.style = { new: func() { var obj = { parents: [draw.style], _color: [255, 255, 255, 1], _color_fill: nil, _stroke_width: 1, }; return obj; }, #set value of existing(!) key set: func(key, value) { if (contains(me, key)) { me[key] = value; return me; } return nil; }, get: func(key) { return me[key]; }, setColor: func() { me._color = arg; return me; }, getColor: func() { return me._color; }, setColorFill: func() { me._color_fill = arg; return me; }, setStrokeLineWidth: func() { me._stroke_width = arg; return me; }, }; # # marksStyle - parameter set for draw.marks* # Interpretation depends on the draw function used. In general, marks are # lines drawn perpendicular to a baseline in certain intervals. 'Big' and # 'small' marks are supported by means of 'subdivisions'. # Some values are expressed as percentage to allow easy scaling. # Again: Interpretation depends on the draw function using this style. # draw.marksStyle = { # constants to align marks relative to baseline MARK_LEFT: -1, MARK_UP: -1, MARK_CENTER: 0, MARK_RIGHT: 1, MARK_DOWN: 1, MARK_IN: -1, # from radius to center of circle MARK_OUT: 1, # from radius to outside new: func() { var obj = { parents: [draw.marksStyle, draw.style.new()], baseline_width: 0, # stroke of baseline mark_length: 0.8, # length of a division marker in %interval or %radius mark_offset: 0, # in %mark_length, see setMarkLength below mark_width: 1, # in pixel subdivisions: 0, # number of smaller marks between to marks subdiv_length: 0.5, # in %mark_length }; return obj; }, setBaselineWidth: func(value) { me.baseline_width = num(value) or 0; return me; }, setMarkLength: func(value) { me.mark_length = num(value) or 1; return me; }, # position of mark relative to baseline, call this with MARK_* defined above # -1 = left, 0 = center, 1 = right setMarkOffset: func(value) { if (num(value) == nil) return nil; me.mark_offset = value; return me; }, setMarkWidth: func(value) { me.mark_width = num(value) or 1; return me; }, setSubdivisions: func(value) { me.subdivisions = int(value) or 0; return me; }, setSubdivisionLength: func(value) { me.subdiv_length = num(value) or 0.5; return me; }, }; # draw.marksLinear: draw marks for a linear scale on a canvas group, e.g. speed tape # mark lines are draws perpendicular to baseline # orientation of baseline; "up", "down", "left", "right" # num_marks number of marks to draw # interval distance between marks (pixel) # style marksStyle hash with more parameters draw.marksLinear = func(cgroup, orientation, num_marks, interval, style) { if (!isa(style, draw.marksStyle)) { printlog("alert", "draw.marks: invalid style argument."); return nil; } orientation = chr(string.tolower(orientation[0])); if (orientation == "v") orientation = "d"; if (orientation == "h") orientation = "r"; var marks = cgroup.createChild("path", "marks"); if (style.baseline_width > 0) { var length = interval * (num_marks - 1); if (orientation == "d") { marks.vert(length); } elsif(orientation == "u") { marks.vert(-length); } elsif(orientation == "r") { marks.horiz(length); } elsif(orientation == "l") { marks.horiz(-length); } } var mark_length = interval * style.mark_length; if (style.subdivisions > 0) { interval /= (style.subdivisions + 1); var subdiv_length = mark_length * style.subdiv_length; }; marks.setColor(style.getColor()); var offset0 = 0.5 * style.mark_offset - 0.5; for (var i = 0; i < num_marks; i += 1) { for (var j = 0; j <= style.subdivisions; j += 1) { var length = (j == 0) ? mark_length : subdiv_length; var translation = interval * (i*(style.subdivisions + 1) + j); var offset = offset0 * length; if (orientation == "d") { marks.moveTo(offset, translation) .horiz(length); } elsif (orientation == "u") { marks.moveTo(offset, -translation) .horiz(length); } elsif (orientation == "r") { marks.moveTo(translation, offset) .vert(length); } elsif (orientation == "l") { marks.moveTo(-translation, offset) .vert(length); } } } while (j) { marks.pop_back(); j -= 1; } return marks; } # radius of baseline (circle) # interval distance of marks in degree # phi_start position of first mark in degree (default 0 = north) # phi_stop position of last mark in degree (default 360) draw.marksCircular = func(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil) { if (style == nil) { style = draw.marksStyle.new(); } if (!isa(style, draw.marksStyle)) { printlog("info", "draw.marksCircular: invalid style argument"); return nil; } # normalize while (phi_start >= 360) { phi_start -= 360; } while (phi_stop > 360) { phi_stop -= 360; } if (phi_start > phi_stop) { phi_stop += 360; } if (style.baseline_width > 0) { var marks = draw.arc(cgroup, radius, [0,0], phi_start, phi_stop) .set("id", "marksCircular") .setColor(style.getColor()); } else { var marks = cgroup.createChild("path", "marksCircular").setColor(style.getColor()); } var mark_length = style.mark_length * radius; var subd_length = style.subdiv_length * mark_length; interval *= D2R; phi_start *= D2R; phi_stop *= D2R; var phi_s = interval / (style.subdivisions + 1); var x = y = l = 0; var offset0 = 0.5 * style.mark_offset - 0.5; for (var phi = phi_start; phi <= phi_stop; phi += interval) { for (var j = 0; j <= style.subdivisions; j += 1) { var p = phi + j * phi_s; #print(p*R2D); x = math.sin(p); y = -math.cos(p); l = (j == 0) ? mark_length : subd_length; r = radius + offset0 * l; marks.moveTo(x * r, y * r) .line(x * l, y * l); } } while (j) { marks.pop_back(); j -= 1; } return marks; } # draw.grid # 1) (cgroup, [sizeX, sizeY], dx, dy, border = 1) # 2) (cgroup, nx, ny, dx, dy, border = 1) # size [width, height] in pixels. # nx, ny number of lines in x/y direction # dx tiles width in pixels. # dy tiles height in pixels. # border optional as boolean, True by default. draw.grid = func(cgroup) { var i = 0; var (s, n) = ([0, 0], []); if (typeof(arg[i]) == "vector") { s = arg[i]; i += 1; } else { var n = [arg[i], arg[i + 1]]; i += 2; } var dx = arg[i]; i += 1; var dy = dx; var border = 1; if (size(arg) - 1 >= i) { dy = arg[i]; i += 1; } if (size(arg) - 1 >= i) { border = arg[i]; } if (size(n) == 2) { s[0] = n[0] * dx - 1; s[1] = n[1] * dy - 1; } #print("size: ", s[0], " ", s[1], " d:", dx, ", ", dy, " b:", border); var grid = cgroup.createChild("path", "grid").setColor([255, 255, 255, 1]); var (x0, y0) = border ? [0, 0] : [dx, dy]; for (var x = x0; x <= s[0]; x += dx) { grid.moveTo(x, 0).vertTo(s[1]); } for (var y = y0; y <= s[1]; y += dy) { grid.moveTo(0, y).horizTo(s[0]); } if (border) { grid.moveTo(s[0], 0).vertTo(s[1]).horizTo(0); } return grid; } draw.arrow = func(cgroup, length, origin_center=0) { #var path = cgroup.createChild("path", "arrow"); var tip_size = length * 0.1; var offset = (origin_center) ? -length/2 : 0; var arrow = draw.deltoid(cgroup, tip_size, tip_size, 0, 0, offset); #if (offset) { arrow.moveTo(0, offset); } arrow.line(0,length); return arrow; }