canvasによるtouch,mouseイベント(jquery)

元がブラウザ仕様なのでスマホ対応にしたいです。できればこの方に近い形式で行きたいですが……。

$(function(){
var canvas = document.getElementById("mycanvas");
if(!canvas || !canvas.getContext)return false;
var ctx = canvas.getContext("2d");

var startX, startY, x, y, borderWidth = 10,
isDrawing = false;

$("#mycanvas").ondown(function(e){
isDrawing = true;
startX = e.pageX - $(this).offset().left - borderWidth;
startY = e.pageY - $(this).offset().top - borderWidth;
})
.onmove(function(e){
if(!isDrawing)return;
x = e.pageX - $(this).offset().left - borderWidth;
y = e.pageY - $(this).offset().top - borderWidth;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(x,y);
ctx.stroke();
startX = x;
startY = y;
ctx.lineCap = "round";
ctx.lineJoin = "bevel";
})
.onup(function(){
isDrawing = false;
})
.onleave(function(){
isDrawing = false;
});

$("#penColor").change(function(){
ctx.strokeStyle = $(this).val();
});
$("#penWidth").change(function(){
ctx.lineWidth = $(this).val();
});
$("#eraser-on").click(function(){
ctx.globalCompositeOperation = 'destination-out';
});
$("#eraser-off").click(function(){
ctx.globalCompositeOperation = 'source-over';
});
$("#erase").click(function(){
if(!confirm("本当に消去しますか？"))return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
});

if (window.ontouchstart === undefined){
canvas.addEventListener('mousedown', ondown, false);
canvas.addEventListener('mouseup', onup, false);
canvas.addEventListener('mousemove', onmove, false);
canvas.addEventListener('mouseleave',onleave, false);
}else{
canvas.addEventListener('touchstart',ondown, false);
canvas.addEventListener('touchend', onup, false);
canvas.addEventListener('touchmove', onmove, false);
canvas.addEventListener('touchleave',onleave, false);
};

});

行動規範の内容に同意します

回答1件

ベストアンサー

lang
1if (window.ontouchstart === undefined) {
2    canvas.addEventListener('mousedown', ondown, false);
3    /* 略 */
4} else {
5    canvas.addEventListener('touchstart',ondown, false); 
6    /* 略 */
7}

の部分でタッチサポート・非サポート環境の分岐はできているので、対応するondown, onupなどの関数を用意してやれば良いと思います

具体的には

javascript
1$("#mycanvas").ondown(function(e) {
2    isDrawing = true; 
3    startX = e.pageX - $(this).offset().left - borderWidth; 
4    startY = e.pageY - $(this).offset().top - borderWidth;
5})
6/*
7    中略
8*/
9.onleave(function() {
10    isDrawing = false;
11});

の部分を

var ondown = function (e) {
    isDrawing = true; 
    startX = e.pageX - $(this).offset().left - borderWidth; 
    startY = e.pageY - $(this).offset().top - borderWidth;
};
/*
    中略
*/
var onleave = function (e) {
    isDrawing = false;
};

のように書き換えればいいかと。

さらにjQueryでイベント登録する方法として .ondown(callback) の他に .on('down', callback)
といった方法があるのでjQueryに統一して以下のようにしてもいいかもしれません

lang
1if (window.ontouchstart === undefined) {
2    $("#mycanvas")
3    .on('mousedown', ondown)
4    .on('mouseup', onup);
5    .on('mousemove', onmove)
6    .on('mouseleave', onleave);
7} else {
8    $("#mycanvas")
9    .on('touchstart', ondown)
10    .on('touchend', onup)
11    .on('touchmove', onmove)
12    .on('touchleave', onleave);
13}

他の方法が良ければondown(), onup() 等を用意せずイベント名の方をifで分岐させるといった事もできますね

lang
1var EVENTNAME_TOUCHSTART, EVENTNAME_TOUCHEND, EVENTNAME_TOUCHMOVE, EVENTNANE_TOUCHLEAVE;
2if (window.ontouchstart === undefined) {
3    EVENTNAME_TOUCHSTART = 'mousedown';
4    EVENTNAME_TOUCHEND = 'mouseup';
5    EVENTNAME_TOUCHMOVE = 'mousemove';
6    EVENTNAME_TOUCHLEAVE = 'mouseleave';
7} else {
8    EVENTNAME_TOUCHSTART = 'touchstart';
9    EVENTNAME_TOUCHEND = 'touchend';
10    EVENTNAME_TOUCHMOVE = 'touchmove';
11    EVENTNAME_TOUCHLEAVE = 'touchleave';
12}
13
14$("#mycanvas").on(EVENTNAME_TOUCHSTART, function (e) {
15    isDrawing = true; 
16    startX = e.pageX - $(this).offset().left - borderWidth; 
17    startY = e.pageY - $(this).offset().top - borderWidth;
18})
19/*
20    中略
21*/
22.on(EVENTNAME_TOUCHLEAVE, function (e) {
23    isDrawing = false;
24});
25