语音buble html5画布js [英] speech buble html5 canvas js

问题描述

我想用可拖动处理程序绘制语音buble。
这是我有的：

I'm trying to draw speech buble with dragable handler. That's what I have:

（x，y） - buble最左下角的坐标

• buble的长度


• buble的宽度


• （x1，y1）
  

• (x,y) - coordinates of the lowest left corner of buble
• length of the buble
• width of the buble
• (x1,y1) coorinates of the handler end

下面是更好理解的图片：

Here is the picture for better understanding:

我知道如何在画布上绘制所有的坐标。这很简单。
教程

I know how to draw it in canvas when all coordinates are known. It's pretty simple. Tutorial

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）是已知的，但是当用户拖动buble或处理程序时改变。在所有情况下，处理程序应该看起来很漂亮。

But the trouble is - how to find coordinates of red dots shown on the picture. Both (x,y) and (x1,y1) are known but change when user drags buble or handler. And in all cases handler should look pretty.

如果任何人都可以共享代码，这将是伟大的，这对我来说很复杂。
提前感谢！

Whould be great if anyone could share the code, it's kinda complicated for me. Thanks in advance!

推荐答案

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

You can preserve the corners and draw the pointing bit fixed to a given point. You just need to calculate the correct connection points.

// 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);
...

像这样：

可拖动泡泡

尝试点击气泡拖动指针。

Try clicking on the bubble to drag the pointer.

这篇关于语音buble html5画布js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！