Differences

This shows you the differences between two versions of the page.

--- plugin:sketchcanvas:syntax [2015-08-17 14:29] – Add barrow and dallow msakuta
+++ plugin:sketchcanvas:syntax [2015-09-12 15:22] (current) – [Text object] About links msakuta
@@ Line 76: / Line 76: @@
 </code>
-Properties are common with [[#arrow]] object, except that two parallel lines are drawn.
+Properties are common with [[#arrow object]], except that two parallel lines are drawn.
+===== Arc object =====
+A curve defined by 3 points.
+<code yaml>
+- type: arc
+  points: '56,118:155,42:245,125'
+  color: blue
+  width: 2
+</code>
+Properties are common with [[#line object]], except that "points" property contains 3 elements.
+Note that this object is quadratic [[wp>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.
+<code yaml>
+- type: arcarrow
+  points: '59,185:152,143:229,183'
+  color: blue
+  width: 2
+</code>
+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.
+<code yaml>
+- type: arcbarrow
+  points: '65,238:161,205:218,243'
+  color: blue
+  width: 2
+</code>
+Properties are the same with [[#arc object]], except that arrowheads are drawn on the both ends.
+===== Rect object =====
+A rectangle frame.
+<code yaml>
+- type: rect
+  points: '69,279:241,326'
+  color: blue
+  width: 2
+</code>
+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.
+<code yaml>
+- type: ellipse
+  points: '83,345:213,383'
+  color: blue
+  width: 2
+</code>
+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.
+<code yaml>
+- type: rectfill
+  points: '76,398:230,434'
+  color: blue
+  width: 2
+</code>
+Properties are the same with [[#rect object]], except that the inside of the rectangle is filled with color.
+===== Ellipsefill object =====
+A filled ellipse.
+<code yaml>
+- type: ellipsefill
+  points: '100,448:233,476'
+  color: blue
+  width: 2
+</code>
+Properties are the same with [[#ellipse object]], except that the inside of the ellipse is filled with color.
+===== Star object =====
+A pentagram star.
+<code yaml>
+- type: star
+  points: '76,496'
+  color: blue
+  width: 2
+</code>
+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.
+<code yaml>
+- type: check
+  points: '72,531'
+  color: blue
+  width: 2
+</code>
+Properties are the same with [[#star object]], except that the shape is a check mark instead of a star.
+===== Text object =====
+A text string.
+<code yaml>
+- type: text
+  points: '454,539'
+  text: hello
+  link: 'https://www.dokuwiki.org/plugin:sketchcanvas:syntax'
+</code>
+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.
+((Hyperlinked text itself is not automatically colored to blue. Setting color property manually
+is needed if you want to make it look blue.))
+Currently, multiple lines are not allowed in a text object.
+===== Path object =====
+A polyline or curve with arbitrary number of vertices.
+<code yaml>
+- 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]
+</code>
+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 [[http://www.w3.org/TR/SVG/Overview.html|SVG]]'s
+[[http://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands|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 object]]s or [[#arc object]]s who has arrowhead
+presense in their type name.