0

ここに画像の説明を入力してください

VSasp.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関数を相互作用可能にすることはできますか？ホバーまたはオンクリック？

ふきだしを見た

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 に答える