Question

我已经在这里找到了很多关于这个特定问题的有用信息，但是还不能解决它。正如标题所示，问题是缩放html5画布，并且div覆盖该画布，同时保持两者的纵横比。在这种情况下，div是画布顶部的UI。

目前，画布缩放似乎很好。但是，按比例缩放UI已经证明是麻烦的。以下内容似乎适用于iPad上的Chrome，Android和Safari上的一些测试。它在Firefox，IE或Opera上并不那么有效。

本质上，我正在使用画布缩放方法，并尝试使用相同比例的CSS缩放来缩放UI。在下面的示例中，我还应用特定于供应商的前缀来显示Firefox和Opera中的效果。如果没有这些，缩放不适用。

有一些实例添加了滚动条，但可以使用overflow：hidden删除它们。我没有在这个小提琴中应用它，所以效果更明显。

标记：

<body>
    <div id='wrapper'>
        <canvas id='main' width="800px" height="600px"></canvas>
        <div id='ui'>
            <div id='close' class='ui-button'></div>
            <div id='next' class='ui-button'></div>
        </div>
    </div>
</body>

CSS：

html, body{
            margin: 0;
        }
        #wrapper{
            position: relative;
            margin: 0 auto;
            width: 800px;
            height: 600px;
        }
        canvas{
            width: 100%;
            height: 100%;
        }
        #ui{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%;
            height: 100%;
            background-color: red;
            opacity: 0.5;
        }
        .ui-button{
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 80px;
            background-color: #000;
            opacity: 0.5;
        }
        #next{
            top: auto;
            bottom: 0;
        }

jQuery的：

$(function(){
            var width = 800, height = 600;
            var ctx = $('#main')[0].getContext('2d');

            var img = new Image();
            img.onload = function(){  
                ctx.drawImage(img , 0, 0);
            };  
            img.src = 'http://visualparadox.com/images/photos/skya12800.jpg';

            var scaleContent = function(){
                var scale = Math.min(window.innerHeight/height, window.innerWidth/width); //initial values

                var w = scale * width;
                var h = scale * height;

                $('#wrapper').css({width: w + "px", height: h + "px"});
                $('#ui').css({zoom: scale, "-moz-transform": "scale(" + scale + ")", , "-o-transform": "scale(" + scale + ")"});
            }

            window.addEventListener('resize', scaleContent, false);

            scaleContent();
        });

小提琴：http://jsfiddle.net/0sm284qz/1/

任何想法如何纠正这种行为？此外，如果对更好的方法有任何一般性建议，我有兴趣听听它们。

非常感谢，

BAPS。

Answer 1

firefox中的行为是将div应用于div当前宽度/高度的结果，该宽度/高度设置为其容器的100％。随着容器缩小，孩子的规模将占其中的百分之几。

对此的一个解决方法是将子设置为固定宽度，然后从那里缩放。您还需要将transform-origin设置为0 0（顶部，左侧）：

#ui{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 800px;
    height: 600px;
    background-color: red;
    opacity: 0.5;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

如果链接小提琴，我使用800 x 600：demo fiddle

最终，我不认为缩放将为您提供最佳结果。相反，我建议更改布局以使用相对高度，宽度和位置。

使用相对高度/宽度

如果您的宽高比是常数800x600，您可以将.ui-button的CSS更改为使用10％（80px / 800px）的宽度和13.33％（80px / 600px）的高度而不是调整比例在窗口调整大小期间：

.ui-button{
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 13.33%;
    background-color: #000;
    opacity: 0.5;
}

这将为您之前进行的缩放提供类似的最终结果。

demo fiddle

缩放html5画布和div叠加

1 个答案: