Table of Contents
A SketchCanvas document is a YAML formatted data with a list on the root node. The list contains one or more drawing objects. A drawing object is an element in a sketch, such as a line, a rectangle or a ellipse. A sketch consists of a collection of drawing objects.
Following is a list of drawing object types. All objects have a property named “type” that defines the type of the drawing object.
This object is always the first entry in the root list of the document.
- type: meta size: [550, 450]
Currently, this object contains only one property: size. The size defines the dimensions of the sketch, in pixels.
If a SketchCanvas document lacks this object, a meta object with default size: [934, 590] is automatically created.
A simple line with optional color and width specification.
- type: line points: '92,140:159,201' color: red width: 2
- points: A colon-separated list of point coordinates for the line. Currently only 2 points is allowed.
- color: Color of the line. Can be “black”, “blue”, “red” or “white”. If omitted, black is assumed.
- width: Width of the line. Can be 1, 2 or 3. If omitted, 1 is assumed.
A line with arrowhead on one end.
- type: arrow points: '71,265:168,214' color: blue width: 2
Properties are common with line object, except that an arrowhead is drawn on the second point.
A line with arrowheads on both ends.
- type: barrow points: '504,151:591,153' color: blue width: 2
Properties are common with line object, except that arrowheads are drawn on the both points.
An allow with double lines.
- type: darrow points: '33,128:65,174' color: blue width: 2
Properties are common with arrow object, except that two parallel lines are drawn.
A curve defined by 3 points.
- type: arc points: '56,118:155,42:245,125' color: blue width: 2
Properties are common with line object, except that “points” property contains 3 elements.
Note that this object is quadratic Bézier curve, so the second point (which is a control point) will not cross the curve itself. Probably we should name it “bezier” or something rather than “arc”.
A curve with an arrowhead on one end.
- type: arcarrow points: '59,185:152,143:229,183' color: blue width: 2
Properties are the same with arc object, except that an arrowhead is drawn on the last point.
A curve with an arrowhead on both ends.
- type: arcbarrow points: '65,238:161,205:218,243' color: blue width: 2
Properties are the same with arc object, except that arrowheads are drawn on the both ends.
A rectangle frame.
- type: rect points: '69,279:241,326' color: blue width: 2
Properties are common with line object, except that the two points define the diagonal of the rectangle instead of line ends.
An elliptical shape.
- type: ellipse points: '83,345:213,383' color: blue width: 2
Properties are common with line object, except that the two points define the diagonal of the bounding rectangle of the ellipse.
A filled rectangle.
- type: rectfill points: '76,398:230,434' color: blue width: 2
Properties are the same with rect object, except that the inside of the rectangle is filled with color.
A filled ellipse.
- type: ellipsefill points: '100,448:233,476' color: blue width: 2
Properties are the same with ellipse object, except that the inside of the ellipse is filled with color.
A pentagram star.
- type: star points: '76,496' color: blue width: 2
Properties are the same with ellipse object, except that “points” property contains only one element, which defines the position of the star.
A check mark.
- type: check points: '72,531' color: blue width: 2
Properties are the same with star object, except that the shape is a check mark instead of a star.
A text string.
- type: text points: '454,539' text: hello link: 'https://www.dokuwiki.org/plugin:sketchcanvas:syntax'
The “text” property defines the string to draw. The color and size of the text can be modified with “color” and “width” properties.
The “link” property, if exists, creates a hyperlink to the specified URL. When the user clicks on this text, the browser jumps to the URL's page. A text object with a link is designated by a blue underline. 1)
Currently, multiple lines are not allowed in a text object.
A polyline or curve with arbitrary number of vertices.
- type: path color: blue width: 3 d: 'M35,52.75C35,52.75 44,29.75 52,29.75C60,29.75 61,40.75 58,55.75C55,70.75 51,90.75 46,95.75C41,100.75 50,64.75 53,63.75C56,62.75 81,60.75 86,60.75C91,60.75 99,27.75 94,27.75C89,27.75 86,46.75 83,57.75C80,68.75 76,95.75 80,95.75C84,95.75 99,77.75 104,77.75C109,77.75 123,76.75 128,76.75C133,76.75 137,79.75 133,72.75C129,65.75 126,58.75 117,59.75C108,60.75 105,69.75 105,75.75C105,81.75 110,97.75 118,94.75C126,91.75 143,90.75 147,88.75C151,86.75 159,55.75 159,48.75C159,41.75 158,26.75 155,25.75C152,24.75 146,55.75 147,64.75C148,73.75 152,92.75 156,93.75C160,94.75 174,92.75 177,88.75C180,84.75 188,63.75 188,56.75C188,49.75 187,20.75 184,20.75C181,20.75 177,47.75 177,52.75C177,57.75 180,93.75 184,93.75C188,93.75 224,55.75 216,57.75C208,59.75 203,68.75 201,78.75C199,88.75 208,94.75 216,94.75C224,94.75 233,83.75 233,77.75C233,71.75 219,55.75 219,55.75' arrow: [head, tail]
Path object is very different from other object types.
A path can contain cubic Bezier spline curves, which enables flexible curve layout.