broodjeaap/streamwatcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

got canvas resizing working with the watcharea coordinates

Browse source
This commit is contained in:
BroodjeAap 2020-07-30 18:34:14 +00:00
parent 87b50bdeb2
commit 70ff965170
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/js/stream.js
View file

@ -21,10 +21,10 @@ class WatchArea {
ctx.lineWidth = "3";
ctx.strokeStyle = "rgb(" + this.R + ", " + this.G + ", " + this.B + ")";
ctx.rect(
this.x0,
this.y0,
this.x1 - this.x0,
this.y1 - this.y0
this.x0 * (canvas.width / img.width),
this.y0 * (canvas.height / img.height),
(this.x1 - this.x0) * (canvas.width / img.width),
(this.y1 - this.y0) * (canvas.height / img.height)
);
ctx.stroke();
}
@ -51,15 +51,16 @@ document.addEventListener("DOMContentLoaded", function(){
};
canvas.addEventListener("mousedown", e => {
watchArea.x0 = e.offsetX;
watchArea.y0 = e.offsetY;
watchArea.x0 = Math.round(e.offsetX * (img.width / canvas.width));
watchArea.y0 = Math.round(e.offsetY * (img.height / canvas.height));
isDrawing = true;
});
canvas.addEventListener("mousemove", e => {
if(isDrawing === true) {
watchArea.x1 = e.offsetX;
watchArea.y1 = e.offsetY;
watchArea.x1 = Math.round(e.offsetX * (img.width / canvas.width));
watchArea.y1 = Math.round(e.offsetY * (img.height / canvas.height));
console.log(watchArea.x1, watchArea.y1)
draw();
update();
}
@ -80,6 +81,7 @@ function draw(){
var rect = contentDiv.getBoundingClientRect();
canvas.width = Math.floor(rect.width * 0.9);
canvas.height = (img.height / img.width) * canvas.width;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawImage();
watchAreas.forEach(watchArea => watchArea.draw(ctx));