Question

我目前正试图在我的画布语音元素下画一个箭头。

我的问题：

箭头的右侧似乎比左侧长。

我尝试了什么：

我试图按以下方式创建箭头：

ctx.moveTo(x, y);
ctx.lineTo(30, 30);
ctx.lineTo(50, 10);

这似乎可以在这里看到：https://jsfiddle.net/eefja4kk/1/

但无论我尝试什么，我都无法在目前的代码中使用它。我感谢任何帮助和建议。

我目前的代码：

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "12px Helvetica";
var text = 'Speechbubble Speechbubble Speechbubble';
var fontHeight = getTextHeight(text, ctx.font);
component(ctx, ctx.measureText(text).width, fontHeight, "#37f", 10, 10, 16, text);

function component(ctx, width, height, color, x, y, radius, text)
{
   var r = radius;
   var w = width + 40;
   var h = height + 40;
   var pi2 = Math.PI * 2;
   var ap = w * 0.15;
   var aw = 5;
   var ah = 10;

   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);

   // Speechbubble arrow
   ctx.lineTo(w - ap, h);
   ctx.lineTo(w - (ap * 2), h + ah);
   ctx.lineTo(w - (ap * 2) - (aw * 2), h);

   ctx.arc(r  , h - r, r, pi2 * 0.25, pi2 * 0.5);
   ctx.fillStyle = '#37f';
   ctx.fill();

   // Text fillstyle
   ctx.fillStyle = "#fff";
   ctx.fillText(text, w - ctx.measureText(text).width - 20, h - fontHeight - 10);
}

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;
}

＆＃13;

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

＆＃13;

Answer 1

你的计算结束了。您可以将其更改为以下内容以使箭头正确：

// Speechbubble arrow
ctx.lineTo(w - ap, h);
ctx.lineTo(w - (ap * 2), h + ah);
ctx.lineTo(w - (ap * 3), h);

Here is a working example

话虽如此，你的变量命名表明这可能不是你想要的。我假设aw是箭头宽度，在这种情况下你可以使用：

// Speechbubble arrow
ctx.lineTo(w - ap, h);
ctx.lineTo(w - ap - (aw / 2), h + ah);
ctx.lineTo(w - ap - aw, h);

但我建议您将aw更改为更大的内容，可能是20，as per this example。

如果不确切知道你的变量代表什么（即ap实际上是什么意思？在我的例子中它充当箭头开始的偏移量），很难肯定地说，但是你得到这个想法，希望我的解决方案能让你重回正轨。

使用Javascript lineTo绘制箭头

1 个答案: