简体   繁体   中英

Resizing camera display in Seriously.js

I'm trying to resize the camera display within the canvas DOM element. I've tried using an event listener and am able to resize the canvas without any problem. The camera's video feed however is not updating its size, t stays the same as it was upon initialization. In order to make it work I've had to basically destroy much of the composition and then re-initialize the whole thing every time a window resize occurs. It works but its ugly. Does anyone have a better solution in mind? Maybe there is a way to make this one more elegant? Thanks for any input.

    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;
    });

After iterating through each of the Seriously examples I found a simple solution.

   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;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM