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

switched a Rectangle class in javascript

Browse source
This commit is contained in:
BroodjeAap 2020-07-12 18:27:59 +00:00
parent d4d0ba593d
commit b159278efe
1 changed files with 51 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
static/js/stream.js
View file

@ -4,16 +4,40 @@ let img = null;
let isDrawing = false; let isDrawing = false;
// rectangle class Rectangle {
let x0 = 0; constructor(name, x0, y0, x1, y1, R, G, B) {
let y0 = 0; this.name = name;
let x1 = 0; this.x0 = x0;
let y1 = 0; this.y0 = y0;
this.x1 = x1;
this.y1 = y1;
this.R = R;
this.G = G;
this.B = B;
}
// color draw(ctx) {
let R = 0; ctx.beginPath();
let G = 0; ctx.lineWidth = "3";
let B = 0; ctx.strokeStyle = "rgb(" + this.R + ", " + this.G + ", " + this.B + ")";
ctx.rect(
this.x0,
this.y0,
this.x1 - this.x0,
this.y1 - this.y0
);
ctx.stroke();
}
}
let rectangle = new Rectangle(
"",
0, 0,
0, 0,
0, 0, 0
)
let rectangles = [];
document.addEventListener("DOMContentLoaded", function(){ document.addEventListener("DOMContentLoaded", function(){
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
@ -26,15 +50,15 @@ document.addEventListener("DOMContentLoaded", function(){
}; };
canvas.addEventListener("mousedown", e => { canvas.addEventListener("mousedown", e => {
x0 = e.offsetX; rectangle.x0 = e.offsetX;
y0 = e.offsetY; rectangle.y0 = e.offsetY;
isDrawing = true; isDrawing = true;
}); });
canvas.addEventListener("mousemove", e => { canvas.addEventListener("mousemove", e => {
if(isDrawing === true) { if(isDrawing === true) {
x1 = e.offsetX; rectangle.x1 = e.offsetX;
y1 = e.offsetY; rectangle.y1 = e.offsetY;
draw(); draw();
update(); update();
} }
@ -51,21 +75,13 @@ document.addEventListener("DOMContentLoaded", function(){
function draw(){ function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
drawImage(); drawImage();
drawRectangle(); rectangle.draw(ctx);
} }
function drawImage(){ function drawImage(){
ctx.drawImage(img, 0, 0) ctx.drawImage(img, 0, 0)
} }
function drawRectangle(){
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "rgb(" + R + ", " + G + ", " + B + ")";
ctx.rect(x0,y0,x1-x0,y1-y0);
ctx.stroke();
}
function update() { function update() {
var existingRow = document.getElementById("addWatchAreaRow") var existingRow = document.getElementById("addWatchAreaRow")
if (existingRow !== null) { if (existingRow !== null) {
@ -90,21 +106,21 @@ function submitNewArea(){
} }
function updateRectInputs(){ function updateRectInputs(){
document.getElementsByName("R")[0].value = R; document.getElementsByName("R")[0].value = rectangle.R;
document.getElementsByName("G")[0].value = G; document.getElementsByName("G")[0].value = rectangle.G;
document.getElementsByName("B")[0].value = B; document.getElementsByName("B")[0].value = rectangle.B;
document.getElementsByName("x0")[0].value = x0; document.getElementsByName("x0")[0].value = rectangle.x0;
document.getElementsByName("y0")[0].value = y0; document.getElementsByName("y0")[0].value = rectangle.y0;
document.getElementsByName("x1")[0].value = x1; document.getElementsByName("x1")[0].value = rectangle.x1;
document.getElementsByName("y1")[0].value = y1; document.getElementsByName("y1")[0].value = rectangle.y1;
} }
let changeR = function(elem){R = elem.value; draw();} let changeR = function(elem){rectangle.R = elem.value; draw();}
let changeG = function(elem){G = elem.value; draw();} let changeG = function(elem){rectangle.G = elem.value; draw();}
let changeB = function(elem){B = elem.value; draw();} let changeB = function(elem){B = elem.value; draw();}
let changeX0 = function(elem){x0 = elem.value; draw();} let changeX0 = function(elem){rectangle.x0 = elem.value; draw();}
let changeY0 = function(elem){y0 = elem.value; draw();} let changeY0 = function(elem){rectangle.y0 = elem.value; draw();}
let changeX1 = function(elem){x1 = elem.value; draw();} let changeX1 = function(elem){rectangle.x1 = elem.value; draw();}
let changeY1 = function(elem){y1 = elem.value; draw();} let changeY1 = function(elem){rectangle.y1 = elem.value; draw();}