Question

我正在尝试在canvas DOM元素中调整相机显示的大小。我已经尝试使用事件监听器，并且能够毫无问题地调整画布大小。但是，摄像机的视频输入不会更新其大小，t保持与初始化时相同。为了使它工作，我必须基本上破坏大部分组合，然后每次窗口调整大小时重新初始化整个事物。它有效，但很难看。有没有人有更好的解决方案？也许有办法让这个更优雅？感谢您的任何意见。

    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;

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

1 个答案: