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);
});

這是我當前的程序。 小提琴項目

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');
});

關於鍵，請檢查以下一項： https : //api.jquery.com/keypress/-示例（如果您決定使用我上面創建的功能）：

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