연설 거품 만들기

Question

저는 VS asp.net을 사용하는 캔버스 스타일의 그래픽 인터페이스에서 작업하고 있습니다. 개인적인 행사로 말풍선을 만들고 싶습니다. 예를 들어 - 화면의 빨간 점이 있으면 클라이언트가 클릭하면 연설 거품이 나타나 이벤트에 대한 자세한 정보를 제공합니다.

어떻게 이러한 이벤트를 상호 작용 가능하게 만들 수 있습니까? 원, 바, 라인, 연설 거품 더 상호 작용 가능한 삼각형, I -

내가이 사건을 생각하는 ..

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

등 :

은 지금은 내가 간단한 캔버스를 사용하고 있습니다입니다 이 코드를 수정해야합니다 ... 이러한 자바 스크립트 기능을 상호 작용 가능하도록 만들 수 있습니까? 오버over 또는 onclick?

내가 연설에서 보았다는

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

거품하지만 난 단지 클라이언트 쪽 마우스 클릭에 따라 특정 이벤트에 관련된 무언가를 원한다. 만.

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

하지만 내가 사용하고있는 코드에 맞게 - :

나는 이런 식으로 뭔가를 할 수 있습니다.

Answer 1

마우스 클릭/호버에 대한 응답으로 캔버스에 말풍선을 그리려면 페이지의 캔버스 위치를 기준으로 마우스 x 및 y 을 캡처 한 다음 그 원을 보유하고있는 캔버스가 클릭되거나 올려졌습니다.

개인적으로 클릭 가능한 영역마다 개체를 만들고 x/y/너비/높이 속성을 지정한 다음 클릭 할 때 함수를 호출합니다. 다음과 같이 입력하십시오 :

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