所以我必须根据给定的坐标在视频上绘制多个矩形。问题是我必须每秒在不同的坐标上绘制它们,以清除它们的过去位置。
function draw() {
var time = $(".video-detect")[0].duration;
var i = 0;
for (let k = 0; k < time; k++) {// every second
setTimeout(function () {
var objArray = [{}];
for (; i < facesObject.length; i++) {
var x = facesObject[i].Frame_idx[k].Coordinates[0],
y = facesObject[i].Frame_idx[k].Coordinates[1],
width = facesObject[i].Frame_idx[k].Coordinates[2] - facesObject[i].Frame_idx[k].Coordinates[0],
height = facesObject[i].Frame_idx[k].Coordinates[3] - facesObject[i].Frame_idx[k].Coordinates[1];
// and here I have to draw the rectangle
// I don't know how to clear the previous rectangles
}
}
console.log(k);
}, k * 1000);
}
}
答案 0 :(得分:0)
您可以做的是更改当前画布元素的坐标。
请在clear()
函数的redraw()
函数中设置canvas变量。
function draw() {
var time = $(".video-detect")[0].duration;
var i = 0;
for (let k = 0; k < time; k++) {// every second
setTimeout(function () {
var objArray = [{}];
for (var i = 0; i < facesObject.length; i++) {
var x = facesObject[i].Frame_idx[k].Coordinates[0],
y = facesObject[i].Frame_idx[k].Coordinates[1],
width = facesObject[i].Frame_idx[k].Coordinates[2] - facesObject[i].Frame_idx[k].Coordinates[0],
height = facesObject[i].Frame_idx[k].Coordinates[3] - facesObject[i].Frame_idx[k].Coordinates[1];
redraw(x, y, width, height);
}
}
console.log(k);
}, (k * 1000);
}
/**
* Redraws the canvas element at a new position.
*
* @param: {string} x
* @param: {string} y
* @param: {string} with
* @param: {string} height
*/
function redraw(x, y,, width, height) {
// Clears the canvas element.
clear(canvas); // PUT YOU CANVAS ELEMENT VARIABLE HERE.
// Sets the fill style.
draw.fillStyle = 'rgba(255,255,255,1)';
// Draw the element with new coordinates.
draw.fillRect(x, y, width, height);
}
/**
* Clears an element from the canvas.
*
* @param: {object} c - The canvas element.
*/
function clear(c) {
c.clearRect(0, 0, WIDTH, HEIGHT);
}