在Javascript中创建的Canvas speechbubble - ＆gt; measureText高度？

Question

我目前正在尝试使用canvas为javascript创建一个 speechbubble 。

问题1：

我按以下方式添加宽度：ctx.measureText(text).width + 40以确保语音气泡的宽度灵活并取决于var text = 'Speechbubble test';输入。还要添加40个像素来左右添加边距！

我怎样才能获得文字的高度以使其灵活？我一直在检查，但无法找到与measureText方法类似的内容，而且它似乎不存在。

有没有办法获得文本的实际高度？我问，因为我打算为它添加换行符。 eG：多行支持（在特定数量的字母后打破文本行）。

问题2：

我试图在语音气泡中添加一个小气泡指向指针。对不起我用这种方式描述它的方式，不知道它的用语。但我在谈论以下内容：

我怎样才能将以下内容添加到我的语音气泡中？

我感谢任何消化和帮助。

当前示例：

＆＃13;

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "13px Helvetica";
var text = 'Speechbubble test';
component(ctx, ctx.measureText(text).width, 70, "#37f", 10, 10, 16, text);

function component(ctx, width, height, color, x, y, radius, text)
{
   // Variables
   var width = width + 40;
   var height = height;
   var x = x;
   var y = y;
   var radius = Math.min(radius, Math.min(width, height) / 2);
   var color = color;
   var pi2 = Math.PI * 2;
   var r = radius;
   var w = width;
   var h = height;
   
   // Transparent background
   //ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
   ctx.fillStyle = color;
   ctx.setTransform(1, 0, 0, 1, x, y);
	
   // Draw arc
   ctx.beginPath();
   ctx.arc(r  , r  , r, pi2 * 0.5 , pi2 * 0.75);
   ctx.arc(w - r, r, r, pi2 * 0.75, pi2);
   ctx.arc(w - r, h - r, r, 0, pi2 * 0.25);
   ctx.arc(r  , h - r, r, pi2 * 0.25, pi2 * 0.5);
   ctx.fill();

   ctx.setTransform(1, 0, 0, 1, 0, 0);

   // Text fillstyle
   ctx.fillStyle = "#fff";
   ctx.fillText(text, x + 20, y + 40);
}

＆＃13;

<canvas width="500" height="500" id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于虽然specs defines是一种通过TextMetrics对象测量高度的方法，但目前没有供应商实际实现过它。

所以我们不得不作弊来从字体中获取实际大小。

执行此操作的一种方法是临时插入DOM元素并从中获取高度：

console.log(getTextHeight("Hello", "20px sans-serif"));

function getTextHeight(txt, font) {
  var el = document.createElement('div'), height;
  el.style.cssText = "position:fixed;padding:0;left:-9999px;top:-9999px;font:" + font;
  el.textContent = txt;

  document.body.appendChild(el); 
  height = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);
  document.body.removeChild(el);
  
  return height
}

与canvas一起使用时，只需传入context.font作为字体参数：

var fontHeight = getTextHeight("Hello", ctx.font);

关于问题二：

您可以通过插入lineTo()调用来分解圆角矩形的底线路径，例如：

var ctx = c.getContext("2d"), r = 20, w = 290, h = 100, pi2 = Math.PI*2;
var ap = w * 0.2, aw = 20, ah = 30;  //arrow position, width, height
ctx.translate(1.5,0.5);

// Rounded rectangle
ctx.beginPath();
ctx.arc(r  , r  , r, pi2 * 0.5 , pi2 * 0.75);
ctx.arc(w - r, r, r, pi2 * 0.75, pi2);
ctx.arc(w - r, h - r, r, 0, pi2 * 0.25);       // bottom right corner

ctx.lineTo(w - ap, h);                         // inserts an arrow (following clock-wise)
ctx.lineTo(w - ap, h + ah);
ctx.lineTo(w - ap - aw, h);

ctx.arc(r  , h - r, r, pi2 * 0.25, pi2 * 0.5); // bottom left corner
ctx.closePath();
ctx.stroke();

<canvas id=c></canvas>