Question

因此，我有一个视频，我必须在该视频上同时在多个面上绘制矩形。这些矩形必须根据这些面的移动而移动。我有一个数组，用于存储有关每帧矩形位置的信息。

在播放视频时，我调整了画布的大小，以使其覆盖除按钮以外的整个视频。

$(".video-detect").on("play", function resize_canvas() {
            var w = this.offsetWidth;
            var h = this.offsetHeight;
            canvas = document.getElementById("cv1");
            ctx = canvas.getContext("2d");
            canvas.width = w;
            canvas.height = h - 75;

            draw();
        });

我在获取画布和上下文引用之后调用了draw函数。在这里，我尝试至少每秒钟绘制视频而不是每一帧。

function draw() {
           var time = $(".video-detect")[0].duration;
           var i = 0;
           for (let k = 1; k < time; k++) {
               setTimeout(function () {
                   var objArray = [{}];
                   for (; i < facesObject.length; i++) {
                       var x = facesObject[i].Frame_idx[k].Coordinates[0],//x1 coordinate
                           y = facesObject[i].Frame_idx[k].Coordinates[1],//y1 coordinate
                           width = facesObject[i].Frame_idx[k].Coordinates[2] - facesObject[i].Frame_idx[k].Coordinates[0],//x2 - x1 coordinate
                           height = facesObject[i].Frame_idx[k].Coordinates[3] - facesObject[i].Frame_idx[k].Coordinates[1];//y2 - y1 coordinate

                      // If i draw the rect here with x y width height params I have trouble clearing the canvas for redraw the next iteration
                   }
                   console.log(k);
               }, k * 1000);
           }
       }

根据存储在对象数组中的坐标，每秒在画布上的画布上绘制多个矩形

0 个答案: