Permalink
Browse files

Started to write some Docs for ART

  • Loading branch information...
1 parent edfa604 commit e7a107595e52ff93707f8386d2b9df8ebc2a93e8 @arian arian committed with sebmarkbage Jan 27, 2011
Showing with 311 additions and 0 deletions.
  1. +136 −0 Docs/ART/ART.Path.md
  2. +72 −0 Docs/ART/ART.Shape.md
  3. +63 −0 Docs/ART/ART.Shapes.md
  4. +40 −0 Docs/ART/ART.md
View
@@ -0,0 +1,136 @@
+ART.Path {#ART-Path}
+====================
+
+ART.Path lets you draw paths which you could pass into [ART.Shape][].
+
+ART.Path method: constructor
+----------------------------
+
+### Syntax:
+
+ var path = new ART.Path([path]);
+
+### Arguments:
+
+1. path - (*mixed*, optional) An already existing path. The following options are possible:
+ - *ART.Path* - If path is already an instance of ART.Path, it will copy the path.
+ - *string* - A SVG path that will be parsed by ART.Path
+
+
+ART.Path method: push {#ART-Path:push}
+--------------------------------------
+
+// write me
+
+ART.Path method: reset {#ART-Path:reset}
+--------------------------------------
+
+// write me
+
+ART.Path method: move {#ART-Path:move}
+--------------------------------------
+
+Moves the pointer relatively to the last point.
+
+### Syntax:
+
+ path.move(x, y);
+
+### Arguments:
+
+1. x - (*number*) The amount of pixels in horizontal direction.
+2. y - (*number*) The amount of pixels in vertical direction.
+
+
+ART.Path method: moveTo {#ART-Path:moveTo}
+------------------------------------------
+
+Moves the pointer to an absolute point.
+
+### Syntax:
+
+ path.moveTo(x, y);
+
+### Arguments:
+
+1. x - (*number*) The position in horizontal direction.
+2. y - (*number*) The position in vertical direction.
+
+
+ART.Path method: line {#ART-Path:line}
+--------------------------------------
+
+Draws a line relatively from the last point.
+
+### Syntax:
+
+ path.line(x, y);
+
+### Arguments:
+
+1. x - (*number*) The amount of pixels in horizontal direction.
+2. y - (*number*) The amount of pixels in vertical direction.
+
+
+ART.Path method: lineTo {#ART-Path:lineTo}
+------------------------------------------
+
+Draws a line to an absolute point.
+
+### Syntax:
+
+ path.lineTo(x, y);
+
+### Arguments:
+
+1. x - (*number*) The position in horizontal direction.
+2. y - (*number*) The position in vertical direction.
+
+
+ART.Path method: curve {#ART-Path:curve}
+----------------------------------------
+
+// write me
+
+
+ART.Path method: curveTo {#ART-Path:curveTo}
+--------------------------------------------
+
+// write me
+
+
+ART.Path method: arc {#ART-Path:arc}
+------------------------------------
+
+// write me
+
+
+ART.Path method: arcTo {#ART-Path:arcTo}
+----------------------------------------
+
+// write me
+
+
+ART.Path method: counterArc {#ART-Path:counterArc}
+--------------------------------------------------
+
+// write me
+
+
+ART.Path method: counterArcTo {#ART-Path:counterArcTo}
+------------------------------------------------------
+
+// write me
+
+
+ART.Path method: close {#ART-Path:close}
+----------------------------------------
+
+// write me
+
+
+All other methods
+-----------------
+
+// add me
+[ART.Shape]: /art/ART.Shape
View
@@ -0,0 +1,72 @@
+ART.Shape {#ART-Shape}
+======================
+
+ART.Shape is usually used to inherit from. For example [ART.Shapes][] inherit from
+ART.Shape so each shape gets all common ART.Shape methods
+
+ART.Shape method: constructor
+-----------------------------
+
+Creates a new shape.
+
+### Syntax:
+
+ var shape = new ART.Shape([path, width, height]);
+
+### Arguments:
+
+1. path - (*ART.Path*, optional) An [ART.Path][] instance.
+2. width - (*number*, optional) The width of the shape in pixels.
+3. height - (*number*, optional) The height of the shape in pixels.
+
+
+ART.Shape method: draw {#ART-Shape:draw}
+----------------------------------------
+
+Draws the provided path on the canvas.
+
+### Syntax:
+
+ shape.draw(path, height, width);
+
+### Arguments:
+
+1. path - (*ART.Path*, optional) An [ART.Path][] instance.
+2. width - (*number*, optional) The width of the shape in pixels.
+3. height - (*number*, optional) The height of the shape in pixels.
+
+### Returns:
+
+* The ART.Shape instance
+
+
+ART.Shape method: inject {#ART-Shape:inject}
+--------------------------------------------
+
+Injects a into another element or [ART][] instance.
+
+### Syntax:
+
+ shape.inject(container);
+
+### Arguments:
+
+1. container - (*mixed*) an [ART][] instance or another [ART.Shape][]
+
+### Returns:
+
+* The ART.Shape instance
+
+### Example:
+
+ var art = new ART(500, 500);
+ var shape = new ART.Rectangle(400, 200).fill('black').inject(art);
+
+
+// TODO: the other methods
+
+[ART]: /art/ART/ART
+[ART.Shape]: /art/ART/ART.Shape
+[ART.Shapes]: /art/ART/ART.Shapes
+[ART.Path]: /art/ART/ART.Path
+
View
@@ -0,0 +1,63 @@
+ART.Shapes {#Number}
+====================
+
+ART.Shapes defines multiple common used Shapes that extend [ART.Shape][].
+
+ART.Rectangle {#ART-Rectangle}
+==============================
+
+Creates an rectangular shape.
+
+### Extends:
+
+- [ART.Shape][]
+
+ART.Rectangle method: constructor
+---------------------------------
+
+### Syntax:
+
+ var myRectangle = new ART.Rectangle(width, height[, radius]);
+
+### Arguments:
+
+1. width - (*number*) The width of the rectangle in pixels
+2. height - (*number*) The height of the rectangle in pixels
+3. radius - (*number*, optional) A border radius
+
+
+ART.Pill {#ART-Pill}
+====================
+
+Creates a pill shape where the smaller side is entirely rounded.
+
+### Extends:
+
+- [ART.Rectangle][]
+
+ART.Pill method: constructor
+----------------------------
+
+### Syntax:
+
+ var myRectangle = new ART.Pill(width, height);
+
+### Arguments:
+
+1. width - (*number*) The width of the rectangle in pixels
+2. height - (*number*) The height of the rectangle in pixels
+
+
+
+ART.Ellipse
+===========
+
+
+ART.Wedge
+=========
+
+
+
+[ART.Shape]: /art/ART/ART.Shape
+[ART.Rectangle]: /art/ART/ART.Shapes#ART-Rectangle
+
View
@@ -0,0 +1,40 @@
+ART {#ART}
+==========
+
+ART creates a new canvas to draw on.
+
+ART method: constructor
+-----------------------
+
+Creates a new canvas.
+
+### Syntax:
+
+ var art = new ART([width, height]);
+
+### Arguments:
+
+1. width - (*number*, optional) The width of the element in pixels
+2. height - (*number*, optional) The height of the element in pixels
+
+### Example:
+
+ var art = new ART(300, 400);
+ // Inject it in our page
+ $('myElement').adopt(art);
+
+
+ART method: resize {#ART:resize}
+--------------------------------
+
+Resizes the canvas to a new width and height.
+
+### Syntax:
+
+ art.resize(width, height);
+
+### Arguments:
+
+1. width - (*number*) The width of the element in pixels
+2. height - (*number*) The height of the element in pixels
+

0 comments on commit e7a1075

Please sign in to comment.