canvas ドラッグ処理（iPad & iPhone 対応）

hikatsuka

2010-07-29 16:46:33

License: MIT License

Fork: 24

Fav: 5

View: 10477

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 116 lines
HTML 3 lines
CSS 1 lines

canvas ドラッグ処理（iPad & iPhone 対応）

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>body { background-color: #DDDDDD; font: 30px sans-serif; }

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