創建語音氣泡

Question

我使用VS asp.net工作在一個畫布風格的圖形界面。我想創建帶有單個事件的語音泡泡。例如 - 我的屏幕上的紅點，如果客戶點擊它，一個講話泡泡會顯示更多關於該事件的信息。

如何讓這些事件可以交互？

現在我是我米用一個簡單的帆布：

<canvas id="myCanvas" width="930" height="900"style="border:2px solid #000000;"></canvas> 

// function to draw a circle - x,y, radius, color: coordinates, radius and the color of the circle. 
       function draw_circle(x, y, radius, color) { 
         ctx.beginPath(); 
         ctx.arc(x, y, radius, 0, 2 * Math.PI, false); 
         ctx.fillStyle = color; 
         ctx.fill(); 
         ctx.stroke(); 
        } 

// function to draw a triangle - x: Life event's x-coordinate on the timeline. 
       function draw_triangle(x) { 
         ctx.fillStyle = 'purple'; 
         ctx.strokeStyle = 'white'; 
         ctx.lineWidth = 1; 
         ctx.beginPath(); 

         ctx.moveTo(x, 560); 
         ctx.lineTo(x+5, 550); 
         ctx.lineTo(x-5, 550); 
         ctx.lineTo(x, 560); 

         ctx.fill(); 
         ctx.stroke(); 
         ctx.closePath(); 
        } 

等。

我相信，讓這些事件 - 圈，棒線，三角形更交互與對話泡泡，我將不得不修改此代碼... 可以使這些JavaScript功能可交互？ hoverover還是onclick？

我看着對話氣泡

http://www.scriptol.com/html5/canvas/speech-bubble.php

，但我想要的東西只與基於客戶端的鼠標點擊特定事件。只要。

我想是這樣的： -

http://simile-widgets.org/wiki/Timeline_CustomEventDetailDisplay

但適合我使用的代碼。

Answer 1

如果你想在畫布上繪製一個講話泡沫響應鼠標點擊/懸停，你必須捕獲鼠標x和y 相對於頁面上的畫布上的位置，然後確定的部分保持該圓圈的畫布被點擊/徘徊。

就我個人而言，我會爲每個可點擊區域創建一個對象，給它x/y/width/height屬性，然後在單擊它時調用一個函數。這樣的事情：

<canvas id="myCanvas" width="930" height="900"style="border:2px solid #000000;"></canvas> 

var buttons = []; 

var mouse = 
{ 
    x: 0, 
    y: 0 
} 

var buttons[] = new Button(100, 100, 100, 100, 'speechbubble'); 

window.addEventListener('load', function() 
{ 
    addEventListener('mousemove', function(evt) 
    { 
     getMousePos(evt); 
    }, false); 

    addEventListener('click', clickHandler, false); 

}, false); 

function getMousePos(e) 
{ 
    mouse.x = e.pageX - document.getElementById('myCanvas').offsetLeft; 
    mouse.y = e.pageY - document.getElementById('myCanvas').offsetTop; 
} 

function clickHandler() 
{ 
    for (var i = 0; i < buttons.length; i++) 
    { 
     if (buttons[i].inBounds()) buttons[i].execute(); 
    } 
} 

function Button(x, y, w, h, func) 
{ 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
    this.func = func; 
} 

Button.prototype.execute = function() 
{ 
    switch (this.func) 
    { 
     case 'speechbubble': 
      // do stuff here 
     break; 
    } 
} 

Button.prototype.inBounds = function() 
{ 
    if (mouse.x > this.x && mouse.x < this.x + this.width && 
     mouse.y > this.y && mouse.y < this.y + this.height) return true; 
}