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

我正在将一些文本绘制到HTML canvas元素上,并且在该文本旁边有一个普通的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属性？
>我还有其他方向可做吗？

解决方法:

可能存在一种使用画布功能在画布上绘制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绘制到画布上,但仍应高于您的80％的请求(我认为它是80％的请求)支持canvas btw的浏览器).
但是,如果您需要导出画布,或者只是访问其imageData,则比率会下降：IE
>可以使用哪些字体：
那可能是最大的限制：在画布上绘制svg时,我们需要先将其传递给HTMLImageElement.浏览器担心此元素,并且出于安全原因,无法从内部文档请求任何外部资源.对于我们的情况,这确实意味着,如果要包括用户系统字体库中未包含的字体,则必须将其作为dataURI包含在svg元素中.
>易于使用：
我编写的函数确实是针对此示例的,我认为它不适合任何其他情况,也不适合您的情况.

标签：canvas,vertical-alignment,css,html,javascript
来源： https://codeday.me/bug/20191118/2028977.html