Distorção de tela HTML5
Estou tentando incluir um elemento de tela em um vídeo de tamanho dinâmico que será carregado de forma assíncrona. Na tela, o usuário poderá arrastar e redimensionar uma caixa de seleção de retângulo.
No meu arquivo JS, tenho um ouvinte observando a janela e redimensionando a tela através das propriedades .width e .height do elemento de tela para ter a largura e a altura exatas do vídeo.
Para o código de seleção retangular JS, estou seguindo o violino da primeira resposta a esta pergunta do StackOverflow:desenhando um retângulo com o mouse, clique e arraste - javascript, no entanto, por algum motivo,quando o usuário é rolado para baixo na página o desenho na tela é completamente distorcido e os retângulos começam a ser desenhados bem longe do mouse. Quando o usuário está no topo da página, o retângulo é desenhado na posição correta. Por que isso aconteceria?
Abaixo estão alguns dos códigos JS que estou usando:
// 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));
....
}
Por favor, desconsidere as ineficiências. Estou apenas tentando invadir uma coisa que funciona antes de limpá-la.