0

在此处输入图像描述

我正在使用 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();
                    }

ETC..

我相信要使这些事件 - 圆形、条形线、三角形与语音气泡更具交互性，我将不得不修改此代码......这些 javascript 函数是否可以交互？悬停或点击？

我看着泡泡

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

但我想要一些只与基于客户端鼠标点击的特定事件相关的东西。只要。

我想要这样的东西：-

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

但根据我正在使用的代码量身定制。

4

1 回答 1

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;
}
于 2013-01-16T13:37:43.943 回答