init

ku-kueihsi · Jul 14, 2014 · b988df8 · b988df8
1 parent 75bf269
commit b988df8
Show file tree

Hide file tree

Showing 11 changed files with 28,991 additions and 0 deletions.
diff --git a/2012SubaruImprezaWRX.jpg b/2012SubaruImprezaWRX.jpg
diff --git a/hello.html b/hello.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <script src="closure-library/closure/goog/base.js"></script>
+    <script src="test_project/hello.js"></script>
+    <!-- // <script src="test_project/hello-compiled.js"></script> -->
+  </head>
+  <body onload="sayHi()">
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <!-- // <script src="closure-library/closure/goog/base.js"></script>
+    // <script src="test_project/events.js"></script> -->
+    <script src="test_project/hello-compiled_debug.js"></script>
+  </head>
+  <body id='shapes'>
+    <!-- <img id='shapes' border="0" src="2012SubaruImprezaWRX.jpg" alt="Pulpit rock" width="304" height="228"> -->
+    <script>
+      // pageRun();
+      sayHi();
+    </script>
+  </body>
+</html>
diff --git a/simple-draw.html b/simple-draw.html
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="stylesheet" type="text/css" href="closure/goog/demos/css/toolbar.css">
+    <link rel="stylesheet" type="text/css" href="closure/goog/demos/css/colormenubutton.css">
+    <script src="closure/goog/base.js"></script>
+    <script src="simple-draw.js"></script>
+  </head>
+  <body onload="initialize();">
+    <div style="float:left">
+      <div id="toolbar" class="goog-toolbar">
+        <div id="toolbar-mode-move" class="goog-toolbar-toggle-button">移動</div>
+        <div id="toolbar-mode-ellipse" class="goog-toolbar-toggle-button">◯</div>
+        <div id="toolbar-color-stroke" class="goog-toolbar-color-menu-button">線色</div>
+        <div id="toolbar-color-fill" class="goog-toolbar-color-menu-button">背景色</div>
+      </div>
+      <div id="canvas" style="border: solid 1px black;"></div>
+    </div>
+    <div id="dummy-drag-target" style="display:none;"></div>
+  </body>
+</html>
diff --git a/test_project/events.js b/test_project/events.js
@@ -0,0 +1,124 @@
+goog.provide('test.start')
+
+goog.require('goog.dom');
+goog.require('goog.events')
+goog.require('goog.events.EventType')
+goog.require('goog.events.KeyHandler')
+goog.require('goog.graphics')
+goog.require('goog.graphics.Font');
+
+var eventHandler = function(event) {
+  alert(event.type + ' at ' + event.clientX + ',' + event.clientY + ' on ' + event.target);
+};
+
+function pageRun() {
+  // alert('hello');
+  // var graphics = goog.graphics.createGraphics('100%', '100%');
+  var graphics = goog.graphics.createGraphics(1024, 1024);
+  // graphics.setCoordSize(512, 512);
+  // graphics.setSize('100%', '100%');
+
+  // define the colors for the squares and the dot
+  var square_fill = new goog.graphics.SolidFill('yellow');
+  var square_stroke = new goog.graphics.Stroke(2, 'green');
+  var dot_fill = new goog.graphics.SolidFill('blue');
+  var dot_stroke = new goog.graphics.Stroke(1, 'black');
+
+  // the dot's initial position
+  var dot = {
+    x: 1,
+    y: 1
+  };
+
+  // properties
+  var size = 40;
+  var margin = 5;
+  var width = size - margin;
+  var num_rows = 3;
+  var num_cols = 4;
+
+  // draw the squares
+  for (var x = 0; x < num_cols; x++) {
+    for (var y = 0; y < num_rows; y++) {
+      var rect = graphics.drawRect(margin + x * size, margin + y * size,
+        width, width, square_stroke, square_fill);
+      goog.events.listen(
+        rect,
+        goog.events.EventType.CLICK,
+        eventHandler)
+    }
+  }
+
+  // Text elements
+  fill = new goog.graphics.SolidFill('blue');
+  stroke = null;
+
+  var font = new goog.graphics.Font(30, 'Times');
+  graphics.drawText('Large Top Center', 0, 0, 600, 200, 'center', null,
+      font, stroke, fill);
+  graphics.setElementTransform(rect, 0, 0, 45, 0, 0);
+
+  font = new goog.graphics.Font(18, 'Arial');
+  // font.setRotation(90);
+  graphics.drawTextOnLine('Diagonal text', 200, 180, 400, 60, 'center',
+      font, stroke, fill);
+
+  // draw the dot
+  dot['graphic'] = graphics.drawEllipse(margin + dot['x'] * size + width / 2,
+    margin + dot['y'] * size + width / 2, width / 4, width / 4, dot_stroke,
+    dot_fill);
+
+  // call if the dot's position changes
+  redraw_dot = function() {
+    dot['graphic'].setCenter(margin + dot['x'] * size + width / 2, margin +
+      dot['y'] * size + width / 2);
+  }
+
+  // goog.events.listen(
+  //   dot['graphic'],
+  //   goog.events.EventType.CLICK,
+  //   eventHandler);
+  //
+  // dot['graphic'].dispatchEvent(goog.events.EventType.CLICK);
+
+  goog.events.listen(
+    dot['graphic'],
+    goog.events.EventType.MOUSEMOVE,
+    eventHandler);
+
+  dot['graphic'].dispatchEvent(goog.events.EventType.MOUSEMOVE);
+
+  goog.events.listen(
+    window,
+    goog.events.EventType.RESIZE,
+    function() {
+      // alert('resize');
+      var parent = document.getElementById('shapes');
+      // graphics.setCoordSize(parent.clientWidth, parent.clientHeight);
+      graphics.setSize(parent.clientWidth, parent.clientHeight);
+      graphics.setCoordSize(parent.clientWidth, parent.clientHeight);
+      // graphics.setCoordSize(512, 512);
+    });
+
+  // key event handler
+  var key_handler = new goog.events.KeyHandler(document);
+  var key_event = function(e) {
+    if (e.keyCode == goog.events.KeyCodes.UP && dot['y'] > 0) {
+      dot['y'] -= 1;
+    } else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <=
+      num_cols - 2) {
+      dot['x'] += 1;
+    } else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <=
+      num_rows - 2) {
+      dot['y'] += 1;
+    } else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x'] > 0) {
+      dot['x'] -= 1;
+    }
+    redraw_dot();
+  }
+
+  // put everything together
+  goog.events.listen(key_handler, 'key', key_event);
+  graphics.render(document.getElementById('shapes'));
+  // graphics.render();
+}