Ich versuche, ein Canvas-Element über ein Video mit dynamischer Größe einzufügen, das asynchron geladen wird. Auf der Leinwand kann der Benutzer ein Auswahlfeld für ein Rechteck ziehen und dessen Größe ändern.

In meiner JS-Datei kann ein Listener das Fenster beobachten und die Größe der Zeichenfläche über die Eigenschaften .width und .height des Zeichenflächenelements so ändern, dass sie der exakten Breite und Höhe des Videos entsprechen.

Für den rechteckigen JS-Auswahlcode verfolge ich die Geige von der ersten Antwort auf diese StackOverflow-Frage:Zeichnen eines Rechtecks per Mausklick und Ziehen - Javascript, jedoch aus irgendeinem Grund,wenn der Benutzer auf der Seite nach unten gescrollt wird Zeichnen auf der Leinwand ist vollständig verzerrt, und Rechtecke werden ziemlich weit von der Maus entfernt gezeichnet. Befindet sich der Benutzer jedoch oben auf der Seite, wird das Rechteck an der richtigen Position gezeichnet. Warum sollte das passieren?

Below ist ein Teil des JS-Codes, den ich verwende:

  
// Happens on mousedown event
  downCanvas: function(e) {
    $('.label-grid-canvas').css('cursor','crosshair');
    this.isDrawing = true
    this.startX = parseInt(e.clientX - this.offsetX);
    this.startY = parseInt(e.clientY - this.offsetY);
  },
  
// Happens on mouseup event
  upCanvas: function(e) {
    this.isDrawing = false;
    $('.label-grid-canvas').css('cursor','default');
  },
  // Happens on mousemove event
  moveCanvas: function(e) {
    if (this.isDrawing) {
      var mouseX = parseInt(e.clientX - this.offsetX);
      var mouseY = parseInt(e.clientY - this.offsetY);

      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.beginPath();
      this.ctx.rect(this.startX, this.startY, mouseX - this.startX, mouseY - this.startY);
      this.ctx.stroke();
    }
  },

  resizeCanvas: function() {
    this.canvas.width = $('#video-canvas')[0].offsetWidth;
    this.canvas.height = $('#video-canvas')[0].offsetHeight;

    this.canvasOffset = $('.label-grid-canvas').offset();
    this.offsetX = this.canvasOffset.left;
    this.offsetY = this.canvasOffset.top;

    this.redraw();
  },

  redraw: function() {
    this.ctx.strokeStyle = 'blue';
    this.ctx.lineWidth = '2';
    this.ctx.strokeRect(0, 0, $('#video-canvas')[0].offsetWidth,
        $('#video-canvas')[0].offsetHeight);
  },

// Happens after page-load
  initialize: function(options) {
    this.canvas = document.getElementById('label-grid-canvas');
    this.isDrawing = false;
    this.ctx = this.canvas.getContext('2d');
    this.startX;
    this.startY;
    this.canvasOffset = $('.label-grid-canvas').offset();
    this.offsetX = this.canvasOffset.left;
    this.offsetY = this.canvasOffset.top;
    $(window).on('resize', _.bind(this.resizeCanvas, this));
 ....
}

Bitte ignorieren Sie die Ineffizienzen, ich versuche erst, eine funktionierende Sache zusammen zu hacken, bevor ich sie bereinige.