Question

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

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

那么我有什么选择？

我是否必须将字体渲染到第二个离屏画布和examine its pixel data才能找到实际尺寸？我是否可以相信这些实际尺寸（根据画布上的标记像素计算）与用于计算按钮大小的尺寸相匹配，即使对于某些更具艺术性的字体也是如此？
我需要resort to a spacer image吗？顺便说一下，我的问题和that one之间的主要区别可能是我在JavaScript中进行定位这一事实，所以我不需要一个纯CSS解决方案，我可以使用什么帮助画布可以给我。
是否有一些其他（即没有间隔图像）方式来利用vertical-align CSS属性，通过创建一个具有明确定义的基线的外部框，然后将按钮嵌套在与其对齐的内部基线
我可以采取的其他方向吗？

Answer 1

可能有一种方法可以使用canvas功能在画布上绘制svg，以及从SVG开发的<text>和其他与文本相关的元素。

但是，这个解决方案远非完美，并且有很多警告，但我们会在这个小例子之后来到它：

＆＃13;

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

＆＃13;

div,
canvas {
  position: absolute;
  top: 0;
  left: 0px;
}

/* only html content is affected */
div {
  fill: green;
}

＆＃13;

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

＆＃13;

现在，请注意：

跨浏览器状态：
所有现代浏览器都应该支持基本渲染（IE> = 9），但是FF的早期版本无法将SVG绘制到画布上，但仍然应该高于80％的请求（我认为它是80支持canvas btw的浏览器的百分比）。但是如果你需要导出画布，或者只是访问它的imageData，那么比率下降：IE
可以使用哪些字体：这可能是最大的限制：在向画布绘制svg时，我们需要首先将它传递给HTMLImageElement。浏览器害怕这个元素，并且出于安全原因，不能从内部文档请求外部资源。对于我们的情况，这意味着如果您想要包含不在用户的系统字体库中的字体，您必须将其作为dataURI包含在svg元素中。
易于使用：
我写的这个函数对于这个例子非常具体，我认为它不适合任何其他情况，也不适合你。

Answer 2

您可以补充说，根据不同浏览器的文本呈现引擎，指标会略有不同。

如果没有低级指标，文字很难并且不容易。正如您所说，目前只有Chrome才能在实验性标记下使用。

我可以采取任何其他方向吗？

您可以手动阅读和解析字体，并从中获取指标。 this (Font.js) 解决方案以及 this one (OpenType.js) 可帮助您做到这一点。反过来，这可以限制您可以使用的字体类型。

另一种方法是使用第二个canvas元素创建按钮。您仍然可以接收点击事件等，但现在您将拥有与主画布相同的字体条件。

在canvas文本和html元素

2 个答案: