语音气泡html5 canvas js

Prosto Trader 发表于 Dev

Prosto交易者

我正在尝试使用可拖动的处理程序来绘制语音气泡。那就是我所拥有的：

（x，y）-气泡的左下角的坐标
气泡的长度
气泡的宽度
（x1，y1）协调处理程序端

这是更好理解的图片：在此处输入图片说明

我知道在知道所有坐标后如何在画布上绘制它。很简单讲解

function drawBubble(ctx, x, y, w, h, radius)
{
  var r = x + w;
  var b = y + h;
  ctx.beginPath();
  ctx.strokeStyle="black";
  ctx.lineWidth="2";
  ctx.moveTo(x+radius, y);
  ctx.lineTo(x+radius/2, y-10);
  ctx.lineTo(x+radius * 2, y);
  ctx.lineTo(r-radius, y);
  ctx.quadraticCurveTo(r, y, r, y+radius);
  ctx.lineTo(r, y+h-radius);
  ctx.quadraticCurveTo(r, b, r-radius, b);
  ctx.lineTo(x+radius, b);
  ctx.quadraticCurveTo(x, b, x, b-radius);
  ctx.lineTo(x, y+radius);
  ctx.quadraticCurveTo(x, y, x+radius, y);
  ctx.stroke();
}

jsFiddle中的示例

但是麻烦是-如何找到图片上显示的红点坐标。（x，y）和（x1，y1）都是已知的，但是当用户拖动气泡或处理程序时会更改。在所有情况下，处理程序都应该看起来很漂亮。

如果任何人都可以共享代码，那会很棒，对我来说有点复杂。提前致谢！

埃尔多·拉多1239

您可以保留拐角并绘制固定到给定点的指向位。您只需要计算正确的连接点即可。

// This is an example with the connection points 20px apart.
// The px and py variables here come from the onmousemove event.
// Finally, this part here is only for the top part of the bubble,
// you have watch for 4 different scenarios, depending on where
// the mouse is and thus what the pointing bit should aim for.
...
var con1 = Math.min(Math.max(x+radius,px-10),r-radius-20);
var con2 = Math.min(Math.max(x+radius+20,px+10),r-radius);
...
if(py < y) dir = 2;
...
ctx.moveTo(x+radius,y);
if(dir==2){
 ctx.lineTo(con1,y);
 ctx.lineTo(px,py);
 ctx.lineTo(con2,y);
 ctx.lineTo(r-radius,y);
}
else ctx.lineTo(r-radius,y);
ctx.quadraticCurveTo(r,y,r,y+radius);
...