javascript - 如何使用触摸事件在 Canvas 内移动对象？

Question

大家好，我只是想了解它是如何工作的我有一个基本的 Canvas 底座，只是用 JavaScript 编写，我想使用触摸事件移动它

我对此不太确定，但是我可以使用拖动事件吗？

我需要使用循环函数吗？

我怎样才能触发那个蓝色立方体？

我知道有很多 JavaScript 引擎，事实上我正在使用 Phaser，但我想了解这一点

谢谢

var canvas, cx, width, height;

var cube = {
    x: 80,
    y: 100,
    update: function () {

    },
    draw: function (ctx) {
        ctx.save();

        ctx.fillStyle = "blue";
        ctx.fillRect(100, 410, 50, 50);

        ctx.restore();
    }
};


function onpress(e) {
    e.preventDefault();
    var whichArt = e.target;
    var touch = e.touches[0];

    var moveOffsetX = whichArt.offsetLeft - touch.pageX;
    var moveOffsetY = whichArt.offsetTop - touch.pageY;

    whichArt.addEventListener('touchmove', function () {
        var positionX = touch.pageX + moveOffsetX;
        var positionY = touch.pageY + moveOffsetY;

        cube.x = positionX;
        cube.y = positionY;

        console.log(cube.x);
    }, false);
}

function main() {
    canvas = document.createElement("canvas");

    width = window.innerWidth;
    height = window.innerHeight;

    if (width >= 500) {
        width = 320;
        height = 480;
        canvas.style.border = "1px solid #000";
    }

    document.addEventListener("touchstart", onpress);
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    run();
}


function run() {
    var loop = function () {
        update();
        render();
        window.requestAnimationFrame(loop, canvas);
    }
    window.requestAnimationFrame(loop, canvas);
}

function update() {

}

function render() {

    cube.draw(ctx);
}

main();

http://jsfiddle.net/marcogomesr/sxbo3r83/

Answer 1

Canvas 只是一个被动的绘图表面:您必须自己处理拖动。
下面是一个简短的例子:
Draggables对象必须实现isPointInside，并添加到draggables对象列表中。
我使用了一个 DragData 对象来存储可拖动对象的列表，即当前拖动的对象，也许您需要存储拖动的开始/当前点，并处理拖动偏移，以便用户将对象保持在该点上他/她开始拖动的地方。

http://jsfiddle.net/3ksvn4y0/3/

var canvas, cx, width, height;
var canvasRect;

var cube1, cube2;

var dragData = {
    draggables: [],
    start: {        x: 0,        y: 0
    },
    current: {      x: 0,        y: 0
    },
    target: null
};

function Cube(x,y,w,h, color) {
  this.x=x; this.y=y; this.w=w; this.h = h;
  this.color = color;
}

Cube.prototype = {
    update: function () {

    },
    draw: function (ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    },
    isPointInside: function (x, y) {
        return (x >= this.x) && (x < this.x + this.w) && (y > this.y) && (y < this.y + this.h);
    }
};

var pointerCoords = {
    x: 0,
    y: 0,
    update: function (e) {
        var coords = e.touches ? e.touches[0] : e;
        this.x = coords.pageX - canvasRect.left;
        this.y = coords.pageY - canvasRect.top;
    }
};


function onStart(e) {
    e.preventDefault();
    pointerCoords.update(e);
    // look if we start the touch within a draggable object
    var target = null;
    for (var i = 0; i < dragData.draggables.length; i++) {
        var draggable = dragData.draggables[i];
        if (draggable.isPointInside(pointerCoords.x, pointerCoords.y)) {
            target = draggable;
            break;
        }
    }
    dragData.target = target;
}

function onMove(e) {
    pointerCoords.update(e);
    var target = dragData.target;
    if (!target) return;
    target.x = pointerCoords.x;
    target.y = pointerCoords.y;
}

function onStop(e) {
    pointerCoords.update(e);
    e.preventDefault();
    if (!dragData.target) return;
    onMove(e);
    dragData.target = null;
}

function main() {
    canvas = document.createElement("canvas");

    width = window.innerWidth;
    height = window.innerHeight;

    if (width >= 500) {
        width = 320;
        height = 480;
        canvas.style.border = "1px solid #000";
    }

    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    canvasRect = canvas.getBoundingClientRect();
    canvas.addEventListener("touchstart", onStart);
    canvas.addEventListener('touchmove', onMove);
    canvas.addEventListener("touchstop", onStop);
    canvas.addEventListener("mousedown", onStart);
    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener("mouseup", onStop);

    cube1 = new Cube(100, 80, 30, 30, 'blue');
    cube2 = new Cube(150, 160, 20, 20, 'red');
    dragData.draggables.push(cube1, cube2);
    run();
}


function run() {
    var loop = function () {
        requestAnimationFrame(loop);
        update();
        render();
    }
    loop();
}

function update() {

}

function render() {
    ctx.clearRect(0, 0, width, height);
    cube1.draw(ctx);
    cube2.draw(ctx);
}

main();