語音佈雷html5畫布js

Question

我試圖用可拖動的句柄繪製語音佈雷。 這就是我：

• （X，Y） - 的佈雷
• （X1，Y1）coorinates的佈雷
• 寬度的佈雷
• 長度的最低左上角的座標處理程序結束

這裏是爲了更好地理解圖片：

我知道如何在畫布上畫出所有座標已知的情況。這很簡單。 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(); 
} 

Example in jsFiddle

但麻煩的是 - 如何找到的圖片上顯示紅點座標。 （x，y）和（x1，y1）都是已知的，但當用戶拖動buble或處理程序時會更改。在所有情況下，處理程序應該看起來漂亮

如果有人可以分享代碼，那該多好，對我來說有點複雜。 在此先感謝！

Answer 1

您可以保留角落並繪製固定到給定點的指向位。你只需要計算正確的連接點。

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

像這樣：

Draggable Bubble

就泡試着點擊拖動指針。

Answer 2

手柄已經爲您計算所以它只是做例如這種修改保留其座標的問題：

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; 
} 

Modified fiddle here

這是爲了獲取座標的一種方式手柄。

爲了進一步考慮，我們可以修改上述函數，並參考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; 
} 

爲了使用你的第一次通過傳遞例如零或假的獲得默認計算手柄功能。

然後使用這些座標來繪製周圍的位置。對於每一個移動清除並重繪畫布，但這個時候喂修改手柄參數功能：

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

希望這有助於！