canvas ドラッグ処理(iPad & iPhone 対応) hikatsuka Follow 2010-07-29 16:46:33 License: MIT License Fork24 Fav5 View10477 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 116 lines HTML 3 lines CSS 1 lines canvas ドラッグ処理(iPad & iPhone 対応) var canvas; var ctx; var timerDrawID; //描画タイマーID var cW = 300; //キャンバス横サイズ var cH = 300; //キャンバス縦サイズ var mouseDownFlag = false; //マウスダウンしているかどうか var mouseX1; //ドラッグ開始した座標 var mouseY1; //ドラッグ開始した座標 var mouseX2; //ドラッグ中の座標 var mouseY2; //ドラッグ中の座標 var dragDivX; //ドラッグ開始地点と現在の差 var dragDivY; //ドラッグ開始地点と現在の差 var obj; window.onload = function() { init(); }; function init(){ //キャンバスの初期処理 canvas = document.getElementById('testCanvas'); if ( ! canvas || ! canvas.getContext ) return false; //2Dコンテキスト ctx = canvas.getContext('2d'); //イベント canvas.addEventListener("mousedown", mouseDownListner, false); canvas.addEventListener("mousemove", mouseMoveListner, false); canvas.addEventListener("mouseup", mouseUpListner, false); canvas.addEventListener("mouseout", mouseUpListner, false); canvas.addEventListener("touchstart", mouseDownListner, false); canvas.addEventListener("touchmove", mouseMoveListner, false); canvas.addEventListener("touchend", mouseUpListner, false); canvas.addEventListener("touchcancel", mouseUpListner, false); //オブジェクト obj = new Object(); obj.x = 100; obj.y = 100; obj.w = 100; obj.h = 100; //タイマー開始 setTimerDraw(); } function setTimerDraw(){ clearInterval(timerDrawID); timerDrawID = setInterval("draw()", 100); } function draw() { //表示クリア ctx.clearRect(0, 0, cW, cH); ctx.beginPath(); //画像を描く if (mouseDownFlag) { ctx.fillRect(obj.x + dragDivX, obj.y + dragDivY, obj.w, obj.h); } else { ctx.fillRect(obj.x, obj.y, obj.w, obj.h); } } //マウスイベント function mouseDownListner(e) { var rect = e.target.getBoundingClientRect(); //ユーザーエージェント var isiPad = navigator.userAgent.match(/iPad/i) != null; var isiPhone = navigator.userAgent.match(/iPhone/i) != null; //座標取得 if (isiPad || isiPhone) { //iPad & iPhone用処理 mouseX1 = e.touches[0].pageX - rect.left; mouseY1 = e.touches[0].pageY - rect.top; } else { //PC用処理 mouseX1 = e.clientX - rect.left; mouseY1 = e.clientY - rect.top; } if (mouseX1 > obj.x && mouseX1 < obj.x + obj.w) { if (mouseY1 > obj.y && mouseY1 < obj.y + obj.h) { dragDivX = 0; dragDivY = 0; mouseDownFlag = true; } } } function mouseMoveListner(e) { if (mouseDownFlag) { //縦スクロールをしない(iPad & iPhone) e.preventDefault(); //ユーザーエージェント var isiPad = navigator.userAgent.match(/iPad/i) != null; var isiPhone = navigator.userAgent.match(/iPhone/i) != null; //座標取得 var rect = e.target.getBoundingClientRect(); if (isiPad || isiPhone) { //iPad & iPhone用処理 mouseX2 = e.touches[0].pageX - rect.left; mouseY2 = e.touches[0].pageY - rect.top; } else { //PC用処理 mouseX2 = e.clientX - rect.left; mouseY2 = e.clientY - rect.top; } if (mouseX2 < 0 || mouseX2 > cW || mouseY2 < 0 || mouseY2 > cH) dragEnd(); dragDivX = (mouseX2 - mouseX1); dragDivY = (mouseY2 - mouseY1); } } function mouseUpListner(e) { if (mouseDownFlag) { dragEnd(); } } function dragEnd() { mouseDownFlag = false; obj.x += dragDivX; obj.y += dragDivY; } <div style="text-align:center;"> <canvas id="testCanvas" width="300" height="300" style="border:1px solid #CCC;"></canvas> </div> canvas ドラッグ処理(iPad & iPhone 対応) body { background-color: #DDDDDD; font: 30px sans-serif; } var canvas; var ctx; var timerDrawID; //描画タイマーID var cW = 300; //キャンバス横サイズ var cH = 300; //キャンバス縦サイズ var mouseDownFlag = false; //マウスダウンしているかどうか var mouseX1; //ドラッグ開始した座標 var mouseY1; //ドラッグ開始した座標 var mouseX2; //ドラッグ中の座標 var mouseY2; //ドラッグ中の座標 var dragDivX; //ドラッグ開始地点と現在の差 var dragDivY; //ドラッグ開始地点と現在の差 var obj; window.onload = function() { init(); }; function init(){ //キャンバスの初期処理 canvas = document.getElementById('testCanvas'); if ( ! canvas || ! canvas.getContext ) return false; //2Dコンテキスト ctx = canvas.getContext('2d'); //イベント canvas.addEventListener("mousedown", mouseDownListner, false); canvas.addEventListener("mousemove", mouseMoveListner, false); canvas.addEventListener("mouseup", mouseUpListner, false); canvas.addEventListener("mouseout", mouseUpListner, false); canvas.addEventListener("touchstart", mouseDownListner, false); canvas.addEventListener("touchmove", mouseMoveListner, false); canvas.addEventListener("touchend", mouseUpListner, false); canvas.addEventListener("touchcancel", mouseUpListner, false); //オブジェクト obj = new Object(); obj.x = 100; obj.y = 100; obj.w = 100; obj.h = 100; //タイマー開始 setTimerDraw(); } function setTimerDraw(){ clearInterval(timerDrawID); timerDrawID = setInterval("draw()", 100); } function draw() { //表示クリア ctx.clearRect(0, 0, cW, cH); ctx.beginPath(); //画像を描く if (mouseDownFlag) { ctx.fillRect(obj.x + dragDivX, obj.y + dragDivY, obj.w, obj.h); } else { ctx.fillRect(obj.x, obj.y, obj.w, obj.h); } } //マウスイベント function mouseDownListner(e) { var rect = e.target.getBoundingClientRect(); //ユーザーエージェント var isiPad = navigator.userAgent.match(/iPad/i) != null; var isiPhone = navigator.userAgent.match(/iPhone/i) != null; //座標取得 if (isiPad || isiPhone) { //iPad & iPhone用処理 mouseX1 = e.touches[0].pageX - rect.left; mouseY1 = e.touches[0].pageY - rect.top; } else { //PC用処理 mouseX1 = e.clientX - rect.left; mouseY1 = e.clientY - rect.top; } if (mouseX1 > obj.x && mouseX1 < obj.x + obj.w) { if (mouseY1 > obj.y && mouseY1 < obj.y + obj.h) { dragDivX = 0; dragDivY = 0; mouseDownFlag = true; } } } function mouseMoveListner(e) { if (mouseDownFlag) { //縦スクロールをしない(iPad & iPhone) e.preventDefault(); //ユーザーエージェント var isiPad = navigator.userAgent.match(/iPad/i) != null; var isiPhone = navigator.userAgent.match(/iPhone/i) != null; //座標取得 var rect = e.target.getBoundingClientRect(); if (isiPad || isiPhone) { //iPad & iPhone用処理 mouseX2 = e.touches[0].pageX - rect.left; mouseY2 = e.touches[0].pageY - rect.top; } else { //PC用処理 mouseX2 = e.clientX - rect.left; mouseY2 = e.clientY - rect.top; } if (mouseX2 < 0 || mouseX2 > cW || mouseY2 < 0 || mouseY2 > cH) dragEnd(); dragDivX = (mouseX2 - mouseX1); dragDivY = (mouseY2 - mouseY1); } } function mouseUpListner(e) { if (mouseDownFlag) { dragEnd(); } } function dragEnd() { mouseDownFlag = false; obj.x += dragDivX; obj.y += dragDivY; } <div style="text-align:center;"> <canvas id="testCanvas" width="300" height="300" style="border:1px solid #CCC;"></canvas> </div> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/gQ5h/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/hikatsuka/gQ5h" title="canvas ドラッグ処理(iPad & iPhone 対応)">canvas ドラッグ処理(iPad & iPhone 対応) - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags drag iPad iPhone ドラッグ iphone Favorite by yoshimax keiji.shimad..: dragipadiphoneiPhone ドラッグ crosscontinu..: これを基にiPad WEBAppを作ってみます nogud: iPhone ドラッグiPad fantasista: iPadiPhone ドラッグ Forked sort new page view favorite forked forked: canvas ドラッグ処理(iPad & i.. taskuni 00 9views 117/3/1 forked: canvas ドラッグ処理(iPad & i.. taskuni 00 14views 117/3/1 forked: canvas ドラッグ処理(iPad & i.. Hiro 00 22views 119/3/1 forked: canvas ドラッグ処理(iPad & i.. Harumi 00 16views 117/3/1 1 2 3 4 5 6 7NEXT>>