javascript - HTML5 Canvas 图像使用按钮从左到右向上移动

Question

我正在尝试使用 HTML5 创建在线图像编辑器，但在使用按钮执行图像移动时遇到问题。它通过鼠标拖动来移动，但无法为按钮修复它。我想让它与上移、下移、右移、左移按钮一起使用。

jQuery('#moveUp').click(function () {
    var rect = canvas.getBoundingClientRect();

    var x = rect.left;
    var y = rect.top + 1;

    console.log(x);
    console.log(y);
});

这是我当前的程序。 Fiddle Project

Answer 1

尝试使用 image 而不是 canvas。

jQuery('#moveUp').click(function () {
var rect = image.getBoundingClientRect();
var x = rect.left;
var y = rect.top - 1;
clear();
element.translate(x, y);
drawImage();
});

...或者如果您更喜欢一个功能，以便不必重复自己:

function move(direction) {
  var rect = image.getBoundingClientRect();
  var x = rect.left;
  var y = rect.top;
  var dist = 5 //set distance

  switch (direction) {
    case 'up':
        y -= dist;
      break;
    case 'down':
        y += dist;
      break; 
    case 'left':
        x -= dist;
      break;
    case 'right':
        x += dist;
      break; 
  };

  clear();
    element.translate(x, y);
  drawImage();
};

jQuery('#moveUp').click(function () {
    move('up');
});


jQuery('#moveDown').click(function () {
    move('down');
});

jQuery('#moveLeft').click(function () {
    move('left');
});

jQuery('#moveRight').click(function () {
    move('right');
});

关于 key ，检查这个:https://api.jquery.com/keypress/ - 示例(如果您决定使用我在上面创建的函数):

$(document).keydown(function () {
     move('down');
});