docs: example add change renderType button

hiloteam · Feb 15, 2016 · c6a36fb · c6a36fb
1 parent a2bf85f
commit c6a36fb
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 19 deletions.
diff --git a/examples/Camera.html b/examples/Camera.html
@@ -8,8 +8,6 @@
     <style>
         #game-container{
             border:solid 1px #000;
-            width: 800px;
-            height: 600px;
             margin: 20px auto;
         }
     </style>
@@ -22,13 +20,15 @@ <h1>Camera</h1>
         <p>Camera摄像机，鼠标点击切换摄像机跟随对象</p>
     </header>
     <div id="game-container"></div>
+    <script>
+        stageWidth = 800;
+        stageHeight = 600;
+    </script>
     <script type="text/javascript" src="js/demo.js"></script>
     <script type="text/javascript">
         function init(){
             var Tween = Hilo.Tween;
             var Camera = Hilo.Camera;
-            stageWidth = 800;
-            stageHeight = 600;
             gameContainer.style.height = stageHeight + 'px';
             var mapScale = 1.5;
             var mapWidth = 1440*mapScale;

diff --git a/examples/LoadQueue.html b/examples/LoadQueue.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="css/style.css">
     <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
     <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
+    <script type="text/javascript" src="../src/util/debug.js" data-auto="true"></script>
     <style type="text/css">
     .hilo-log{
         max-height: 200px !important;

diff --git a/examples/MouseEvent.html b/examples/MouseEvent.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="css/style.css">
     <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
     <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
+    <script type="text/javascript" src="../src/util/debug.js" data-auto="true"></script>
 </head>
 <body onload="init();">
     <header>
@@ -73,16 +74,16 @@ <h1>MouseEvent</h1>
             }).addTo(stage);
 
             container.on(Hilo.event.POINTER_START, function(e){
-                console.log("container", "down", e.eventTarget.id, e.eventCurrentTarget.id);
+                console.log("container:", "down,", "target:" + e.eventTarget.id, ", currentTarget:" + e.eventCurrentTarget.id);
             });
 
             container.on("mouseout", function(e){
-                console.log("container", "out", e.eventTarget.id, e.eventCurrentTarget.id)
+                console.log("container:", "out,", "target:" + e.eventTarget.id, ", currentTarget:" + e.eventCurrentTarget.id)
                 container.background = "#ff0"
             });
 
             container.on("mouseover", function(e){
-                console.log("container", "over", e.eventTarget.id, e.eventCurrentTarget.id);
+                console.log("container:", "over,", "target:" + e.eventTarget.id, ", currentTarget:" + e.eventCurrentTarget.id);
                 container.background = "#f00";
             });
 
@@ -91,14 +92,14 @@ <h1>MouseEvent</h1>
             });
 
             blueBtn.on("mouseover", function(e){
-                console.log("blueBtn", "over", e.eventTarget.id, e.eventCurrentTarget.id);
+                console.log("blueBtn:", "over,", "target:" + e.eventTarget.id, ", currentTarget:" + e.eventCurrentTarget.id);
             });
 
             var isStop = false;
             blueBtn.on(Hilo.event.POINTER_START, function(e){
-                console.log("blueBtn", "down", e.eventTarget.id, e.eventCurrentTarget.id);
+                console.log("blueBtn:", "down,", "target:" + e.eventTarget.id, ", currentTarget:" + e.eventCurrentTarget.id);
                 isStop && e.stopPropagation();
-                console.log("blueBtn", "isStopPropagation", isStop);
+                console.log("blueBtn:", "isStopPropagation:", isStop);
                 isStop = !isStop;
             });
         }

diff --git a/examples/index.html b/examples/index.html
@@ -105,15 +105,16 @@
 
         iframeElem.width = innerWidth - 220;
         iframeElem.height = innerHeight - 20;
+        var iframeWindow = iframeElem.contentWindow;
 
         var hashName = location.hash.slice(1);
         var currentName = '';
-        function setDemo(originName){
+        function setDemo(originName, first){
             var name = getExampleName(originName);
             var path = getExamplePath(originName);
             if(name !== currentName){
                 location.hash = name;
-                iframeElem.src = path + location.search;
+                iframeElem.src = path + (first?location.search:iframeWindow.location.search);
                 if(examplesDict[currentName]){
                     examplesDict[currentName].elem.className = '';
                 }
@@ -122,7 +123,7 @@
             }
         }
 
-        setDemo(examplesDict[hashName]?examplesDict[hashName].originName:examples[0]);
+        setDemo(examplesDict[hashName]?examplesDict[hashName].originName:examples[0], true);
 
         window.onkeydown = function(e){
             var index = examples.indexOf(examplesDict[currentName].originName);

diff --git a/examples/js/demo.js b/examples/js/demo.js
@@ -12,20 +12,41 @@ if(!renderTypes[renderType]){
 var winWidth = window.innerWidth || document.documentElement.clientWidth;
 var winHeight = window.innerHeight || document.documentElement.clientHeight;
 
-var headerElems = document.getElementsByTagName('header');
-if(headerElems[0] && location.search.indexOf('noHeader') < 0){
-    headerElems[0].style.display = 'block';
+var headerElem = document.getElementsByTagName('header')[0];
+if(location.search.indexOf('noHeader') < 0){
+    headerElem.style.display = 'block';
+    var renderTypeElem = document.createElement('div');
+    headerElem.appendChild(renderTypeElem);
+    var renderTypes = ['canvas', 'dom', 'webgl'];
+    renderTypes.forEach(function(type){
+        var typeElem = document.createElement('div');
+        typeElem.innerHTML = '<input type="radio" data-type="{type}">{type}</input>'.replace(/{type}/g, type);
+        typeElem.setAttribute('data-type', type);
+        typeElem.style.cssText = 'display:inline;margin-left:10px;line-height:20px;cursor:pointer;height:40px;';
+        typeElem.input = typeElem.children[0];
+        renderTypeElem.appendChild(typeElem);
+        if(type === renderType){
+            typeElem.input.checked = true;
+        }
+        typeElem.onclick = function(){
+            if(renderType !== type){
+                location.search = type;
+            }
+        }
+    });
+    renderTypeElem.style.cssText = 'position:absolute;right:5px;top:5px;';
 }
 else{
     winWidth = 550;
     winHeight = 400;
 }
 
 var gameContainer = document.getElementById("game-container");
-gameContainer.style.height = winHeight - gameContainer.offsetTop + 'px';
+var stageWidth = window.stageWidth||winWidth;
+var stageHeight = window.stageHeight||(winHeight - gameContainer.offsetTop);
+gameContainer.style.height = stageHeight + 'px';
+gameContainer.style.width = stageWidth + 'px';
 
-var stageWidth = winWidth;
-var stageHeight = winHeight - gameContainer.offsetTop;
 window.console = window.console||{log:function(){}};
 
 

diff --git a/examples/transformTest.html b/examples/transformTest.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
+    <title>Bitmap - Hilo Example</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
+    <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
+    <style>
+        #game-container{
+            margin: 5px;
+            border: 1px solid #000;
+        }
+    </style>
+</head>
+<body onload="init();">
+    <header>
+        <h1>Bitmap</h1>
+        <p>Bitmap是Hilo中最常用的类之一，它表示一个静态位图，对应一个Image或Image的某个矩形区域。</p>
+    </header>
+    <div id="game-container"></div>
+    <script>
+        stageWidth = 800;
+        stageHeight = 400;
+    </script>
+    <script type="text/javascript" src="js/demo.js"></script>
+    <script type="text/javascript">
+        function init(){
+            //init stage
+            var stage = new Hilo.Stage({
+                renderType:renderType,
+                container: gameContainer,
+                width: stageWidth,
+                height: stageHeight
+            });
+
+            //start stage ticker
+            var ticker = new Hilo.Ticker(60);
+            ticker.addTick(stage);
+            ticker.start();
+
+            //create a bitmap
+            var bmp = new Hilo.Bitmap({
+                image: 'images/fish.png',
+                rect: [0, 0, 174, 126],
+                x: 87,
+                y: 0,
+                pivotX:87,
+                pivotY:0,
+                rotation:30,
+                width:87
+            }).addTo(stage);
+
+            container0 = new Hilo.Container({
+                x:100,
+                y:50,
+                pivotX:100,
+                pivotY:50,
+                width:200,
+                height:200,
+                rotation:20,
+                alpha:0.5
+            }).addTo(stage);
+
+            var bmp = new Hilo.Bitmap({
+                image: 'images/fish.png',
+                rect: [0, 0, 174, 126],
+                x: 110,
+                y: 210,
+                pivotX:110,
+                pivotY:220,
+                rotation:70
+            }).addTo(container0);
+
+            var container1 = new Hilo.Container({
+                x:200,
+                y:200,
+                pivotX:100,
+                pivotY:150,
+                scaleX:-1,
+                scaleY:2,
+                width:200,
+                height:200,
+                rotation:135,
+                alpha:0.5
+            }).addTo(container0);
+
+            var bmp = new Hilo.Bitmap({
+                image: 'images/fish.png',
+                rect: [0, 0, 174, 126],
+                x: 110,
+                y: 110,
+                pivotX:100,
+                pivotY:20,
+                rotation:45
+            }).addTo(container1);
+
+
+        }
+    </script>
+</body>
+</html>