Canvas (canvas)

Canvas Module

Namespace: global
Assembly: canvas.dll

Canvas for drawing drawing simple 2D graphics, including features simple user-interaction

Types

Type	Description
Event	Represents one of the events: Key, DownArrow, UpArrow, LeftArrow, RightArow, Return, TimerTick, MouseButtonDown, MouseButtonUp, and MouseMotion.
Font	A font defined by a font name and its size in dots-per-inch (dpi).
FontFamily	A collection of font variations specified by the family name.
Picture	A picture.
Position
PrimitiveTree	A tree of graphics primitives, define as a tree of graphics primitives.
color	A color define as 4 values red, green, blue, and alpha.

Functions and values

Function or value	Description
`Bottom` Full Usage: `Bottom` Returns: `Position`	An alignh position-value for aligning boxes along their bottom edge. Returns: `Position`
`Center` Full Usage: `Center` Returns: `Position`	An alignh and alignv position-value for aligning boxes along their center. Returns: `Position`
`Left` Full Usage: `Left` Returns: `Position`	An alignv position-value for aligning boxes along their left edge. Returns: `Position`
`Right` Full Usage: `Right` Returns: `Position`	An alignv position-value for aligning boxes along their right edge. Returns: `Position`
`Top` Full Usage: `Top` Returns: `Position`	An alignh position-value for aligning boxes along their top edge. Returns: `Position`
`alignH pic1 pos pic2` Full Usage: `alignH pic1 pos pic2` Parameters: pic1 : `PrimitiveTree` - The first graphic primitive tree to be aligned. pos : `Position` - One of Top, Center, or Bottom, defining how pic1 and pic2 are to be aligned. pic2 : `PrimitiveTree` - The second graphic primitive tree to be aligned. Returns: `PrimitiveTree` A new graphic primitive tree object representing the two graphic primitive trees aligned horizontally at the specified position.	Aligns two graphic primitive trees horizontally at a specific position. The alignH function joins two trees where pic2 is translated such that its boundary box's left edge is aligned with pic1's boundary box's right edge. When pos=Bottom then the boxes are align along their edge with lowest x-value, i.e., closest to the top edge of the image. When pos=Center then pic2's midpoint in the y-direction is aligned with pic1's midpoint in the y-direction. When pos=Top then pic2's boundary box's highest x-value is aligned with pic1's boundary box's highest x-value. The following code-example: `let box1 = rectangle goldenrod 1.0 20.0 80.0 let box2 = rectangle yellow 1.0 30.0 30.0 alignH box1 Top box2` val box1: obj val box2: obj represents a new tree of a box from (0,0) to (20,80) in goldenrod and another (20,50) to (50,80)in yellow. The bounding box is the enclosing box in this case from (0,0) to (50,80). pic1 : `PrimitiveTree` The first graphic primitive tree to be aligned. pos : `Position` One of Top, Center, or Bottom, defining how pic1 and pic2 are to be aligned. pic2 : `PrimitiveTree` The second graphic primitive tree to be aligned. Returns: `PrimitiveTree` A new graphic primitive tree object representing the two graphic primitive trees aligned horizontally at the specified position.
`alignV pic1 pos pic2` Full Usage: `alignV pic1 pos pic2` Parameters: pic1 : `PrimitiveTree` - The first graphic primitive tree to be aligned. pos : `Position` - One of Left, Center, or Right, defining how pic1 and pic2 are to be aligned. pic2 : `PrimitiveTree` - The second graphic primitive tree to be aligned. Returns: `PrimitiveTree` A new graphic primitive tree object representing the two graphic primitive trees aligned vertically at the specified position.	Aligns two graphic primitive trees vertically at a specific position. The alignV function joins two trees where pic2 is translated such that its boundary box's bottom edge is aligned with pic1's boundary box's top edge. When pos=Left then the boxes are align along their edge with lowest y-value, i.e., closest to the left edge of the image. When pos=Center then pic2's midpoint in the x-direction is aligned with pic1's midpoint in the x-direction. When pos=Right then pic2's boundary box's highest y-value is aligned with pic1's boundary box's highest y-value. The following code-example: `let box1 = rectangle goldenrod 1.0 20.0 80.0 let box2 = rectangle yellow 1.0 30.0 30.0 alignV box1 Right box2` val box1: obj val box2: obj represents a new tree of a box from (0,0) to (20,80) in goldenrod and another (-10,80) to (20,100)in yellow. The bounding box is the enclosing box in this case from (-10,0) to (20,100). pic1 : `PrimitiveTree` The first graphic primitive tree to be aligned. pos : `Position` One of Left, Center, or Right, defining how pic1 and pic2 are to be aligned. pic2 : `PrimitiveTree` The second graphic primitive tree to be aligned. Returns: `PrimitiveTree` A new graphic primitive tree object representing the two graphic primitive trees aligned vertically at the specified position.
`animateToFile width height frameDelay repeatCount filePath drawLst` Full Usage: `animateToFile width height frameDelay repeatCount filePath drawLst` Parameters: width : `int` - The width of each frame in pixels. height : `int` frameDelay : `int` - The delay between frames in the animation in milliseconds. repeatCount : `int` - The number of times the animation should repeat. Use 0 for infinite looping. filePath : `string` - The file path where the animated GIF will be saved. drawLst : `Picture list` - The list of picture objects to be drawn as frames in the animation.	Draws a list of pictures generated by make or explain to an animated GIF file with the specified width, height, frame delay, and repeat count. The functions renders a list of Pictures to a file as an animated gif. For example, `let w,h = 256,256 let bck = filledRectangle black w h let tree (i:float) : PrimitiveTree = onto (ellipse darkCyan 2.0 85.0 64.0 \|> translate i i) bck let sequence = List.map (fun j -> make (tree j)) [0.0 .. 128.0] let frameDelay = 10 let repeatCount = 5 animateToFile 256 256 frameDelay repeatCount "sample.gif" sequence` val w: int val h: int val bck: obj val tree: i: float -> 'a val i: float Multiple items val float: value: 'T -> float (requires member op_Explicit) -------------------- type float = System.Double -------------------- type float<'Measure> = float val sequence: obj list Multiple items module List from Microsoft.FSharp.Collections -------------------- type List<'T> = \| op_Nil \| op_ColonColon of Head: 'T * Tail: 'T list interface IReadOnlyList<'T> interface IReadOnlyCollection<'T> interface IEnumerable interface IEnumerable<'T> member GetReverseIndex: rank: int * offset: int -> int member GetSlice: startIndex: int option * endIndex: int option -> 'T list static member Cons: head: 'T * tail: 'T list -> 'T list member Head: 'T member IsEmpty: bool member Item: index: int -> 'T with get ... val map: mapping: ('T -> 'U) -> list: 'T list -> 'U list val j: float val frameDelay: int val repeatCount: int makes a list of pictures of a primitive tree translated for a number of steps and saves the sequence as an animated gif. In the example, the onto command is used to ensure that each frame is shown on a black background. width : `int` The width of each frame in pixels. height : `int` frameDelay : `int` The delay between frames in the animation in milliseconds. repeatCount : `int` The number of times the animation should repeat. Use 0 for infinite looping. filePath : `string` The file path where the animated GIF will be saved. drawLst : `Picture list` The list of picture objects to be drawn as frames in the animation.
`arc c sw center rx ry start sweep` Full Usage: `arc c sw center rx ry start sweep` Parameters: c : `color` - The color of the arc. sw : `float` - The stroke width of the arc. center : `Point` - The center point of the ellipse. rx : `float` - The horizontal radius of the ellipse. ry : `float` - The vertical radius of the ellipse. start : `float` - The starting angle of the arc in degrees. sweep : `float` - The sweep angle of the arc in degrees. Returns: `PrimitiveTree` A primitive tree representing the arc.	Draws an elliptical arc. The arc function represents part of an ellipse. It takes a color, a line width, a center (rx, ry), a start angle in radians, and the span of degrees in radians to draw from start. The drawing direction takes it origin along the x-axis and increases in angle clockwise. Example of code generating an arc tree is: `let col = goldenrod let strokeWidth = 3.0 arc col strokeWidth (128.0,128.0) 64.0 32.0 (-45.0System.Math.PI/180.0) System.Math.PI` val col: obj val strokeWidth: float namespace System type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ... <summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary> field System.Math.PI: float = 3.14159265359 which generates a PrimitiveTree representing an arc curve from -45 degrees to 135 degrees with color goldenred and width 3.0. The bounding box is the same as the full ellipse. This may change in the future. c : `color` The color of the arc. sw : `float` The stroke width of the arc. center : `Point` The center point of the ellipse. rx : `float` The horizontal radius of the ellipse. ry : `float` The vertical radius of the ellipse. start : `float` The starting angle of the arc in degrees. sweep : `float` The sweep angle of the arc in degrees. Returns: `PrimitiveTree` A primitive tree representing the arc.
`cubicBezier c sw point1 point2 point3 point4` Full Usage: `cubicBezier c sw point1 point2 point3 point4` Parameters: c : `color` - The color of the curve. sw : `float` - The stroke width of the curve. point1 : `Point` - The first control point of the curve. point2 : `Point` - The second control point of the curve. point3 : `Point` - The third control point of the curve. point4 : `Point` - The fourth control point of the curve. Returns: `PrimitiveTree` A primitive tree representing the cubic Bezier curve.	Draws a cubic Bezier curve. The cubic bezier function represents a cubic bezier curve which takes 4 points, a color, and stroke width. The curve starts and ends in point index 0 and 3, and the line from index 0 to 1 gives the derivative at 0, while the line from index 2 to 3 gives the derivative at 3. Example of code generating an arc tree is: `let col = ivory let strokeWidth = 3.0 cubicBezier col strokeWidth (10.0,10.0) (12.0,10.0) (56.0,60.0) (70.0,70.0)` val col: obj val strokeWidth: float which generates a PrimitiveTree representing a bezier curve from (10.0,10.0) to (70.0, 70.0). The bounding box is the rectangle spanning the minimum and maximum values of all the x- and y-coordinates in the 4 points. c : `color` The color of the curve. sw : `float` The stroke width of the curve. point1 : `Point` The first control point of the curve. point2 : `Point` The second control point of the curve. point3 : `Point` The third control point of the curve. point4 : `Point` The fourth control point of the curve. Returns: `PrimitiveTree` A primitive tree representing the cubic Bezier curve.
`ellipse c sw rx ry` Full Usage: `ellipse c sw rx ry` Parameters: c : `color` - The color of the ellipse. sw : `float` - The stroke width of the ellipse. rx : `float` - The horizontal radius of the ellipse. ry : `float` - The vertical radius of the ellipse. Returns: `PrimitiveTree` A new graphic primitive tree object representing the ellipse.	Creates an ellipse with the specified radii and stroke width. The ellipse function represents an ellipse with center in 0,0, radius rx and ry along the x- and y-axis, and a color and strokeWidth. Example of code generating an ellipse tree is: `let col = ivory let strokeWidth = 3.0 ellipse col strokeWidth 10.0 20.0` val col: obj val strokeWidth: float which generates a PrimitiveTree representing an ellipse of radii 10.0 and 20.0 with a line drawn in ivory and which is 3 wide. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20). c : `color` The color of the ellipse. sw : `float` The stroke width of the ellipse. rx : `float` The horizontal radius of the ellipse. ry : `float` The vertical radius of the ellipse. Returns: `PrimitiveTree` A new graphic primitive tree object representing the ellipse.
`emptyTree` Full Usage: `emptyTree` Returns: `PrimitiveTree`	An empty graphics primitive tree. Returns: `PrimitiveTree`
`explain p` Full Usage: `explain p` Parameters: p : `PrimitiveTree` - The graphic primitive tree object to be explained. Returns: `Picture` A new Picture object representing a visual explanation of the given graphic primitive tree.	Provides a visual explanation of a graphic primitive tree object. The functions make and explain both converts a primitive tree to a picture, which can be rendered. For example, `let tree = ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0 let picture = explain tree renderToFile 256 256 "sample.tif" picture` val tree: obj val picture: obj makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file. In contrast to make, explain adds bounding boxes of the graphics primitives in random colors. This is useful for debugging composition expressions. p : `PrimitiveTree` The graphic primitive tree object to be explained. Returns: `Picture` A new Picture object representing a visual explanation of the given graphic primitive tree.
`filledArc c center rx ry start sweep` Full Usage: `filledArc c center rx ry start sweep` Parameters: c : `color` - The fill color of the arc. center : `Point` - The center point of the ellipse. rx : `float` - The horizontal radius of the ellipse. ry : `float` - The vertical radius of the ellipse. start : `float` - The starting angle of the arc in degrees. sweep : `float` - The sweep angle of the arc in degrees. Returns: `PrimitiveTree` A primitive tree representing the filled arc.	Draws a filled elliptical arc. The arc function represents part of a filled ellipse. It takes a color, a center (rx, ry), a start angle in radians, and the span of degrees in radians to draw from start. The drawing direction takes it origin along the x-axis and increases in angle clockwise. Example of code generating an arc tree is: `let col = goldenrod let strokeWidth = 3.0 filledArc col (128.0,128.0) 64.0 32.0 (-45.0System.Math.PI/180.0) System.Math.PI` val col: obj val strokeWidth: float namespace System type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ... <summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary> field System.Math.PI: float = 3.14159265359 which generates a PrimitiveTree representing an filled arc from -45 degrees to 135 degrees. The bounding box is the same as the full ellipse. This may change in the future. c : `color` The fill color of the arc. center : `Point` The center point of the ellipse. rx : `float` The horizontal radius of the ellipse. ry : `float` The vertical radius of the ellipse. start : `float` The starting angle of the arc in degrees. sweep : `float` The sweep angle of the arc in degrees. Returns: `PrimitiveTree` A primitive tree representing the filled arc.
`filledCubicBezier c point1 point2 point3 point4` Full Usage: `filledCubicBezier c point1 point2 point3 point4` Parameters: c : `color` - The fill color of the curve. point1 : `Point` - The first control point of the curve. point2 : `Point` - The second control point of the curve. point3 : `Point` - The third control point of the curve. point4 : `Point` - The fourth control point of the curve. Returns: `PrimitiveTree` A primitive tree representing the filled cubic Bezier curve.	Draws a filled cubic Bezier curve. The filled cubic bezier function represents a cubic bezier curve which takes 4 points, and a color. The curve starts and ends in point index 0 and 3, and the line from index 0 to 1 gives the derivative at 0, while the line from index 2 to 3 gives the derivative at 3. The fill area is between the curve and the straight line between point 0 and 3. Example of code generating an arc tree is: `let col = ivory filledCubicBezier col (10.0,10.0) (12.0,10.0) (56.0,60.0) (70.0,70.0)` val col: obj which generates a PrimitiveTree representing a filled bezier curve from (10.0,10.0) to (70.0, 70.0). The bounding box is the rectangle spanning the minimum and maximum values of all the x- and y-coordinates in the 4 points. c : `color` The fill color of the curve. point1 : `Point` The first control point of the curve. point2 : `Point` The second control point of the curve. point3 : `Point` The third control point of the curve. point4 : `Point` The fourth control point of the curve. Returns: `PrimitiveTree` A primitive tree representing the filled cubic Bezier curve.
`filledEllipse c rx ry` Full Usage: `filledEllipse c rx ry` Parameters: c : `color` - The color of the ellipse. rx : `float` - The horizontal radius of the ellipse. ry : `float` - The vertical radius of the ellipse. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled ellipse.	Creates a filled ellipse with the specified radii. The filled ellipse function represents an ellipse with center in 0,0, radius rx and ry along the x- and y-axis, and a color and strokeWidth. Example of code generating a filled ellipse tree is: `let col = ivory filledEllipse ivory 10.0 20.0` val col: obj which generates a PrimitiveTree representing an filled ellipse of radii 10.0 and 20.0 in ivory. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20). c : `color` The color of the ellipse. rx : `float` The horizontal radius of the ellipse. ry : `float` The vertical radius of the ellipse. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled ellipse.
`filledPolygon c lst` Full Usage: `filledPolygon c lst` Parameters: c : `color` - The color of the polygon. lst : `(float * float) list` - The list of vertices of the polygon. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled polygon.	Creates a filled polygon with the specified vertices. The filledPolygon function takes a color, and list of pairs of x and y coordinates and makes a PrimitiveTree representing a polygon. Example of code generating a filled polygon tree is: `let col = darkOliveGreen filledPolygon col [(0.0,0.0);(10.0,80.0);(20.0,40.0)]` val col: obj which generates a PrimitiveTree representing a closed polygon which is filled with the color darkOliveGreen. Note that a filledPolygon with its outline marked in another color can be achieved by using this function together with the onto and the piecewiseAffine functions. The bounding box is the smallest axis aligned rectangle enclosing the shape which in this case is denoted by the corners (0.0,0.0) and (20.0,80.0). c : `color` The color of the polygon. lst : `(float * float) list` The list of vertices of the polygon. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled polygon.
`filledRectangle c w h` Full Usage: `filledRectangle c w h` Parameters: c : `color` - The color of the rectangle. w : `float` - The width of the rectangle. h : `float` - The height of the rectangle. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled rectangle.	Creates a filled rectangle with the specified width and height. The filledRectangle function takes a color, a width, and a height and makes a PrimitiveTree representing a rectangle, whose lower left corner is (0.0,0.0) and upper right corner is (w,h). Example of code generating a rectangle tree is: `let col = goldenrod filledRectangle col 20.0 80.0` val col: obj which generates a PrimitiveTree representing a rectangle filled with the color goldenrod. The bounding box is the same as the rectangle which in this case is (0.0,0.0) and (20.0,80.0). Note that a filledRectangle with its outline marked in another color can be achieved by using this function together with the onto and the rectangle functions. c : `color` The color of the rectangle. w : `float` The width of the rectangle. h : `float` The height of the rectangle. Returns: `PrimitiveTree` A new graphic primitive tree object representing the filled rectangle.
`fromRgb r g b` Full Usage: `fromRgb r g b` Parameters: r : `int` - The amount of red. g : `int` - The amount of green. b : `int` - The amount of blue. Returns: `color` A color.	Generate a non-transparent color. The fromRgba produces the color representation of the given red, green, blue. All values are en the range 0 to 255 and in the example: `fromRgba 255 0 0` the resulting color is (non-transparent) red. r : `int` The amount of red. g : `int` The amount of green. b : `int` The amount of blue. Returns: `color` A color.
`fromRgba r g b a` Full Usage: `fromRgba r g b a` Parameters: r : `int` - The amount of red. g : `int` - The amount of green. b : `int` - The amount of blue. a : `int` - The degree to which the color is transparent. Returns: `color` A color.	Generate a color. The fromRgba produces the color representation of the given red, green, blue, and alpha values. All values are en the range 0 to 255 and in the example: `fromRgba 255 0 0 128` the resulting color is semi-transparent red. r : `int` The amount of red. g : `int` The amount of green. b : `int` The amount of blue. a : `int` The degree to which the color is transparent. Returns: `color` A color.
`getBoundingBox p` Full Usage: `getBoundingBox p` Parameters: p : `PrimitiveTree` - The graphic primitive tree for which to get the size. Returns: `Rectangle` The bounding box of the tree as x1,y1,x2,y2 where x2>x1 and y2>y1.	Retrieves the bounding box of a given graphic primitive tree. p : `PrimitiveTree` The graphic primitive tree for which to get the size. Returns: `Rectangle` The bounding box of the tree as x1,y1,x2,y2 where x2>x1 and y2>y1.
`getFamily name` Full Usage: `getFamily name` Parameters: name : `string` - The name of the font family to retrieve. Returns: `FontFamily` The FontFamily corresponding to the specified name.	Retrieves a FontFamily of a given name. name : `string` The name of the font family to retrieve. Returns: `FontFamily` The FontFamily corresponding to the specified name.
`getSize rect` Full Usage: `getSize rect` Parameters: rect : `Rectangle` - The bounding box as a rectangle x1,y1,x2,y2 where x2>x1 and y2>y1. Returns: `Size` The width and height of the bounding box.	Converts a rectangle into a size. rect : `Rectangle` The bounding box as a rectangle x1,y1,x2,y2 where x2>x1 and y2>y1. Returns: `Size` The width and height of the bounding box.
`interact t w h interval draw react s` Full Usage: `interact t w h interval draw react s` Parameters: t : `string` - The title of the application window. w : `int` - The width of the application window in pixels. h : `int` - The height of the application window in pixels. interval : `int option` - An optional interval for the timer in milliseconds. draw : `'s -> Picture` - A function that takes the current state and returns a Picture object representing the current visual state of the application. react : `'s -> Event -> 's option` - A function that takes the current state and an Event object and returns an optional new state, allowing the application to react to events. s : `'s` - The initial state of the application.	Runs an application with a timer, defining the drawing and reaction functions. The interact function can render still images in a window, show animations in a window, and to interact with the user via the keyboard and the mouse. For example, `let tree = ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0 let draw _ = make tree let react _ _ = None interact "Render an image" 256 256 None draw react 0` val tree: obj val draw: 'a -> 'b val react: 'a -> 'b -> 'c option union case Option.None: Option<'T> The main workhorses of `interact` are the draw and react functions, which communicate via a user-defined state value. In the above example, the state value is implicitly defined as an integer, since the last argument of interact is of integer type, but both draw and react ignore the state. To make an animation with interact, the react function must react on TimerTicks. Consider the following example, `type state = float let tree (i:state) : PrimitiveTree = ellipse darkCyan 2.0 85.0 64.0 \|> translate i i let draw (j: state) : Picture = make (tree j) let react (j: state) (ev:Event) : state option = match ev with \| Event.TimerTick -> Some ((j+1.0)%128.0) \| _ -> None let interval = Some 100 let initialState = 0.0 interact "Render an image" 256 256 interval draw react initialState` type state = float Multiple items val float: value: 'T -> float (requires member op_Explicit) -------------------- type float = System.Double -------------------- type float<'Measure> = float val tree: i: state -> 'a val i: state val draw: j: state -> 'a val j: state val react: j: state -> ev: 'a -> state option val ev: 'a Multiple items module Event from Microsoft.FSharp.Control -------------------- type Event<'T> = new: unit -> Event<'T> member Trigger: arg: 'T -> unit member Publish: IEvent<'T> -------------------- type Event<'Delegate,'Args (requires delegate and 'Delegate :> Delegate and reference type)> = new: unit -> Event<'Delegate,'Args> member Trigger: sender: obj * args: 'Args -> unit member Publish: IEvent<'Delegate,'Args> -------------------- new: unit -> Event<'T> -------------------- new: unit -> Event<'Delegate,'Args> type 'T option = Option<'T> union case Option.Some: Value: 'T -> Option<'T> union case Option.None: Option<'T> val interval: int option val initialState: float Here, we define a state type as float, which is the value controlling what to draw. The draw function is then a function, which takes a state and produces a Picture in this case the make of an tree containing an ellipse. The react function is set to listen for TimerTick events. When one such event occurs, it returns the next value of the state wrapped in an option type (Some). Other events may happen, but they are all ignored by returning None. Note that there is no mutable value, which contains the present value of the state. Further, note that the draw function is called inside interact, whenever interact deems it necessary, such as when react has been called to produce a new value of the state. The function react is called when the following events occur: Key of char - when the user presses a regular key DownArrow - when the user presses the down arrow UpArrow - when the user presses the up arrow LeftArrow - when the user presses the left arrow RightArrow - when the user presses the right arrow Return - when the user presses the return key MouseButtonDown(x,y)- when the user presses the left mouse button MouseButtonUp(x,y) - when the user releases the left mouse button MouseMotion(x,y,relx,rely) - when the user moves the mouse TimerTick - when the requested time interval has passed Note that there is no guarantee that the exact interval has occurred between each TimerTick event, and depending on the computing system being used, there is a lower limit to how fast an event loop can be served. Finally, the state can be any value, and thus the system offers much flexibility in terms of the communication between the draw and the react function. However, since the programmer (and the user) are only indirectly in control of their communication, it may be useful to think of draw and react as isolated functions. E.g., a call by `interact` to `draw j` should produce a Picture for state `j` regardless of the previous picture or the possible next. Likewise, a call to `read j ev` should react to the situation specified by `j` and `ev` only, and the programmer should concentrate only on what the next event should be given said input. t : `string` The title of the application window. w : `int` The width of the application window in pixels. h : `int` The height of the application window in pixels. interval : `int option` An optional interval for the timer in milliseconds. draw : `'s -> Picture` A function that takes the current state and returns a Picture object representing the current visual state of the application. react : `'s -> Event -> 's option` A function that takes the current state and an Event object and returns an optional new state, allowing the application to react to events. s : `'s` The initial state of the application.
`make p` Full Usage: `make p` Parameters: p : `PrimitiveTree` - The graphic primitive tree object used to create the graphic primitive tree. Returns: `Picture` A new Picture object representing the given graphic primitive tree.	Creates a Picture object from a given graphic primitive tree. The functions make and explain both converts a primitive tree to a picture, which can be rendered. For example, `let tree = ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0 let picture = make tree renderToFile 256 256 "sample.tif" picture` val tree: obj val picture: obj makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file. p : `PrimitiveTree` The graphic primitive tree object used to create the graphic primitive tree. Returns: `Picture` A new Picture object representing the given graphic primitive tree.
`makeFont fam size` Full Usage: `makeFont fam size` Parameters: fam : `string` - The name of the font family to use. size : `float` - The size of the font. Returns: `Font` The newly created Font object.	Creates a Font object using the given family name and size. fam : `string` The name of the font family to use. size : `float` The size of the font. Returns: `Font` The newly created Font object.
`measureText f txt` Full Usage: `measureText f txt` Parameters: f : `Font` - The font used to render the text. txt : `string` - The text to measure. Returns: `float * float` A tuple representing the width and height of the measured text.	Measures the size of the given text when rendered with the specified font. f : `Font` The font used to render the text. txt : `string` The text to measure. Returns: `float * float` A tuple representing the width and height of the measured text.
`onto pic1 pic2` Full Usage: `onto pic1 pic2` Parameters: pic1 : `PrimitiveTree` - The first graphic primitive tree, which will be placed on top of the second. pic2 : `PrimitiveTree` - The second graphic primitive tree, over which the first graphic primitive tree will be placed. Returns: `PrimitiveTree` A new graphic primitive tree object representing the combined image with the first graphic primitive tree on top of the second.A new graphic primitive tree object representing the filled ellipse.	Places one graphic primitive tree on top of another. The onto function joins two trees where pic1 will be drawn on top of pic2. The following code-example: `let boundary = ellipse red 3.0 10.0 20.0 let ell = filledEllipse blue 10.0 20.0 onto boundary ell` val boundary: obj val ell: obj represents a tree of a filled ellipse in blue with its boundary on top in red and with a line thickness of 3. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20). pic1 : `PrimitiveTree` The first graphic primitive tree, which will be placed on top of the second. pic2 : `PrimitiveTree` The second graphic primitive tree, over which the first graphic primitive tree will be placed. Returns: `PrimitiveTree` A new graphic primitive tree object representing the combined image with the first graphic primitive tree on top of the second.A new graphic primitive tree object representing the filled ellipse.
`piecewiseAffine c sw lst` Full Usage: `piecewiseAffine c sw lst` Parameters: c : `color` - The color to be used. sw : `float` - The stroke width. lst : `(float * float) list` - The list of control points for the transformation. Returns: `PrimitiveTree` A new graphic primitive tree object representing the transformed graphic primitive tree.	Creates a piecewise affine transformation on a graphic primitive tree. The piecewiseAffine function takes a color, a stroke width, and list of pairs of x and y coordinates and makes a PrimitiveTree representing a piecewise affine curve also known as a piecewise linear curve. Note any smooth curve can be approximately arbitrarily well as piecewise affine curve when the coordinate pairs are sampled sufficiently closely along the smooth curve. Example of code generating a piecewise affine curve tree is: `let col = darkOliveGreen let strokeWidth = 2.0 piecewiseAffine col strokeWidth [(0.0,0.0);(10.0,80.0);(20.0,40.0);(0.0,0.0)]` val col: obj val strokeWidth: float which generates a PrimitiveTree representing a set of lines, colored filledPolygon and with a width of 2.0. In this case is also a closed polygon and a triangle. The bounding box is the smallest axis aligned rectangle enclosing the shape which in this case is denoted by the corners (0.0,0.0) and (20.0,80.0). c : `color` The color to be used. sw : `float` The stroke width. lst : `(float * float) list` The list of control points for the transformation. Returns: `PrimitiveTree` A new graphic primitive tree object representing the transformed graphic primitive tree.
`rectangle c sw w h` Full Usage: `rectangle c sw w h` Parameters: c : `color` - The color of the rectangle. sw : `float` - The stroke width of the rectangle. w : `float` - The width of the rectangle. h : `float` - The height of the rectangle. Returns: `PrimitiveTree` A new graphic primitive tree object representing the rectangle.	Creates a rectangle with the specified width, height, and stroke width. The rectangle function takes a color, a stroke width, a width, and a height and makes a PrimitiveTree representing a rectangle, whose lower left corner is (0.0,0.0) and upper right corner is (w,h). Example of code generating a rectangle tree is: `let col = goldenrod let strokeWidth = 1.0 rectangle col strokeWidth 20.0 80.0` val col: obj val strokeWidth: float which generates a PrimitiveTree representing a rectangle drawn with the color goldenrod and the line width 1.0. The bounding box is the same as the rectangle which in this case is (0.0,0.0) and (20.0,80.0). c : `color` The color of the rectangle. sw : `float` The stroke width of the rectangle. w : `float` The width of the rectangle. h : `float` The height of the rectangle. Returns: `PrimitiveTree` A new graphic primitive tree object representing the rectangle.
`render t w h draw` Full Usage: `render t w h draw` Parameters: t : `string` - The title of the application window. w : `int` - The width of the application window in pixels. h : `int` - The height of the application window in pixels. draw : `Picture` - A function that returns a Picture object representing the current visual state of the application.	Runs an application, defining the drawing function. The function render shows a Picture in a window on the screen. For example, `let tree = ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0 let pict = make tree render "Sample title" 256 256 pict` val tree: obj val pict: obj creates a translated ellipse graphic primitive tree converts it to a Picture using make and shows on the screen with render. t : `string` The title of the application window. w : `int` The width of the application window in pixels. h : `int` The height of the application window in pixels. draw : `Picture` A function that returns a Picture object representing the current visual state of the application.
`renderToFile width height filePath draw` Full Usage: `renderToFile width height filePath draw` Parameters: width : `int` - The width of the output image in pixels. height : `int` - The height of the output image in pixels. filePath : `string` - The file path where the image will be saved. draw : `Picture` - The picture object to be drawn.	Draws a picture generated by make or explain to a file with the specified width and height. The functions renders a Picture to a file. For example, `let tree = ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0 let picture = make tree renderToFile 256 256 "sample.tif" picture` val tree: obj val picture: obj makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file. The following formats are supported: Bmp, Gif, Jpeg, Pbm, Png, Tiff, Tga, WebP, and the desired format is specified by the file name suffix. Typically the suffix is given as lower case, and and Tiff images uses either of the tiff or tif suffixes. width : `int` The width of the output image in pixels. height : `int` The height of the output image in pixels. filePath : `string` The file path where the image will be saved. draw : `Picture` The picture object to be drawn.
`rotate x y rad p` Full Usage: `rotate x y rad p` Parameters: x : `float` - The x-coordinate of the point around which to rotate. y : `float` - The y-coordinate of the point around which to rotate. rad : `float` - The angle in radians to rotate the graphic primitive tree. p : `PrimitiveTree` - The graphic primitive tree to be rotated. Returns: `PrimitiveTree` A new graphic primitive tree object that is rotated by the specified angle.	Rotates a given graphic primitive tree by the specified angle in radians around a point. The rotate function takes a PrimitiveTree and three floating-point values representing the x and y coordinates of the center of rotation and the amount of rotation in radians. It constructs a new Rotate tree that encapsulates the original tree. For example: `ellipse darkCyan 2.0 85.0 64.0 \|> rotate 0.0 0.0 (45.0System.Math.PI/180.0)` namespace System type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ... <summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary> field System.Math.PI: float = 3.14159265359 <summary>Represents the ratio of the circumference of a circle to its diameter, specified by the constant, π.</summary> rotates the ellipse 45 degrees around the point 0,0. The ellipse's bounding box is currently unchanged which may cause undesired effects when used in together with alignH and alignV and this may change in future releases. x : `float` The x-coordinate of the point around which to rotate. y : `float` The y-coordinate of the point around which to rotate. rad : `float` The angle in radians to rotate the graphic primitive tree. p : `PrimitiveTree` The graphic primitive tree to be rotated. Returns: `PrimitiveTree` A new graphic primitive tree object that is rotated by the specified angle.
`scale sx sy p` Full Usage: `scale sx sy p` Parameters: sx : `float` - The scaling factor along the x-axis. sy : `float` - The scaling factor along the y-axis. p : `PrimitiveTree` - The graphic primitive tree to be scaled. Returns: `PrimitiveTree` A new graphic primitive tree object that is scaled by the specified factors.	Scales a given graphic primitive tree by the specified factors along the x and y axes. The scale function takes a PrimitiveTree and two floating-point values representing the scaling factor along the x and y axes, respectively. It constructs a new Scale tree that encapsulates the original tree. For example: `ellipse darkCyan 2.0 85.0 64.0 \|> scale 1.0 2.0` scales the ellipse with radii 85 and 64 with its center in 0,0 such that resulting ellipse has radii 85 and 128 and center in 0,0. The ellipse's bounding box is scaled accordingly. sx : `float` The scaling factor along the x-axis. sy : `float` The scaling factor along the y-axis. p : `PrimitiveTree` The graphic primitive tree to be scaled. Returns: `PrimitiveTree` A new graphic primitive tree object that is scaled by the specified factors.
`systemFontNames` Full Usage: `systemFontNames` Returns: `string list`	The list of names of available system fonts. Returns: `string list`
`text c f txt` Full Usage: `text c f txt` Parameters: c : `color` - The color of the text. f : `Font` - The font used to render the text. txt : `string` - The text to render. Returns: `PrimitiveTree` A PrimitiveTree object representing the rendered text.	Creates a PrimitiveTree representing the given text with specified properties. This function is used to create a text primitive with specific styling. For example: `let fontName = "Microsoft Sans Serif" let font = makeFont fontName 24.0 let white = yellow let tree = text white font "Hello World"` val fontName: string val font: obj val white: obj val tree: obj creates a graphic primitive of the string "Hello World". c : `color` The color of the text. f : `Font` The font used to render the text. txt : `string` The text to render. Returns: `PrimitiveTree` A PrimitiveTree object representing the rendered text.
`toString p` Full Usage: `toString p` Parameters: p : `PrimitiveTree` - The graphic primitive tree to be converted into a string. Returns: `string` A string representing the given graphic primitive tree.	Converts a graphic primitive tree into its string representation. The toString function returns a string representation of a primitive tree including all graphics primitives, transformations, and combinations, one per line. Enclosed trees are shown below with indentation according to their level of indentation. For example: `let box1 = rectangle goldenrod 1.0 20.0 80.0 let box2 = rectangle yellow 1.0 30.0 30.0 let tree = alignH (alignV box1 Right box2) Center box1 printfn "%s" (toString tree)` val box1: obj val box2: obj val tree: obj val printfn: format: Printf.TextWriterFormat<'T> -> 'T results in `AlignH position=0.5` which demonstrates that alignV encloses box1 and box2 including data about each element. p : `PrimitiveTree` The graphic primitive tree to be converted into a string. Returns: `string` A string representing the given graphic primitive tree.
`translate dx dy p` Full Usage: `translate dx dy p` Parameters: dx : `float` - The distance to translate the graphic primitive tree along the x-axis. dy : `float` - The distance to translate the graphic primitive tree along the y-axis. p : `PrimitiveTree` - The graphic primitive tree to be translated. Returns: `PrimitiveTree` A new graphic primitive tree object that is translated by the specified distances.	Translates a given graphic primitive tree by the specified distances along the x and y axes. The translate function takes a PrimitiveTree and two floating-point values representing the distances to translate the tree along the x and y axes, respectively. It constructs a new Translate tree that encapsulates the original tree with a translation primitive. For example: `ellipse darkCyan 2.0 85.0 64.0 \|> translate 128.0 128.0` translates the ellipse with radii 85 and 64 and center in 0,0 a such that the resulting ellipse has its center in 128,128. The ellipse's bounding box is translated accordingly. dx : `float` The distance to translate the graphic primitive tree along the x-axis. dy : `float` The distance to translate the graphic primitive tree along the y-axis. p : `PrimitiveTree` The graphic primitive tree to be translated. Returns: `PrimitiveTree` A new graphic primitive tree object that is translated by the specified distances.