DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:sketchcanvas:syntax

SketchCanvas Syntax

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.

Meta 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.

Line object

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.

Arrow object

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.

Ballow object

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.

Dallow object

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.

Arc object

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”.

Arcarrow object

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.

Arcballow object

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.

Rect object

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.

Ellipse object

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.

Rectfill object

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.

Ellipsefill object

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.

Star object

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.

Check object

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.

Text object

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.

Path 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 object has the “d” property for list of points in the path, but its format is different from “points” property of other shapes. It's a subset of SVG's path element's format.

A path can contain cubic Bezier spline curves, which enables flexible curve layout.

The “arrow” property specifies which one or both ends of the path have arrowheads. This is very different from line objects or arc objects who has arrowhead presense in their type name.

1)
Hyperlinked text itself is not automatically colored to blue. Setting color property manually is needed if you want to make it look blue.
plugin/sketchcanvas/syntax.txt · Last modified: 2015-09-12 15:22 by msakuta