Javascript 语音buble html5画布js

我正试图用可拖动的处理程序来绘制语言buble。 这就是我所拥有的：

• （x，y）-buble左下角的坐标
• 鼻孔长度
• 气泡宽度
• （x1，y1）处理器端的坐标

以下是更好理解的图片：

我知道在所有坐标都已知的情况下如何在画布上绘制它。这很简单。

但问题是——如何找到图片上显示的红点的坐标。（x，y）和（x1，y1）都是已知的，但当用户拖动buble或handler时会发生变化。在所有情况下，处理器都应该看起来很漂亮

如果有人能分享代码那就太好了，这对我来说有点复杂。

---

提前谢谢

句柄已为您计算，因此只需通过执行以下修改来保留其坐标：

function drawBubble(ctx, x, y, w, h, radius) {

    ...snipped...

    var handle = {
        x1: x + radius,
        y1: y,
        x2: x + radius / 2,
        y2: y - 10,
        x3: x + radius * 2,
        y3: y
    }
    ctx.moveTo(handle.x1, handle.y1);
    ctx.lineTo(handle.x2, handle.y2);
    ctx.lineTo(handle.x3, handle.y3);

    ...snipped...

    return handle;
}

这是获取句柄坐标的一种方法

为了更进一步，我们可以修改上述函数，使其也具有

句柄

参数

通过这种方式，您可以选择输入句柄设置或使用默认的计算设置：

function drawBubble(ctx, x, y, w, h, radius, handle) {

    ...snipped...

    /// use given handle settings or calculate a default one:
    handle = handle || {
        x1: x + radius,
        y1: y,
        x2: x + radius / 2,
        y2: y - 10,
        x3: x + radius * 2,
        y3: y
    }
    ctx.moveTo(handle.x1, handle.y1);
    ctx.lineTo(handle.x2, handle.y2);
    ctx.lineTo(handle.x3, handle.y3);

    ...snipped...

    return handle;
}

为了使用它，您首先通过向函数传递null或false来获得默认的计算句柄

然后用这些坐标画出周围的位置。对于每次移动，清除并重新绘制画布，但这次将修改的句柄参数提供给函数：

/// first time:
var handle = null,  /// first time use default handle
    ...;

handle = drawBubble(ctx, x, y, w, h, radius, handle);

然后在鼠标操作中：

/// modify and update bubble:
handle = drawBubble(ctx, x, y, w, h, radius, handle);

---

希望这有帮助

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

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

//这是一个连接点间距为20px的示例。
//这里的px和py变量来自onmousemove事件。
//最后，这部分只是泡沫的顶部，
//您必须观察4种不同的场景，具体取决于位置
//鼠标是指针，因此指针应该指向鼠标。
...
var con1=数学最小值（数学最大值（x+半径，px-10），r-半径-20）；
var con2=数学最小值（数学最大值（x+半径+20，px+10），r-半径）；
...
如果（py

像这样：

---

尝试单击气泡来拖动指针。

看起来很神奇，需要一些联系来了解如何使用它。不，当用户拖动气泡处理程序端点时，问题没有解决。我们应该重新计算处理程序的所有三个点，我们不能使用（x1，y1）和（x3，y3）一次又一次地计算这些点是最基本的trouble@ProstoTrader尝试这样做：初始化后，调用句柄将包含当前点，您可以修改这些点并将其传递回函数。

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