javascript - 在 Seriously.js 中调整相机显示大小

Question

我正在尝试调整 Canvas DOM 元素中相机显示的大小。我尝试过使用事件监听器，并且能够毫无问题地调整 Canvas 大小。然而，相机的视频源不会更新其大小，它保持与初始化时相同。为了使其工作，我必须基本上破坏大部分组合，然后在每次发生窗口大小调整时重新初始化整个组合。它有效，但很丑。有人有更好的解决方案吗？也许有一种方法可以让这个更加优雅？感谢您的任何意见。

    window.addEventListener( 'resize', onWindowResize, false );
        function onWindowResize() {
        // seriously
        reformat = null
        source = null
        target.destroy()
        target = null
        seriously = new Seriously();
        canvas.width = window.innerWidth * devicePixelRatio;
        canvas.height = window.innerHeight * devicePixelRatio;
        var source = seriously.source('camera');
        target = seriously.target('#canvas'); 
        reformat = seriously.transform('reformat');
        reformat.source = source;
        reformat.width = canvas.width;
        reformat.height = canvas.height;
        target.source = reformat


        seriously.go(function(now) {
        var minutes;

        minutes = now / 6000;
        console.log("running")
        // split.angle = (minutes - Math.floor(minutes)) * PI2;
        // split.split = Math.cos(now / 1000) / 2 + 0.5;
    });

Answer 1

在迭代了每个 Seriously 示例之后，我找到了一个简单的解决方案。

   var devicePixelRatio = window.devicePixelRatio || 1;

    function resize() {
      target.width = window.innerWidth * devicePixelRatio;
      target.height = window.innerHeight * devicePixelRatio; 
      reformat.width = target.width;
      reformat.height = target.height;
    } 

    window.onresize = resize;