{"id":7710,"date":"2018-12-20T04:00:02","date_gmt":"2018-12-20T04:00:02","guid":{"rendered":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=7710"},"modified":"2019-01-16T08:34:45","modified_gmt":"2019-01-16T08:34:45","slug":"createjs%e3%81%ae%e6%96%b0%e3%81%97%e3%81%84%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%82%92%e5%88%a9%e7%94%a8%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=7710","title":{"rendered":"CREATEJS\u306e\u65b0\u3057\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u5229\u7528\u3059\u308b"},"content":{"rendered":"<p>\u4ee5\u524d\u304b\u3089\u3001<a href=\"https:\/\/www.createjs.com\/\">CREATEJS<\/a> \u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3057\u305f\u3002canvas \u30bf\u30b0\u306e\u9818\u57df\u306b\u63cf\u753b\u3059\u308b\u5834\u5408\u3001\u901a\u5e38\u3067\u306f\u3044\u3063\u305f\u3093\u66f8\u3044\u305f\u3082\u306e\u306f\u52d5\u304b\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3067\u304d\u306a\u3044\u306e\u3067\u3059\u304c\u3001CREATEJS \u3067\u66f8\u304d\u8fbc\u3081\u3070\u52d5\u304b\u3059\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p>\u4e0b\u8a18\u306e\u30b5\u30a4\u30c8\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u30b3\u30fc\u30c9\u306e\u4e0b\u66f8\u304d\u306b\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<a href=\"http:\/\/kudox.jp\/java-script\/javascript-gesture-event\">JavaScript\u3067\u306e\u30b8\u30a7\u30b9\u30c1\u30e3\u30fc\u30a4\u30d9\u30f3\u30c8\u3092\u5229\u7528\u3057\u305f\u62e1\u5927\/\u7e2e\u5c0f\u30fb\u56de\u8ee2<\/a>\n<\/ul>\n<p>\u53c2\u8003\u306b\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u306f<a href=\"http:\/\/kudox.jp\/labs\/javascript-gesture-event-sample\/\">\u3053\u3053<\/a>\u306e\u30b3\u30fc\u30c9\u3067\u3059\u304c\u3001\u5148\u65e5 CREATEJS \u306e\u30b5\u30a4\u30c8\u3092\u898b\u305f\u3089\u3001\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u304b\u306a\u308a\u3042\u304c\u3063\u3066\u3044\u3066\u3001\u4ee5\u524d 0.4 \u3060\u3063\u305f\u306e\u304c\u73fe\u5728 1.0 \u3067\u3059\u3002\u305d\u308c\u3067\u3001\u65b0\u3057\u3044\u65b9\u3067\u52d5\u304f\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u63db\u3048\u3066\u307f\u307e\u3057\u305f\u3002\u4e0b\u8a18\u306b\u3042\u3052\u307e\u3059\u3002<\/p>\n<pre><code style=\"color:midnightblue; font-size:12px;white-space:pre-wrap\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;meta name=\"robots\" content=\"noindex,nofollow\"&gt;\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\"&gt; \r\n&lt;title&gt;JavaScript GestureEvent sample | kudox.jp&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/index.css\" media=\"all\"&gt;\r\n\r\n&lt;script type=\"text\/javascript\" src=\"js\/easeljs.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\nvar TouchEventSample = (function(window) {\r\n\tvar MAX_SCALE = 3;\r\n\tvar MIN_SCALE = 0.25;\r\n\t\r\n\tvar _instance;\r\n\tvar _canvas;\r\n\tvar _stage;\r\n\tvar _rect;\r\n\tvar _hitTouches = [];\r\n\tvar _dragEnabled = true;\r\n\tvar _startScale;\r\n\tvar _startRotation;\r\n\t\r\n\tfunction TouchEventSample(canvasID) {\r\n\t\ttry {\r\n\t\t\tdocument.createElement(\"canvas\").getContext(\"2d\");\r\n\t\t} catch (e) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t_instance = this;\r\n\t\t_canvas = document.getElementById(canvasID);\r\n\t\tupdateCanvasSize();\r\n\t\t_stage = new createjs.Stage(_canvas);\r\n\t\t_rect = new createjs.Shape();\r\n\t\tvar g = _rect.graphics;\r\n\t\tvar w = _canvas.width * 0.1 &gt;&gt; 0;\r\n\t\tg.beginFill(\"#0066cc\")\r\n\t\t.drawRect(-w * 2, -w, w * 4, w * 2)\r\n\t\t.endFill();\r\n\t\t_rect.x = _canvas.width * 0.5 &gt;&gt; 0;\r\n\t\t_rect.y = _canvas.height * 0.5 &gt;&gt; 0;\r\n\t\t_stage.addChild(_rect);\r\n\r\n\t\tcreatejs.Ticker.addEventListener(\"tick\",handleTick);\r\n\r\n\t\tfunction handleTick(){\r\n\t\t\t_stage.update();\r\n\t\t}\r\n\r\n\t\tif (\"onorientationchange\" in window) {\r\n\t\t\twindow.addEventListener(\"orientationchange\", updateCanvasSize, false);\r\n\t\t} else {\r\n\t\t\twindow.addEventListener(\"resize\", updateCanvasSize, false);\r\n\t\t}\r\n\t\tif (\"ontouchstart\" in window) {\r\n\t\t\t_canvas.addEventListener(\"touchstart\", touchStartHandler, false);\r\n\t\t\t_canvas.addEventListener(\"touchmove\", touchMoveHandler, false);\r\n\t\t\tdocument.addEventListener(\"touchend\", touchEndHandler, false);\r\n\t\t\tdocument.addEventListener(\"touchcancel\", touchEndHandler, false);\r\n\t\t}\r\n\t\tif (\"ongesturestart\" in window) {\r\n\t\t\t_canvas.addEventListener(\"gesturestart\", gestureStartHandler, false);\r\n\t\t\t_canvas.addEventListener(\"gesturechange\", gestureChangeHandler, false);\r\n\t\t\tdocument.addEventListener(\"gestureend\", gestureEndHandler,false);\t\t\t\r\n\t\t}\r\n\t}\r\n\t\r\n\tfunction touchStartHandler(e) {\r\n\r\n\/\/alert(\"touchStartHandler\");\r\n\r\n\t\te.preventDefault();\r\n\t\tvar touches = e.changedTouches;\r\n\t\tfor (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tvar target = touch.target;\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\t\t\tvar localPoint = _rect.globalToLocal(stageX, stageY);\r\n\t\t\tif (_rect.hitTest(localPoint.x, localPoint.y)) {\r\n\t\t\t\tvar offsetX = _rect.x - stageX;\r\n\t\t\t\tvar offsetY = _rect.y - stageY;\r\n\t\t\t\tvar offset = new createjs.Point(offsetX, offsetY);\r\n\t\t\t\t_hitTouches.push({touch:touch, offset:offset});\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t\r\n\tfunction touchMoveHandler(e) {\r\n\r\n\/\/alert(\"touchMoveHandler\");\r\n\r\n\t\te.preventDefault();\r\n\t\tif (!_dragEnabled || _hitTouches.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tvar touches = e.touches;\r\n\t\tfor (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tif (_hitTouches[0].touch.identifier !== touch.identifier) {\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\t\t\tvar target = touch.target;\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\t\t\tvar offset = _hitTouches[0].offset;\r\n\t\t\t_rect.x = stageX + offset.x;\r\n\t\t\t_rect.y = stageY + offset.y;\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\t\r\n\tfunction touchEndHandler(e) {\r\n\t\te.preventDefault();\r\n\t\tvar touches = e.changedTouches;\r\n\t\toutsideLoop: for (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tfor (var j = 0, m = _hitTouches.length; j &lt; m; ++j) {\r\n\t\t\t\tif (_hitTouches[j].touch.identifier === touch.identifier) {\r\n\t\t\t\t\t_hitTouches.splice(j, 1);\r\n\t\t\t\t\tcontinue outsideLoop;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t\t\r\n\tfunction gestureStartHandler(e) {\r\n\t\t_dragEnabled = false;\r\n\t\t_startScale = _rect.scaleX;\r\n\t\t_startRotation = _rect.rotation;\r\n\t}\r\n\t\r\n\tfunction gestureChangeHandler(e) {\r\n\t\tif (_hitTouches.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tvar scale = _startScale + e.scale - 1;\r\n\t\tscale = (scale &lt; MIN_SCALE) ? MIN_SCALE : (MAX_SCALE &lt; scale) ? MAX_SCALE : scale;\r\n\t\t_rect.scaleX = _rect.scaleY = scale;\r\n\t\t_rect.rotation = (_startRotation + e.rotation + 360) % 360;\r\n\t}\r\n\t\r\n\tfunction gestureEndHandler(e) {\r\n\t\t_startScale = null;\r\n\t\t_startRotation = null;\r\n\t\tfor (var i = 0, l = _hitTouches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = _hitTouches[i].touch;\r\n\t\t\tvar target = touch.target;\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\t\t\tvar offsetX = _rect.x - stageX;\r\n\t\t\tvar offsetY = _rect.y - stageY;\r\n\t\t\t_hitTouches[i].offset = new createjs.Point(offsetX, offsetY);\r\n\t\t}\r\n\t\t_dragEnabled = true;\r\n\t}\r\n\t\r\n\tfunction updateCanvasSize(e) {\r\n\t\t_canvas.width = document.documentElement.clientWidth;\r\n\t\t_canvas.height = document.documentElement.clientHeight;\r\n\t\tif (_rect) {\r\n\t\t\t_rect.x = _canvas.width * 0.5 &gt;&gt; 0;\r\n\t\t\t_rect.y = _canvas.height * 0.5 &gt;&gt; 0;\r\n\t\t}\r\n\t}\r\n\t\t\r\n\treturn TouchEventSample;\r\n}(window));\r\n\r\nwindow.addEventListener(\"load\", function(e) {\r\n\twindow.removeEventListener(\"load\", arguments.callee, false);\r\n\tvar sample = new TouchEventSample(\"my-canvas\");\r\n}, false);\r\n\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;canvas width=\"640\" height=\"360\" id=\"my-canvas\"&gt;\r\n\u304a\u4f7f\u3044\u306eWeb\u30d6\u30e9\u30a6\u30b6\u306f\u3001HTML5\u306ecanvas\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002\r\n&lt;\/canvas&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>\u3060\u3044\u305f\u3044\u306f\u3001createjs.Stage \u3060\u3068\u304b\u3001createjs.Shape\u3001createjs.Point \u306a\u3069\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u7684\u306a\u66f8\u304d\u65b9\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002Ticker \u3082 createjs.Ticker \u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\u30e1\u30bd\u30c3\u30c9\u540d\u304c\u5909\u308f\u3063\u3066\u3044\u3066 addListener \u304b\u3089 addEventListener \u3078\u3068\u5909\u308f\u308a\u3001\u5f15\u6570\u3082\u5909\u66f4\u3055\u308c\u3066\u3044\u307e\u3057\u305f\u3002\u305f\u3060\u3053\u306e\u3088\u3046\u306a\u66f8\u304d\u65b9\u306f\u4ee5\u524d\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u3082\u540c\u3058\u8a18\u8ff0\u3092\u3059\u308b\u5834\u5408\u304c\u3042\u3063\u3066\u52d5\u304b\u306a\u304b\u3063\u305f\u7406\u7531\u304c\u826f\u304f\u5206\u304b\u3089\u306a\u3044\u3002<\/p>\n<p><strong>\uff08\u8ffd\u8a18\uff1a20181222\uff09<\/strong><br \/>\nEdge \u3067\u30bf\u30c3\u30c1\u30a4\u30d9\u30f3\u30c8\u3092\u6709\u52b9\u306b\u3059\u308b\u306b\u306f\uff0c\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b about:flags \u3068\u6253\u3061\u8fbc\u3093\u3067\u8a2d\u5b9a\u753b\u9762\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a-300x239.png\" alt=\"\" width=\"300\" height=\"239\" class=\"aligncenter size-medium wp-image-7724\" srcset=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a-300x239.png 300w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a-768x613.png 768w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a-1024x817.png 1024w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a-600x479.png 600w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222a.png 1095w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>windows \u7248\u306e chrome \u3067\u306f\uff0c\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b chrome:\/\/flags \u3068\u6253\u3061\u8fbc\u3080\u3053\u3068\u3067\u8a2d\u5b9a\u3092\u547c\u3073\u51fa\u305b\u307e\u3059\u3002Touch Events API \u306e\u6240\u3092\u6709\u52b9\u306b\u3057\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b-300x222.png\" alt=\"\" width=\"300\" height=\"222\" class=\"aligncenter size-medium wp-image-7726\" srcset=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b-300x222.png 300w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b-768x568.png 768w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b-1024x758.png 1024w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b-600x444.png 600w, http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/wp-content\/uploads\/2018\/12\/20181222b.png 1162w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\u4e0a\u8a18\u306e\u8a2d\u5b9a\u3092\u3059\u308b\u3068\uff0cEdge \u3068 chrome \u3067\u30bf\u30c3\u30c1\u30a4\u30d9\u30f3\u30c8\u304c\u6709\u52b9\u306b\u306a\u308a\u307e\u3059\u3002\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u304b\u3048\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<a href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress_extra\/20190101\/index.html\">\u4fee\u6b63\u3057\u305f\u30b3\u30fc\u30c9\u306e\u30b5\u30f3\u30d7\u30eb<\/a>\n<\/ul>\n<p>Edge\uff0cchrome(windows)\uff0ciOS \u306e safari\uff0cFireFox(windows) \u3067\u52d5\u4f5c\u3057\u307e\u3059\u3002 gesture \u30a4\u30d9\u30f3\u30c8\u306e\u691c\u51fa\u3092\u6b62\u3081\u307e\u3057\u305f\u3002\u8a2d\u5b9a\u5909\u66f4\u306b\u3088\u3063\u3066\uff0cEdge\uff0cchrome \u306f touch \u30a4\u30d9\u30f3\u30c8\u306b\u306f\u5bfe\u5fdc\u3059\u308b\u3088\u3046\u306b\u306a\u308b\u306e\u3067\u3059\u304c\uff0c\u30b8\u30a7\u30b9\u30c1\u30e3\u30fc\u306b\u306f\u53cd\u5fdc\u3057\u307e\u305b\u3093\u3002\u305d\u306e\u4ee3\u308f\u308a\uff0c\u6307\u304c2\u672c\u30bf\u30c3\u30c1\u3057\u305f\u3089\u30b8\u30a7\u30b9\u30c1\u30e3\u30fc\u306e\u52d5\u304d\u3092\u958b\u59cb\u3057\u307e\u3059\u30021\u756a\u76ee\u306e\u6307\u30682\u756a\u76ee\u306e\u6307\u3067\u30b8\u30a7\u30b9\u30c1\u30e3\u30fc\u3092\u3059\u308b\u3082\u306e\u3068\u4eee\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\u4e0b\u8a18\u306b\u30b3\u30fc\u30c9\u3092\u3042\u3052\u307e\u3059\u3002<\/p>\n<pre><code style=\"color:midnightblue; font-size:12px;white-space:pre-wrap\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;meta name=\"robots\" content=\"noindex,nofollow\"&gt;\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\"&gt; \r\n&lt;title&gt;sample&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/index.css\" media=\"all\"&gt;\r\n\r\n&lt;script type=\"text\/javascript\" src=\"js\/easeljs.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n\r\n\r\nvar TouchEventSample = (function(window) {\r\n\r\n\r\n\tvar p = {MAX_SCALE:3, MIN_SCALE:0.25, _instance:null, _canvas:null, _stage:null, _rect:null, _hitTouches:[], _dragEnabled:true, _startScale:null, _startRotation:null, _startGesture:false, lastDX:null, lastDY:null, lastR:null};\r\n\r\n\tfunction TouchEventSample(canvasID) {\r\n\t\ttry {\r\n\t\t\tdocument.createElement(\"canvas\").getContext(\"2d\");\r\n\t\t} catch (e) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tp._instance = this;\r\n\t\tp._canvas = document.getElementById(canvasID);\r\n\r\n\r\n\t\t\/\/updateCanvasSize();\r\n\r\n\t\tp._canvas.width = document.documentElement.clientWidth;\r\n\t\tp._canvas.height = document.documentElement.clientHeight;\r\n\t\tif (p._rect) {\r\n\t\t\tp._rect.x = p._canvas.width * 0.5 &gt;&gt; 0;\r\n\t\t\tp._rect.y = p._canvas.height * 0.5 &gt;&gt; 0;\r\n\t\t}\r\n\r\n\r\n\t\tp._stage = new createjs.Stage(p._canvas);\r\n\t\tp._rect = new createjs.Shape();\r\n\t\tvar g = p._rect.graphics;\r\n\t\tvar w = p._canvas.width * 0.1 &gt;&gt; 0;\r\n\t\tg.beginFill(\"#0066cc\")\r\n\t\t.drawRect(-w * 2, -w, w * 4, w * 2)\r\n\t\t.endFill();\r\n\t\tp._rect.x = p._canvas.width * 0.5 &gt;&gt; 0;\r\n\t\tp._rect.y = p._canvas.height * 0.5 &gt;&gt; 0;\r\n\t\tp._stage.addChild(p._rect);\r\n\r\n\t\tcreatejs.Ticker.addEventListener(\"tick\",handleTick);\r\n\r\n\t\tfunction handleTick(){\r\n\r\n\t\t\tp._stage.update();\r\n\t\t}\r\n\r\n\t\tif (\"ontouchstart\" in window) {\r\n\t\t\tp._canvas.addEventListener(\"touchstart\", function (e) {touchStartHandler(e, p);}, false);\r\n\t\t\tp._canvas.addEventListener(\"touchmove\", function(e) {touchMoveHandler(e, p);}, false);\r\n\t\t\tdocument.addEventListener(\"touchend\", function (e) {touchEndHandler(e, p);}, false);\r\n\t\t\tdocument.addEventListener(\"touchcancel\", function (e) {touchEndHandler(e, p);}, false);\r\n\t\t}\r\n\t}\r\n\t\r\n\treturn TouchEventSample;\r\n}(window));\r\n\r\n\r\n\r\n\tfunction touchStartHandler(e, p) {\r\n\r\n\t\te.preventDefault();\r\n\t\tconsole.log(\"touch start\");\r\n\r\n\t\tvar touches = e.changedTouches;\r\n\r\n\t\tfor (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\r\n\t\t\tvar touch = touches[i];\r\n\r\n\t\t\tconsole.log(touch.identifier + \" start\");\r\n\r\n\t\t\tvar target = touch.target;\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\t\t\tvar localPoint = p._rect.globalToLocal(stageX, stageY);\r\n\t\t\tif (p._rect.hitTest(localPoint.x, localPoint.y)) {\r\n\t\t\t\tvar offsetX = p._rect.x - stageX;\r\n\t\t\t\tvar offsetY = p._rect.y - stageY;\r\n\t\t\t\tvar offset = new createjs.Point(offsetX, offsetY);\r\n\t\t\t\tp._hitTouches.push({touch:touch, offset:offset});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconsole.log(\"_hitTouches.length : \" + p._hitTouches.length);\r\n\r\n\t\tif (p._hitTouches.length == 2) {\r\n\r\n\t\t\tif (p._startGesture) {\r\n\r\n\t\t\t\t\/\/ \u4f55\u3082\u3057\u306a\u3044\r\n\r\n\t\t\t} else {\r\n\r\n\t\t\t\tp._startGesture = true;\r\n\r\n\t\t\t\tmyGestureStartHandler(e, p);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t\r\n\tfunction touchMoveHandler(e, p) {\r\n\r\n\t\te.preventDefault();\r\n\t\tconsole.log(\"touch move\");\r\n\r\n\t\tvar hitTouchesLength = p._hitTouches.length;\r\n\t\tvar touches = e.touches;\r\n\r\n\t\tif (p._startGesture) {\r\n\r\n\t\t\tMyGestureChangeHandler(e,p);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (!(p._dragEnabled) || hitTouchesLength === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\r\n\t\tfor (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tif (p._hitTouches[0].touch.identifier !== touch.identifier) {\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\r\n\t\t\tvar target = touch.target;\r\n\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\r\n\t\t\tvar offset = p._hitTouches[0].offset;\r\n\r\n\t\t\tp._rect.x = stageX + offset.x;\r\n\t\t\tp._rect.y = stageY + offset.y;\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\t\r\n\tfunction touchEndHandler(e, p) {\r\n\r\n\t\tconsole.log(\"touch end\");\r\n\t\te.preventDefault();\r\n\t\tvar touches = e.changedTouches;\r\n\r\n\t\toutsideLoop: for (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tfor (var j = 0, m = p._hitTouches.length; j &lt; m; ++j) {\r\n\t\t\t\tif (p._hitTouches[j].touch.identifier === touch.identifier) {\r\n\r\n\t\t\t\t\tconsole.log(touch.identifier + \" end\");\r\n\r\n\t\t\t\t\tp._hitTouches.splice(j, 1);\r\n\t\t\t\t\tcontinue outsideLoop;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconsole.log(\"_hitTouches.length : \" + p._hitTouches.length);\r\n\r\n\t\tif (p._hitTouches.length == 1) {\r\n\r\n\t\t\tif (p._startGesture) {\r\n\r\n\t\t\t\tp._startGesture = false;\r\n\r\n\t\t\t\tp.lastDX = null;\r\n\t\t\t\tp.lastDY = null;\r\n\t\t\t\tp.lastR  = null;\r\n\r\n\t\t\t\tmyGestureEndHandler(e, p);\r\n\r\n\t\t\t} else {\r\n\t\t\t\t\/\/ \u4f55\u3082\u3057\u306a\u3044\r\n\t\t\t}\r\n\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tfunction myGestureStartHandler(e, p) {\r\n\r\n\t\tconsole.log(\"start myGesture\");\r\n\t\tvar touches = e.touches;\r\n\r\n\t\tp._dragEnabled = false;\r\n\t\tp._startScale = p._rect.scaleX;\r\n\t\tp._startRotation = p._rect.rotation;\r\n\r\n\t\tp.lastDX = touches[0].pageX - touches[1].pageX;\r\n\t\tp.lastDY = touches[0].pageY - touches[1].pageY;\r\n\r\n\t\tp.lastR  =  Math.sqrt(p.lastDX * p.lastDX + p.lastDY * p.lastDY);\r\n\t}\r\n\t\r\n\tfunction MyGestureChangeHandler(e, p) {\r\n\r\n\t\tconsole.log(\"change myGesture\");\r\n\t\tvar touches = e.touches;\r\n\r\n\t\tif (p._hitTouches.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (p.lastDX == null) {\r\n\t\t\treturn;\/\/ \u4f55\u3082\u3057\u306a\u3044\r\n\t\t}\r\n\r\n\t\tvar presentDX = touches[0].pageX - touches[1].pageX;\r\n\t\tvar presentDY = touches[0].pageY - touches[1].pageY;\r\n\r\n\t\tvar presentR  = Math.sqrt(presentDX * presentDX + presentDY * presentDY);\r\n\r\n\t\tvar scale = p._startScale + presentR\/p.lastR - 1;\r\n\t\r\n\t\tscale = (scale &lt; p.MIN_SCALE) ? p.MIN_SCALE : (p.MAX_SCALE &lt; scale) ? p.MAX_SCALE : scale;\r\n\r\n\t\tp._rect.scaleX = p._rect.scaleY = scale;\r\n\r\n\t\tvar rot1 = 0;\r\n\r\n\t\tif (p.lastDX != 0) {\r\n\t\t\trot1 = Math.atan(p.lastDY\/p.lastDX);\r\n\t\t}\r\n\r\n\t\tvar rot2 = 0;\r\n\r\n\t\tif (presentDX != 0) {\r\n\t\t\trot2 = Math.atan(presentDY\/presentDX);\r\n\t\t}\r\n\r\n\t\tvar addRotation = (rot2 - rot1) * 360 \/(2 * Math.PI);\r\n\r\n\t\tp._rect.rotation = (p._startRotation + addRotation + 360) % 360;\r\n\t}\r\n\t\r\n\tfunction myGestureEndHandler(e, p) {\r\n\r\n\t\tconsole.log(\"end myGesture\");\r\n\r\n\t\tp._startScale = null;\r\n\t\tp._startRotation = null;\r\n\r\n\r\n\t\tvar touches = e.touches;\r\n\r\n\t\tfor (var i = 0, l = touches.length; i &lt; l; ++i) {\r\n\r\n\t\t\tvar touch = touches[i];\r\n\t\t\tvar target = touch.target;\r\n\t\t\tvar stageX = touch.pageX - target.offsetLeft;\r\n\t\t\tvar stageY = touch.pageY - target.offsetTop;\r\n\t\t\tvar offsetX = p._rect.x - stageX;\r\n\t\t\tvar offsetY = p._rect.y - stageY;\r\n\r\n\t\t\tp._hitTouches[i].offset = new createjs.Point(offsetX, offsetY);\r\n\t\t}\r\n\r\n\t\tp._dragEnabled = true;\r\n\r\n\t\tconsole.log(\"p._dragEnabled : \" + p._dragEnabled);\r\n\t}\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", function(e) {\r\n\twindow.removeEventListener(\"load\", arguments.callee, false);\r\n\tvar sample = new TouchEventSample(\"my-canvas\");\r\n}, false);\r\n\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;canvas width=\"640\" height=\"360\" id=\"my-canvas\"&gt;\r\n\u304a\u4f7f\u3044\u306eWeb\u30d6\u30e9\u30a6\u30b6\u306f\u3001HTML5\u306ecanvas\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002\r\n&lt;\/canvas&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4ee5\u524d\u304b\u3089\u3001CREATEJS \u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3057\u305f\u3002canvas \u30bf\u30b0\u306e\u9818\u57df\u306b\u63cf\u753b\u3059 &#8230; <a class=\"more-link\" href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=7710\">Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-7710","post","type-post","status-publish","format-standard","hentry","category-column"],"_links":{"self":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/7710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7710"}],"version-history":[{"count":30,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/7710\/revisions"}],"predecessor-version":[{"id":7794,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/7710\/revisions\/7794"}],"wp:attachment":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7710"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}