1

このトピックは私の質問に答えるには不十分かもしれません。問題は、私はキャンバスを持っていて、マウスをクリックしている間に何かを描くことができるということです..しかし、タッチでそれをやろうとすると（つまり、iPhoneやその他のタッチ操作デバイス）、動きが検出されなかったため、何も描画できませんでした.キャンバス..タッチアクションを検出するには何が必要ですか? どんなアイデアでも素晴らしいでしょう..

ここに私のjsフィドルリンクがありますhttp://jsfiddle.net/regeme/xNSVm/

また、ここに描画用のスクリプトがあります

painting = false;
var WIDTH = 300;
var HEIGHT =300;

function clear() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";
}

function generate(){

var newCanvas = document.createElement('canvas');
newCanvas.width = WIDTH;
newCanvas.height = HEIGHT;
document.getElementById('container').appendChild(newCanvas);
ctx = newCanvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";

newCanvas.onmousedown = function(e) {
    painting = true;
ctx = newCanvas.getContext('2d');

lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};

newCanvas.onmouseup = function(e) {
painting = false;
};

newCanvas.onmousemove = function(e) {
if (painting) {
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    // find all points between        
    var x1 = mouseX,
        x2 = lastX,
        y1 = mouseY,
        y2 = lastY;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep){
        var x = x1;
        x1 = y1;
        y1 = x;

        var y = y2;
        y2 = x2;
        x2 = y;
    }
    if (x1 > x2) {
        var x = x1;
        x1 = x2;
        x2 = x;

        var y = y1;
        y1 = y2;
        y2 = y;
    }

    var dx = x2 - x1,
        dy = Math.abs(y2 - y1),
        error = 0,
        de = dy / dx,
        yStep = -1,
        y = y1;

    if (y1 < y2) {
        yStep = 1;
    }

    for (var x = x1; x < x2; x++) {
        if (steep) {
            ctx.fillRect(y, x, 1, 1);
        } else {
            ctx.fillRect(x, y, 1, 1);
        }

        error += de;
        if (error >= 0.5) {
            y += yStep;
            error -= 1.0;
        }
    }

    lastX = mouseX;
    lastY = mouseY;

        }
     };

   }

    document.getElementById('button').onclick = clear;
    document.getElementById('generate').onclick = generate;
    document.onmouseup = function(e) {
    painting = false;
    };
    generate();
4

2 に答える 2

1

コメントできないか、このリンクをコメントに残すだけです。http://jsfiddle.net/gfcarv/66nVn/

しかし、私はここにいるので、コードで何が起こっているのかを (種類を強調して) 知ることができます。

これは、タッチ イベントまたはマウス イベントがアタッチされる部分です。 

// detect touch capabilities
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);

// attach the touchstart, touchmove, touchend event listeners.
if(touchAvailable){
    canvas.addEventListener('touchstart', draw, false);
    canvas.addEventListener('touchmove', draw, false);
    canvas.addEventListener('touchend', draw, false);        
}    
// attach the mousedown, mousemove, mouseup event listeners.
else {
    canvas.addEventListener('mousedown', draw, false);
    canvas.addEventListener('mousemove', draw, false);
    canvas.addEventListener('mouseup', draw, false);
}

これがドロワー関数です。基本的には、switch ステートメントを使用して、発生している正しいイベントに対して正しい計算を実行します。

 // create a drawer which tracks touch movements
var drawer = {
    isDrawing: false,
    touchstart: function (coors) {
        context.beginPath();
        context.moveTo(coors.x, coors.y);
        this.isDrawing = true;
    },
    touchmove: function (coors) {
        if (this.isDrawing) {
            context.lineTo(coors.x, coors.y);
            context.stroke();
        }
    },
    touchend: function (coors) {
        if (this.isDrawing) {
            this.touchmove(coors);
            this.isDrawing = false;
        }
    }
};
// create a function to pass touch events and coordinates to drawer
function draw(event) { 
    var type = null;
    // map mouse events to touch events
    switch(event.type){
        case "mousedown":
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchstart";                  
        break;
        case "mousemove":                
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchmove";                
        break;
        case "mouseup":                
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchend";
        break;
    }    

    // touchend clear the touches[0], so we need to use changedTouches[0]
    var coors;
    if(event.type === "touchend") {
        coors = {
            x: event.changedTouches[0].pageX,
            y: event.changedTouches[0].pageY
        };
    }
    else {
        // get the touch coordinates
        coors = {
            x: event.touches[0].pageX,
            y: event.touches[0].pageY
        };
    }
    type = type || event.type
    // pass the coordinates to the appropriate handler
    drawer[type](coors);
}

それらを分解してそのフィドルを研究すると、コードを作り直すか、正しいイベントを追加することができるはずです。このコンテキストでは、機能が少しきれいに見えるように、可能であればやり直します。

明日時間があれば、必要に応じてさらに情報を追加して編集します。ありがとう！

于 2013-08-12T03:20:34.007 に答える
0

ouchstart、touchend、touchmoveなどの「タッチ」イベントを使用する必要があります。ここにタッチイベントに関する論文があります。

http://www.html5rocks.com/en/mobile/touch/

于 2013-08-12T02:58:53.367 に答える