So verschieben Sie das Rechteck auf der Leinwand

Question

Ich verwende Leinwand in meiner Anwendung mit JavaScript. Auf dieser Leinwand zeichne ich ein Rechteck. Ich möchte Rechteck mit Hilfe der Maus bewegen (z. B. Schieber verschieben), wie dieses Rechteck mit JavaScript oder J-Abfrage zu bewegen.

Answer 1

Eine Leinwand ist buchstäblich nur eine Oberfläche, die Sie malen auf, und keines der Dinge, die Sie Objekte malen sind.

Wenn Sie so tun wollen, als ob es sich um Objekte handelt (wie ein Rechteck oder eine Linie), müssen Sie alles verfolgen und alle Treffer-Tests durchführen und sich neu bemalen.

Ich schrieb eine gentle introduction article auf die ersten Schritte, indem Sie Rechtecke, die Sie auswählen und ziehen können. Lass das lesen.

Answer 2

Auf einer zweiten Lesung, ich glaube, ich Ihre Frage falsch verstanden, also hier eine aktualisierte Version:

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

---

prev Version:

Sehr einfache Lösung verlängern auf:

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