kinetic tests, drawing with layers

Raxa · Nov 7, 2012 · d7ebae4 · d7ebae4
1 parent 3d54058
commit d7ebae4
Show file tree

Hide file tree

Showing 5 changed files with 299 additions and 0 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "KineticJS"]
+	path = KineticJS
+	url = https://github.com/ericdrowell/KineticJS.git
diff --git a/KineticJS b/KineticJS
diff --git a/kineticTests.html b/kineticTests.html
@@ -0,0 +1,128 @@
+
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+      canvas {
+        border: 1px solid #9C9898;
+      }
+      #buttons {
+        position: absolute;
+        left: 10px;
+        top: 0px;
+      }
+      button {
+        margin-top: 10px;
+        display: block;
+      }
+    </style>
+    <script src="src/lib/kinetic-v4.0.5.min.js"></script>
+    <script>
+      window.onload = function() {
+        var stage = new Kinetic.Stage({
+          container: "container",
+          width: 578,
+          height: 200
+        });
+        stage.getContainer().addEventListener('mousedown', function(evt) {
+          console.log('clicked moose');
+          console.log(evt);
+          gloEvt = evt;
+        });
+        var layer = new Kinetic.Layer();
+        var offsetX = 0;
+        var offsetY = 0;
+        var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
+        var yellowBox = null;
+
+        for(var n = 0; n < 6; n++) {
+          // anonymous function to induce scope
+          (function() {
+            var i = n;
+            var box = new Kinetic.Rect({
+              x: i * 30 + 210,
+              y: i * 18 + 40,
+              width: 100,
+              height: 50,
+              fill: colors[i],
+              stroke: "black",
+              strokeWidth: 4,
+              draggable: true,
+              name: colors[i]
+            });
+
+            box.on("mouseover", function() {
+              document.body.style.cursor = "pointer";
+            });
+            box.on("mouseout", function() {
+              document.body.style.cursor = "default";
+            });
+            if(colors[i] === "yellow") {
+              yellowBox = box;
+            }
+
+            layer.add(box);
+          })();
+        }
+
+        stage.add(layer);
+
+        // add button event bindings
+        document.getElementById("toTop").addEventListener("click", function() {
+          yellowBox.moveToTop();
+          layer.draw();
+        }, false);
+
+        document.getElementById("toBottom").addEventListener("click", function() {
+          yellowBox.moveToBottom();
+          layer.draw();
+        }, false);
+
+        document.getElementById("up").addEventListener("click", function() {
+          yellowBox.moveUp();
+          layer.draw();
+        }, false);
+
+        document.getElementById("down").addEventListener("click", function() {
+          yellowBox.moveDown();
+          layer.draw();
+        }, false);
+
+        document.getElementById("zIndex").addEventListener("click", function() {
+          yellowBox.setZIndex(3);
+          layer.draw();
+        }, false);
+      };
+
+    </script>
+  </head>
+  <body onmousedown="return false;">
+    <div id="container">
+    <canvas width='100' height='100' id='canvas2 style=z-index:0;position:absolute;left:0px;top:0px;border:1px dotted;'>Canvas not supported.</canvas>
+    </div>
+    <!-- <div style='position: relative;'> -->
+
+    <!-- </div> -->
+    <div id="buttons">
+      <button id="toTop">
+        Move yellow box to top
+      </button>
+      <button id="toBottom">
+        Move yellow box to bottom
+      </button>
+      <button id="up">
+        Move yellow box up
+      </button>
+      <button id="down">
+        Move yellow box down
+      </button>
+      <button id="zIndex">
+        Set yellow box zIndex to 3
+      </button>
+    </div>
+  </body>
+</html>
diff --git a/kineticTests2.html b/kineticTests2.html
@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0px;
+                padding: 0px;
+            }
+            canvas {
+                border: 1px solid #9C9898;
+            }
+        </style>
+        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
+        <script>
+            window.onload = function() {
+              var newLine;
+              var newLinePoints = [];
+              var prevPos;
+              var mode;
+
+              document.getElementById("drawMode").addEventListener("click", function() {
+                mode = "draw";
+              }, false);
+
+              document.getElementById("eraseMode").addEventListener("click", function() {
+                mode = "erase";
+              }, false);
+
+                layer = new Kinetic.Layer();
+                layerLines = new Kinetic.Layer();
+                stage = new Kinetic.Stage({
+                    container: "container",
+                    width: 320,
+                    height: 320
+                });
+
+                background = new Kinetic.Rect({
+                    x: 0, 
+                    y: 0, 
+                    width: stage.getWidth(),
+                    height: stage.getHeight(),
+                    fill: "white"
+                });
+
+                layer.add(background);
+                line = new Kinetic.Line({
+                    points: [0, 0, 50, 50],
+                    stroke: "red"
+                });
+
+                layerLines.add(line);
+                stage.add(layer);
+                stage.add(layerLines)
+
+                moving = false;
+
+                stage.on("mousedown", function(){
+                    if (mode !== 'draw') {
+                      return;
+                    }
+
+                    if (moving){
+                        moving = false;layer.draw();
+                    } else {
+
+                        // var mousePos = stage.getMousePosition();
+                        // //start point and end point are the same
+                        // line.getPoints()[0].x = mousePos.x;
+                        // line.getPoints()[0].y = mousePos.y;
+                        // line.getPoints()[1].x = mousePos.x;
+                        // line.getPoints()[1].y = mousePos.y;
+
+                        newLinePoints = [];
+                        prevPos = stage.getMousePosition();
+                        newLinePoints.push(prevPos);
+                        newLine = new Kinetic.Line({
+                          points: newLinePoints,
+                          stroke: "red"
+                        });
+                        layerLines.add(newLine);
+                        moving = true;    
+                        // layerLines.drawScene();            
+                    }
+
+                });
+
+                stage.on("mousemove", function(){
+                    if (mode !== 'draw') {
+                      return;
+                    }
+
+                    if (moving) {
+
+                        var mousePos = stage.getMousePosition();
+                        var x = mousePos.x;
+                        var y = mousePos.y;
+                        newLinePoints.push(mousePos);
+
+                        console.log("moving");
+
+
+                        // newLine.on('mouseover', function(evt){
+                        //   console.log('clicked on newline');
+                        //   if (mode == 'erase') {
+                        //     console.log('fake erase');
+                        //   }
+                        // });
+
+                        prevPos = mousePos;
+                        console.log(newLine);
+
+                        moving = true;
+                        layerLines.drawScene();
+                    }
+                });
+
+                stage.on("mouseup", function(){
+                    if (mode !== 'draw') {
+                      return;
+                    }
+
+                    moving = false; 
+                });
+
+            };
+        </script>
+    </head>
+    <body>
+        <div id="container" ></div>
+        <button id="drawMode">
+          Draw
+        </button>
+        <button id="eraseMode">
+          Erase
+        </button>
+    </body>
+</html>
diff --git a/src/lib/kinetic-v4.0.5.min.js b/src/lib/kinetic-v4.0.5.min.js