Как перемещать прямоугольник на холсте

Question

Я использую холст в своем приложении с использованием JavaScript. На этом холсте я рисую один прямоугольник. Я хочу перемещать прямоугольник с помощью мыши (например, движущегося слайдера), как перемещать этот прямоугольник с помощью JavaScript или J-запроса.

Answer 1

брезентовой буквально только поверхность, что вы рисуете, и ни одна из вещей, которые вы рисуете не являются объектами.

Если вы хотите притвориться, что это объекты (например, перемещение по прямоугольнику или линии), вам необходимо отслеживать все и выполнять все тесты и повторное рисование.

Я написал gentle introduction article, начав с создания прямоугольников, которые вы можете выбрать и перетащить. Дайте это прочитать.

Answer 2

На втором чтении, я думаю, что я неправильно понял ваш вопрос, так вот обновленная версия:

http://jsfiddle.net/HSMfR/4/

$(function() { 
    var 
    $canvas = $('#canvas'), 
    ctx = $canvas[0].getContext('2d'), 
    offset = $canvas.offset(), 
    draw, 
    handle; 

    handle = { 
    color: '#666', 
    dim: { w: 20, h: canvas.height }, 
    pos: { x: 0, y: 0 } 
    }; 

    $canvas.on({ 
    'mousedown.slider': function (evt) { 
     var grabOffset = { 
     x: evt.pageX - offset.left - handle.pos.x, 
     y: evt.pageY - offset.top - handle.pos.y 
     }; 

     // simple hit test 
     if ( grabOffset.x >= 0 
      && grabOffset.x <= handle.dim.w 
      && grabOffset.y >= 0 
      && grabOffset.x <= handle.dim.h 
    ) { 
     $(document).on({ 
      'mousemove.slider': function (evt) { 
      handle.pos.x = evt.pageX - offset.left - grabOffset.x; 

      // prevent dragging out of canvas 
      if (handle.pos.x < 0) { 
       handle.pos.x = 0; 
      } 

      if (handle.pos.x + handle.dim.w > canvas.width) { 
       handle.pos.x = canvas.width - handle.dim.w; 
      } 

      //handle.pos.y = evt.pageY - offset.top - grabOffset.y; 
      }, 
      'mouseup.slider': function() { 
      $(document).off('.slider'); 
      } 
     }); 
     } 
    } 
    }); 

    draw = function() { 
    var val = (100 * (handle.pos.x/(canvas.width - handle.dim.w))).toFixed(2) + '%'; 

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    ctx.fillStyle = handle.color; 
    ctx.fillRect(handle.pos.x, handle.pos.y, handle.dim.w, handle.dim.h); 

    ctx.textBaseline = 'hanging'; 
    ctx.font = '12px Verdana'; 
    ctx.fillStyle = '#333'; 
    ctx.fillText(val, 4, 4); 
    ctx.fillStyle = '#fff'; 
    ctx.fillText(val, 3, 3); 
    }; 

    setInterval(draw, 16); 
}); 

---

предыдущая версия:

Очень простое решение распространяются на:

http://jsfiddle.net/HSMfR/

$(function() { 
    var 
    ctx = $('#canvas')[0].getContext('2d'), 
    $pos = $('#pos'), 
    draw; 

    draw = function() { 
    var x = ($pos.val()/100) * (ctx.canvas.width - 20); 

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    ctx.fillStyle = 'black'; 
    ctx.fillRect(x, 0, 20, 20); 
    }; 

    setInterval(draw, 40); 
});