javascript - 在 Canvas 文本和 html 元素之间共享基线

Question

我正在将一些文本绘制到 HTML canvas 元素，在该文本旁边我有一个纯 CSS 样式且绝对定位的 HTML 按钮，其位置由 JavaScript 计算。我想对两者使用相同的字体，这看起来很容易，而且我也希望两者共享相同的基线。据我所知，目前这真的很难，至少考虑到我面临的一系列限制。

• 开箱即用， Canvas 绘制的文本使用 textBaseline = 'alphabetic' ，并且我无法更改它(出于兼容性原因以及在 Canvas 中使用不同字体获取基本对齐的文本)。另一方面，HTML 元素上的绝对定位使用上边距或下边距，而不是基线。
• TextMetrics documentation on MDN描述了各种垂直测量值，但指出它们仅在 Chrome 上可用，甚至只有在设置了一些标志后才可用。我需要能够在相当大比例(比如 >80%)的当前浏览器上运行的东西。
• 我不知道将使用什么字体，因此硬编码一些关于字体的度量信息不是一种选择。

那么我有什么选择呢？

1. 我是否必须将字体渲染到第二个离屏 Canvas 和 examine its pixel data为了找到实际尺寸？我什至可以相信这些实际尺寸(根据 Canvas 上的标记像素计算得出)与用于计算按钮大小的尺寸相匹配，即使对于一些更具艺术感的字体也是如此吗？

2. 我需要 resort to a spacer image ？顺便说一句，我的问题和that one之间的主要区别可能是我在 JavaScript 中做定位，所以我不需要纯 CSS 解决方案，我可以使用 Canvas 可以给我的帮助。

3. 是否有其他一些(即没有间隔图像)方法来利用 vertical-align CSS 属性，方法是创建一些具有明确定义的基线的外框，然后将按钮嵌套在里面与同一基线对齐？

4. 还有其他我可以选择的方向吗？

Answer 1

可能有一种方法可以利用canvas的能力在canvas上绘制svg，而且开发的越多 <text> 以及来自 SVG 的其他文本相关元素。

但是，这个解决方案远非完美并且有很多注意事项，但我们会在这个小例子之后讨论它:

function basedLineText(canvasStr, ctx, HTMLStr, HTMLContainer, baseline, x, y, font) {
  // create our svg elements
  var svgNS = 'http://www.w3.org/2000/svg';
  var svg = document.createElementNS(svgNS, 'svg');
  var txt = document.createElementNS(svgNS, 'text');
  var tspan = document.createElementNS(svgNS, 'tspan');

  txt.setAttribute('dominant-baseline', baseline);
  txt.setAttribute('x', x);
  txt.setAttribute('y', y);

  tspan.setAttribute('style', 'font:' + font);

  txt.appendChild(tspan);
  svg.appendChild(txt);

  // we will first deal with the canvas part
  tspan.textContent = canvasStr;

  // we need to append it in the doc to get its BoundingBox
  HTMLContainer.appendChild(svg);

  // remove the whitespace around our text
  var bB = svg.getBBox();
  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);
  svg.setAttribute('width', bB.width);
  svg.setAttribute('height', bB.height);

  // get the end x position of our text
  var left = txt.getBoundingClientRect().right;

  // draw it to the canvas
  var svgData = new XMLSerializer().serializeToString(svg);
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(this, x, y);
  };
  img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);

  // now the HTML side
  tspan.textContent = HTMLStr;

  // text size probably has changed
  var bB = svg.getBBox();
  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);
  svg.setAttribute('width', bB.width);
  svg.setAttribute('height', bB.height);

  // move our absolutely positioned container
  HTMLContainer.style.top = y + 'px';
  HTMLContainer.style.left = (x + left) + 'px';
}

var ctx = canvas.getContext('2d');
basedLineText('hello', ctx, ' world', tst1, 'alphabetic', 20, 20, '12px "sans serif"');
basedLineText('hello', ctx, ' world', tst2, 'middle', 20, 60, '32px monospace');
basedLineText('hello', ctx, ' world', tst3, 'hanging', 20, 80, '64px cursive');

div,
canvas {
  position: absolute;
  top: 0;
  left: 0px;
}

/* only html content is affected */
div {
  fill: green;
}

<canvas id="canvas" width="200" height="200"></canvas>
<div id="tst1"></div>
<div id="tst2"></div>
<div id="tst3"></div>

现在，注意事项:

• 跨浏览器状态 :
  所有现代浏览器(IE>=9)都应该支持基本渲染，但一些早期版本的 FF 无法将 SVG 绘制到 Canvas 上，但它仍然应该高于您的 80% 要求(我认为它是 80%顺便说一句，支持 Canvas 的浏览器)。但是如果你需要导出 Canvas ，或者只是访问它的图像数据，那么这个比例就会下降:IE

• 可以使用哪些字体 :这可能是最大的限制:在 Canvas 上绘制 svg 时，我们需要先将其传递给 HTMLImageElement。浏览器害怕这个元素，并且出于安全原因，不能从内部文档请求外部资源。对于我们的案例，这确实意味着如果您想要包含用户系统字体库中没有的字体，您必须将其作为 dataURI 包含在 svg 元素中。

• 易于使用:
  我编写的函数非常适合这个示例，我认为它不适合任何其他情况，也不适合您的情况。