Added API examples for calculateActorState, draw, redraw, and render.

jeremyckahn · Apr 27, 2012 · f827338 · f827338
1 parent 32c1306
commit f827338
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 0 deletions.
diff --git a/docs/api.kapi.md b/docs/api.kapi.md
@@ -255,6 +255,8 @@ Kapi.prototype.render (millisecond)
 
 Calculate the positions for all `Actor`s at `millisecond`, and then draw them.  You can define any millisecond in the animation to render, so long as it is less than the length of the animation (see `animationLength`).
 
+__[Example](examples/render.html)__
+
 
 ### draw
 
@@ -267,6 +269,8 @@ Kapi.prototype.draw ()
 
 Draw all the `Actor`s at whatever position they are currently in.
 
+__[Example](examples/draw.html)__
+
 
 ### redraw
 
@@ -279,6 +283,8 @@ Kapi.prototype.redraw ()
 
 Re-`render()` the last frame that was `render()`ed.
 
+__[Example](examples/redraw.html)__
+
 
 ### calculateActorPositions
 
@@ -292,6 +298,8 @@ Kapi.prototype.calculateActorPositions (millisecond)
 
 Update the position of all the `Actor`s at `millisecond`, but do not draw them.
 
+__[Example](examples/calculate_actor_positions.html)__
+
 
 ### updateInternalState
 

diff --git a/docs/examples/calculate_actor_positions.html b/docs/examples/calculate_actor_positions.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Rekapi example</title>
+    <script src="../../dist/underscore.js"></script>
+    <script src="../../dist/shifty.js"></script>
+    <script src="../../dist/rekapi.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+    <script>
+      var canvas = document.getElementsByTagName('canvas')[0];
+
+      var kapi = new Kapi(canvas, {
+        'height': 300,
+        'width': 400
+      });
+
+      var actor = new Kapi.Actor({
+        'draw': function (canvas_context, state) {
+          canvas_context.beginPath();
+            canvas_context.arc(
+              state.x || 0,
+              state.y || 0,
+              state.radius || 50,
+              0,
+              Math.PI*2,
+              true);
+            canvas_context.fillStyle = state.color || '#f0f';
+            canvas_context.fill();
+            canvas_context.closePath();
+
+            return this;
+        }
+      });
+
+      kapi.addActor(actor);
+      actor
+        .keyframe(0,    { x: 50,  y: 50 })
+        .keyframe(1000, { x: 200, y: 150 });
+
+      // This operation doesn't actually draw anything.  It just calls
+      // calculatePosition on all of the actors.
+      kapi.calculateActorPositions(500);
+    </script>
+  </body>
+</html>
diff --git a/docs/examples/draw.html b/docs/examples/draw.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Rekapi example</title>
+    <script src="../../dist/underscore.js"></script>
+    <script src="../../dist/shifty.js"></script>
+    <script src="../../dist/rekapi.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+    <script>
+      var canvas = document.getElementsByTagName('canvas')[0];
+
+      var kapi = new Kapi(canvas, {
+        'height': 300,
+        'width': 400
+      });
+
+      var actor = new Kapi.Actor({
+        'draw': function (canvas_context, state) {
+          canvas_context.beginPath();
+            canvas_context.arc(
+              state.x || 0,
+              state.y || 0,
+              state.radius || 50,
+              0,
+              Math.PI*2,
+              true);
+            canvas_context.fillStyle = state.color || '#f0f';
+            canvas_context.fill();
+            canvas_context.closePath();
+
+            return this;
+        }
+      });
+
+      kapi.addActor(actor);
+      actor
+        .keyframe(0,    { x: 50,  y: 50 })
+        .keyframe(1000, { x: 200, y: 150 });
+
+      // This is almost the same as calling kapi.render(500).  No events are
+      // fired with this approach, however.
+      kapi.calculateActorPositions(500);
+      kapi.draw();
+    </script>
+  </body>
+</html>
diff --git a/docs/examples/redraw.html b/docs/examples/redraw.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Rekapi example</title>
+    <script src="../../dist/underscore.js"></script>
+    <script src="../../dist/shifty.js"></script>
+    <script src="../../dist/rekapi.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+    <script>
+      var canvas = document.getElementsByTagName('canvas')[0];
+
+      var kapi = new Kapi(canvas, {
+        'height': 300,
+        'width': 400
+      });
+
+      var actor = new Kapi.Actor({
+        'draw': function (canvas_context, state) {
+          canvas_context.beginPath();
+            canvas_context.arc(
+              state.x || 0,
+              state.y || 0,
+              state.radius || 50,
+              0,
+              Math.PI*2,
+              true);
+            canvas_context.fillStyle = state.color || '#f0f';
+            canvas_context.fill();
+            canvas_context.closePath();
+
+            return this;
+        }
+      });
+
+      kapi.addActor(actor);
+      actor
+        .keyframe(0,    { x: 50,  y: 50 })
+        .keyframe(1000, { x: 200, y: 150 });
+
+      kapi.calculateActorPositions(500);
+      kapi.draw();
+      kapi.canvas_clear();
+
+      setTimeout(function () {
+        kapi.redraw();
+      }, 1000);
+    </script>
+  </body>
+</html>
diff --git a/docs/examples/render.html b/docs/examples/render.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Rekapi example</title>
+    <script src="../../dist/underscore.js"></script>
+    <script src="../../dist/shifty.js"></script>
+    <script src="../../dist/rekapi.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+    <script>
+      var canvas = document.getElementsByTagName('canvas')[0];
+
+      var kapi = new Kapi(canvas, {
+        'height': 300,
+        'width': 400
+      });
+
+      var actor = new Kapi.Actor({
+        'draw': function (canvas_context, state) {
+          canvas_context.beginPath();
+            canvas_context.arc(
+              state.x || 0,
+              state.y || 0,
+              state.radius || 50,
+              0,
+              Math.PI*2,
+              true);
+            canvas_context.fillStyle = state.color || '#f0f';
+            canvas_context.fill();
+            canvas_context.closePath();
+
+            return this;
+        }
+      });
+
+      kapi.addActor(actor);
+      actor
+        .keyframe(0,    { x: 50,  y: 50 })
+        .keyframe(1000, { x: 200, y: 150 });
+
+      kapi.render(500);
+    </script>
+  </body>
+</html>