javascript - Canvas 通过 HTML 绘图并在屏幕调整大小时保留纵横比

Question

背景

这是我几天来一直在努力解决的一个相当困难的问题。我正在尝试以幻灯片放映的形式展示类(class)。因此，一节课由不同的幻灯片组成。现在覆盖在每张幻灯片顶部的是适合屏幕大小的 Canvas 元素。

canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;

这允许教师在 Canvas 上绘制笔记并突出显示部分类(class)。

问题

幻灯片的内容由 HTML 组成，加载幻灯片时看起来像这样。

但是当我调整页面大小时...

所以这里的问题是 Canvas “图像”是根据页面的宽高比使用 CSS 调整大小的。

#theCanvas {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

但实际的 HTML 保持相同的大小，但重新安排了它的换行点，这很糟糕。

我尝试过的

首先，我使用 CSS 根据窗口的宽度和高度调整所有 HTML 元素的大小:

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 5.9vw;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 3.0vh;
}

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #444444;
    font-weight: 200;
    font-size: 2vmin;
}

p {
    font-family: 'Open Sans Condensed';
    font-size: 2vmin;
    font-weight: 200;
}

接下来我将使用以下方法保存 Canvas 图像并调整其大小:

window.onresize = function(event) {

    var data = canvas.toDataURL();

    // resize the canvas
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    //alert($(container).width());

    // scale and redraw the canvas content
    var img=new Image();

    img.width = document.body.clientWidth;
    img.height = document.body.clientHeight;

    img.onload=function(){
        context.drawImage(img,0,0,img.width,img.height);
    }
    img.src=data;

};

全屏结果(1920px 宽度)

当点击调整窗口大小按钮(1200px)

非常接近。

问题

现在，当我拖动窗口的一 Angular 来调整大小时，会发生这种情况:

问题

1 - 为什么当我手动调整窗口 Angular 的大小时 window.onresize 函数没有触发？

(奖励问题)我这样做的方式是否正确，或者将 Canvas 覆盖在 HTML 元素上以进行交互式类(class)是否值得更麻烦？

Answer 1

我想我误解了你的问题。

如果您希望手绘的东西与 html 元素相匹配，那么您需要确保 HTML 元素永远不会改变布局并始终保持相同的相对大小。在您的示例中，情况已经不是。您在左上角有“🕑25m”，在中间有“欢迎”，当您将页面拖动得更高时，这两个元素之间的距离与元素的其他大小不成比例，因此您已经在要求这基本上是不可能的。

您可以对所有文本使用 SVG，这样它就可以缩放到任意大小，而普通 HTML 文本则不能。换句话说，如果您使用 SVG 使页面变得又高又薄，您将获得又高又薄的文本，并且所有位置和大小都将与其原始位置和大小成比例，而对于 HTML，文本不会拉伸(stretch)，您可以设置vh 的各种设置的大小，但这只是意味着浏览器将选择大小，而不是不按比例缩放文本。

例子:原来想要的展示

将窗口改为又高又瘦(font-size: 10vh;)

注意字体没有拉伸(stretch)，因此“25m”和“welcome”之间的相对大小和距离不再匹配

使用 preserveAspectRatio="none" 对 SVG 做同样的事情

现在请注意，“25m”和“Welcome”也是又高又瘦。这意味着如果您在 Canvas 中围绕两个框绘制了一个框，则两个框在缩放后仍会匹配。没有它，某些东西将无法匹配。

这是上面的 HTML 版本

body { margin: 0; }
.center {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20vh;
}

<div id="time">25m</div>
<div class="center">
  <div>Welcome</div>
</div>

和 SVG 版本

body { margin: 0; }
#foo {
  width: 100vw;
  height: 100vh;
  display: block;
}

<svg 
     id="foo" 
     width="100%" 
     height="100%" 
     viewBox="0 0 640 480" 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     preserveAspectRatio="none" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xml:space="preserve" 
     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <text x="187px" y="240px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">W<tspan x="246px 282px " y="240px 240.084px ">el</tspan>come</text>
    <text x="19px" y="35px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;">25m</text>
</svg>