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

关于键，请检查一下：https://api.jquery.com/keypress/ - 示例（如果您决定使用我在上面创建的功能）：

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

HTML5画布图像向左移动向下按钮

1 个答案: