Browse files

More Docs

  • Loading branch information...
1 parent e7a1075 commit 194b335fdfc0d4dafb73f95ce6bb9b3069df1051 @sebmarkbage sebmarkbage committed Jan 29, 2011
View
106 Docs/ART/ART.Group.md
@@ -0,0 +1,106 @@
+ART.Group {#ART-Group}
+======================
+
+ART.Group is used to combine shapes or other groups into hierarchies that can be
+transformed as a set.
+
+ART.Group implements [ART.Transform][] as a mixin which means it has all transform
+methods available for moving, scaling and rotating a shape.
+
+ART.Group method: constructor
+-----------------------------
+
+Creates a new group.
+
+### Syntax:
+
+ var group = new ART.Group([width, height]);
+
+### Arguments:
+
+1. width - (*number*, optional) The width of the shape in pixels.
+2. height - (*number*, optional) The height of the shape in pixels.
+
+The size is optional and defines a content box which can be scaled to fit a new
+size using the [resizeTo method](ART.Transform#ART-Transform:resizeTo).
+
+ART.Group method: inject {#ART-Group:inject}
+--------------------------------------------
+
+Injects a group into another group or [ART][] surface instance.
+
+This group is rendered in front of any existing content in the container.
+
+### Syntax:
+
+ group.inject(container);
+
+### Arguments:
+
+1. container - (*mixed*) an [ART][] surface instance or another ART.Group
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+ var art = new ART(500, 500);
+ var group = new ART.Group().inject(art);
+
+ART.Group method: grab {#ART-Group:grab}
+----------------------------------------
+
+Grabs one or more groups or [ART.Shape][] instances and injects them into this group's
+content. The child instances are ejected from their current container.
+
+The new children are rendered in front of any current group content.
+
+### Syntax:
+
+ group.grab(child[, child[, ...]]);
+
+### Arguments:
+
+1. child - (*mixed*) a shape, text or another group instance
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+ var art = new ART(500, 500);
+ var rectangle = new ART.Rectangle(400, 200).fill('black');
+ var circle = new ART.Ellipse(200).fill('red');
+ var group = new ART.Group()
+ .grab(rectangle, circle)
+ .inject(art);
+
+ART.Group method: eject {#ART-Group:eject}
+------------------------------------------
+
+Removes the group from it's current container. Leaving it free to be garbage collected
+or injected somewhere else.
+
+### Syntax:
+
+ group.eject();
+
+### Returns:
+
+* The ART.Group instance itself
+
+### Example:
+
+ var art = new ART(500, 500);
+ var group = new ART.Group().inject(art);
+ var square = new ART.Rectangle(200).fill('black').inject(group);
+ art.subscribe('click', function(){
+ group.eject();
+ });
+
+
+[ART]: ../ART/ART
+[ART.Transform]: ../ART/ART.Transform
+[ART.Shape]: ../ART/ART.Shape
View
75 Docs/ART/ART.Path.md
@@ -1,7 +1,15 @@
ART.Path {#ART-Path}
====================
-ART.Path lets you draw paths which you could pass into [ART.Shape][].
+ART.Path lets you create and manipulate arbitrary paths which you could draw using [ART.Shape][].
+
+You can also use paths to place objects at various points along a path.
+
+You create a path by issues one or more commands which moves a pointer and draw lines from the
+previous position.
+
+A move command can be used to move the pointer without drawing a line. This effectively creates
+several sub-paths within a path.
ART.Path method: constructor
----------------------------
@@ -16,21 +24,10 @@ ART.Path method: constructor
- *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.
+Moves the pointer relatively to the last point without drawing a line.
### Syntax:
@@ -41,11 +38,15 @@ Moves the pointer relatively to the last point.
1. x - (*number*) The amount of pixels in horizontal direction.
2. y - (*number*) The amount of pixels in vertical direction.
+### Returns:
+
+* This ART.Path instance
+
ART.Path method: moveTo {#ART-Path:moveTo}
------------------------------------------
-Moves the pointer to an absolute point.
+Moves the pointer to an absolute point without drawing a line.
### Syntax:
@@ -56,6 +57,10 @@ Moves the pointer to an absolute point.
1. x - (*number*) The position in horizontal direction.
2. y - (*number*) The position in vertical direction.
+### Returns:
+
+* This ART.Path instance
+
ART.Path method: line {#ART-Path:line}
--------------------------------------
@@ -71,11 +76,15 @@ Draws a line relatively from the last point.
1. x - (*number*) The amount of pixels in horizontal direction.
2. y - (*number*) The amount of pixels in vertical direction.
+### Returns:
+
+* This ART.Path instance
+
ART.Path method: lineTo {#ART-Path:lineTo}
------------------------------------------
-Draws a line to an absolute point.
+Draws a line to an absolute point from the last point.
### Syntax:
@@ -86,6 +95,10 @@ Draws a line to an absolute point.
1. x - (*number*) The position in horizontal direction.
2. y - (*number*) The position in vertical direction.
+### Returns:
+
+* This ART.Path instance
+
ART.Path method: curve {#ART-Path:curve}
----------------------------------------
@@ -114,23 +127,41 @@ ART.Path method: arcTo {#ART-Path:arcTo}
ART.Path method: counterArc {#ART-Path:counterArc}
--------------------------------------------------
-// write me
+Same as [arc](#ART-Path:arc) but the line is drawn counter-clockwise.
ART.Path method: counterArcTo {#ART-Path:counterArcTo}
------------------------------------------------------
-// write me
+Same as [arcTo](#ART-Path:arcTo) but the line is drawn counter-clockwise.
ART.Path method: close {#ART-Path:close}
----------------------------------------
-// write me
+Draws a line to the first point in the current sub-path and begins a new sub-path.
+
+### Syntax:
+
+ path.close();
+
+### Returns:
+
+* This ART.Path instance
+
+
+ART.Path method: reset {#ART-Path:reset}
+--------------------------------------
+
+Resets the current path to a blank path.
+
+### Syntax:
+
+ path.reset();
+
+### Returns:
+* This ART.Path instance, now empty
-All other methods
------------------
-// add me
-[ART.Shape]: /art/ART.Shape
+[ART.Shape]: /ART.Shape
View
54 Docs/ART/ART.Shape.md
@@ -1,8 +1,13 @@
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 is used to draw arbitrary vector shapes from an [ART.Path][].
+
+ART.Shape implements [ART.Transform][] as a mixin which means it has all transform
+methods available for moving, scaling and rotating a shape.
+
+[ART.Shapes][] provides shortcuts to common shapes. These inherit from
+ART.Shape so each shape gets all common ART.Shape methods.
ART.Shape method: constructor
-----------------------------
@@ -19,6 +24,9 @@ Creates a new shape.
2. width - (*number*, optional) The width of the shape in pixels.
3. height - (*number*, optional) The height of the shape in pixels.
+The size is optional but should be specified on symbols. It defines
+the surface on which to draw a path. This can be use to scale the
+shape to fit a new size using the [resizeTo method](ART.Transform#ART-Transform:resizeTo).
ART.Shape method: draw {#ART-Shape:draw}
----------------------------------------
@@ -27,7 +35,7 @@ Draws the provided path on the canvas.
### Syntax:
- shape.draw(path, height, width);
+ shape.draw(path[, width, height]);
### Arguments:
@@ -39,11 +47,12 @@ Draws the provided path on the canvas.
* The ART.Shape instance
-
ART.Shape method: inject {#ART-Shape:inject}
--------------------------------------------
-Injects a into another element or [ART][] instance.
+Injects a into a [ART.Group][] or [ART][] instance.
+
+This group is rendered in front of any existing content in the container.
### Syntax:
@@ -63,10 +72,35 @@ Injects a into another element or [ART][] instance.
var shape = new ART.Rectangle(400, 200).fill('black').inject(art);
-// TODO: the other methods
+ART.Shape method: eject {#ART-Shape:eject}
+------------------------------------------
-[ART]: /art/ART/ART
-[ART.Shape]: /art/ART/ART.Shape
-[ART.Shapes]: /art/ART/ART.Shapes
-[ART.Path]: /art/ART/ART.Path
+Removes the shape from it's current container. Leaving it free to be garbage collected
+or injected somewhere else.
+
+### Syntax:
+
+ shape.eject();
+
+### Returns:
+
+* The ART.Shape instance itself
+
+### Example:
+
+ var art = new ART(500, 500);
+ var square = new ART.Rectangle(200).fill('black').inject(group);
+ art.subscribe('click', function(){
+ square.eject();
+ });
+
+
+
+// TODO: the other methods
+[ART]: ../ART/ART
+[ART.Path]: ../ART/ART.Path
+[ART.Transform]: ../ART/ART.Transform
+[ART.Group]: ../ART/ART.Group
+[ART.Shape]: ../ART/ART.Shape
+[ART.Shapes]: ../Shapes/ART.Shapes
View
148 Docs/ART/ART.Transform.md
@@ -0,0 +1,148 @@
+ART.Transform {#ART-Transform}
+==============================
+
+ART.Transform lets you manipulate ART objects by moving, scaling and rotating them.
+
+You can also use a custom [homogeneous transformation matrix][] to create advanced transforms.
+
+[ART.Shape][] implements ART.Transform as a mixin which means it has all ART.Transform methods
+available.
+
+This documentation refers to the "origin". This refers to the 0,0 coordinate in a shape
+or group. Often the top left corner.
+
+ART.Transform method: constructor
+---------------------------------
+
+Typically you won't use this constructor yourself. Instead, you'll use the methods as they're
+implemented on shapes or groups.
+
+### Syntax:
+
+ var transform = new ART.Transform([xx, yx, xy, yy[, x, y]]);
+
+### Arguments:
+
+1. xx - (*number*) multiplier to scale the x axis (default: 1)
+2. yx - (*number*) multiplier to skew the x axis (default: 0)
+3. xy - (*number*) multiplier to skew the y axis (default: 0)
+4. yy - (*number*) multiplier to scale y scale (default: 1)
+5. x - (*number*) number of units to move in the horizontal direction (default: 0)
+6. y - (*number*) number of units to move in the vertical direction (default: 0)
+
+The arguments correspond to the following [homogeneous transformation matrix][]:
+
+ xx xy x
+ yx yy y
+ 0 0 1
+
+The default transformation is the [identity matrix]:
+
+ 1 0 0
+ 0 1 0
+ 0 0 1
+
+### Alternative Syntax:
+
+ var transform = new ART.Transform(transform);
+
+### Arguments:
+
+1. transform - (*ART.Transform*) an existing transform to clone.
+
+
+ART.Transform method: transform {#ART-Transform:transform}
+----------------------------------------------------------
+
+Modifies the current transform by multiplying the current values with some new values.
+This method can be used to create complex transformations. Typically you won't use this method
+yourself but rather one of the other convenient methods.
+
+Note: The order of which multiplied transforms are applied is significant.
+
+### Syntax:
+
+ instance.transform(xx, yx, xy, yy[, x, y]);
+
+### Arguments:
+
+1. xx - (*number*) multiplier to scale the x axis (default: 1)
+2. yx - (*number*) multiplier to skew the x axis (default: 0)
+3. xy - (*number*) multiplier to skew the y axis (default: 0)
+4. yy - (*number*) multiplier to scale y scale (default: 1)
+5. x - (*number*) number of units to move in the horizontal direction (default: 0)
+6. y - (*number*) number of units to move in the vertical direction (default: 0)
+
+The arguments correspond to the following [matrix multiplication][]:
+
+ result current arguments
+ xx xy x xx xy x xx xy x
+ yx yy y = yx yy y * yx yy y
+ 0 0 1 0 0 1 0 0 1
+
+### Alternative Syntax:
+
+ instance.transform(transform);
+
+### Arguments:
+
+1. transform - (*ART.Transform*) an existing transform object.
+
+### Returns:
+
+* The current ART.Transform instance or shape
+
+
+ART.Transform method: transformTo {#ART-Transform:transformTo}
+--------------------------------------------------------------
+
+Resets the transform to some new values. This method has the same arguments as the constructor.
+
+This is typically used to reset the transform of a shape to some absolute value.
+
+### Syntax:
+
+ instance.transformTo([xx, yx, xy, yy[, x, y]]);
+ instance.transformTo([transform]);
+
+ART.Transform method: move {#ART-Transform:move}
+------------------------------------------------
+
+Moves the origin x/y units in the horizontal/vertical direction.
+
+### Syntax:
+
+ transform.move(x, y);
+
+### Arguments:
+
+1. x - (*number*) The number of units to move in the horizontal direction.
+2. y - (*number*) The number of units to move in the vertical direction.
+
+### Returns:
+
+* The current ART.Transform instance or shape
+
+ART.Transform method: moveTo {#ART-Transform:moveTo}
+----------------------------------------------------
+
+Moves the origin to an absolute point.
+
+### Syntax:
+
+ transform.moveTo(x, y);
+
+### Arguments:
+
+1. x - (*number*) The position within it's parent along the horizontal axis.
+2. y - (*number*) The position within it's parent along the vertical axis.
+
+### Returns:
+
+* The current ART.Transform instance or shape
+
+
+[ART.Shape]: ART.Shape
+[homogeneous transformation matrix]: http://en.wikipedia.org/wiki/Transformation_matrix
+[identity matrix]: http://en.wikipedia.org/wiki/Identity_matrix
+[matrix multiplication]: http://en.wikipedia.org/wiki/Matrix_multiplication
View
81 Docs/ART/ART.md
@@ -1,12 +1,12 @@
ART {#ART}
==========
-ART creates a new canvas to draw on.
+ART creates a new surface to draw on.
ART method: constructor
-----------------------
-Creates a new canvas.
+Creates a new surface.
### Syntax:
@@ -20,14 +20,14 @@ Creates a new canvas.
### Example:
var art = new ART(300, 400);
- // Inject it in our page
+ // Inject it in our page using MooTools
$('myElement').adopt(art);
ART method: resize {#ART:resize}
--------------------------------
-Resizes the canvas to a new width and height.
+Resizes the surface to a new width and height. The surface content is cropped, not scaled.
### Syntax:
@@ -38,3 +38,76 @@ Resizes the canvas to a new width and height.
1. width - (*number*) The width of the element in pixels
2. height - (*number*) The height of the element in pixels
+ART method: inject {#ART:inject}
+--------------------------------------------
+
+Injects the surface into the bottom a DOM element.
+
+### Syntax:
+
+ art.inject(container);
+
+### Arguments:
+
+1. container - (*Element*) a parent DOM element. E.g. document.body
+
+### Returns:
+
+* The ART instance itself
+
+### Example:
+
+ var art = new ART(500, 500).inject(document.body);
+
+ART method: eject {#ART:eject}
+------------------------------
+
+Removes the surface from the DOM container. Leaving it free to be garbage collected
+or injected somewhere else.
+
+### Syntax:
+
+ art.eject();
+
+### Returns:
+
+* The ART instance itself
+
+### Example:
+
+ var art = new ART(500, 500).inject(document.body);
+ art.subscribe('click', function(){
+ art.eject();
+ });
+
+ART method: grab {#ART:grab}
+----------------------------
+
+Grabs one or more [ART.Group][] or [ART.Shape][] instances and injects them into this surface's
+content. The child instances are ejected from their previous container.
+
+The new children are rendered in front of any existing content.
+
+### Syntax:
+
+ art.grab(child[, child[, ...]]);
+
+### Arguments:
+
+1. child - (*mixed*) a shape, text or group instance
+
+### Returns:
+
+* The ART instance itself
+
+### Example:
+
+ var art = new ART(500, 500);
+ var rectangle = new ART.Rectangle(400, 200).fill('black');
+ var circle = new ART.Ellipse(200).fill('red');
+ var group = new ART.Group()
+ .grab(rectangle, circle)
+ .inject(art);
+
+[ART.Group]: ART.Group
+[ART.Shape]: ART.Shape
View
10 Docs/Modes/ART.Base.md
@@ -0,0 +1,10 @@
+ART.Base
+========
+
+This file selects the DOM as the current default rendering environment.
+
+Either [SVG][] or [VML][] is selected based on the current browser's capabilities.
+SVG is prefered in browsers that support both - i.e. IE9.
+
+[SVG]: ART.SVG
+[VML]: ART.VML
View
9 Docs/Modes/ART.SVG.md
@@ -0,0 +1,9 @@
+ART.SVG
+=======
+
+The ART.SVG namespace defines ART classes that uses SVG rendering as their output.
+
+SVG rendering is only supported on Internet Explorer 9+. Earlier versions must use
+an alternative output such as [VML][].
+
+[VML]: ART.VML
View
12 Docs/Modes/ART.VML.md
@@ -0,0 +1,12 @@
+ART.VML
+=======
+
+The ART.VML namespace defines ART classes that uses VML rendering as their output.
+
+VML rendering is only supported on Internet Explorer. Other browsers must use an
+alternative output such as [SVG][].
+
+[SVG]: ART.SVG
+
+Known Issues
+------------
View
15 Docs/Shapes/ART.Font.md
@@ -0,0 +1,15 @@
+ART.Font {#ART-Font}
+====================
+
+ART.Font creates a shape based on text content using a custom Cufón-style font face.
+
+It uses custom path rendering through [ART.Shape][] which is slower than native [ART.Text][].
+Although it may give a more appealing rendering - especially when rotated. It also enables
+custom font faces in more browsers.
+
+### Extends:
+
+- [ART.Shape][]
+
+[ART.Shape]: ../ART/ART.Shape
+[ART.Text]: ART.Text
View
10 Docs/ART/ART.Shapes.md → Docs/Shapes/ART.Shapes.md
@@ -1,7 +1,7 @@
-ART.Shapes {#Number}
-====================
+ART.Shapes
+==========
-ART.Shapes defines multiple common used Shapes that extend [ART.Shape][].
+ART.Shapes defines common used Shapes that extend [ART.Shape][].
ART.Rectangle {#ART-Rectangle}
==============================
@@ -58,6 +58,6 @@ ART.Wedge
-[ART.Shape]: /art/ART/ART.Shape
-[ART.Rectangle]: /art/ART/ART.Shapes#ART-Rectangle
+[ART.Shape]: ../ART/ART.Shape
+[ART.Rectangle]: #ART-Rectangle
View
14 Docs/Shapes/ART.Text.md
@@ -0,0 +1,14 @@
+ART.Text {#ART-Text}
+====================
+
+ART.Text creates a shape based on text content using native text rendering.
+
+Note: ART.Text doesn't support custom @font-face files when [VML] rendering is used.
+You may use [ART.Font][] instead.
+
+ART.Text doesn't directly inherit from [ART.Shape][] but implements the same methods.
+
+
+[ART.Shape]: ../ART/ART.Shape
+[ART.Font]: ART.Font
+[VML]: ../Modes/ART.VML

0 comments on commit 194b335

Please sign in to comment.