0

キャンバスにアニメーションがあり、いくつかの画像があります（ を使用して描画drawImage()）。簡単にするために、画像が 2 つしかないとしましょう。これらの画像は、偽の 3D 空間で円形のパスをたどっているため、ある画像が別の画像と重なる場合もあれば、2 番目の画像が最初の画像と重なる場合もあります。これらの画像は、視聴者から「近づく」または「遠ざかる」ときにもスケーリングされます。

これらの各画像は、次の (簡略化された) コードを持つオブジェクトです。

function slide_object() {
    this.x = 0.0; // x = position along path (in radians)
    this.xpos = 0.0; // x position on canvas
    this.ypos = 0.0; // y position on canvas
    this.scale = 0.0;
    this.name = ""; // a string to be displayed when slide is moused over
    this.imgx = 0.0; // width of original image
    this.imgy = 0.0; // height of original image

    this.init = function (abspath, startx, name) { // startx = path offset (in radians)
        this.name = name;
        this.x = (startx % (Math.PI * 2));
        var slide_image = new Image();
        slide_image.src = abspath;
        this.img = slide_image;
        calcObjPositions(0, this); // calculate's the image's position, then draws it
    };
    this.getDims = function () { // called by calcObjPositions when animation is started
        this.imgx = this.img.width / 2;
        this.imgy = this.img.height / 2;
    }
}

これらの各オブジェクトは、 という配列に格納されslidesます。

画像を適切に重ねるために、drawObjs関数は最初に配列を最小から最大slidesの順に並べ替え、次に から始まる画像を描画します。slides[i].scaleslides[0]

キャンバスにイベント リスナーを追加$(document).ready()する関数を実行しinitます。

canvas = document.getElementById(canvas_id);
canvas.addEventListener('mousemove', mouse_handler, false);

このハンドラーの目的は、マウスがどこにあるか、およびマウスがいずれかのスライドの上にあるかどうかを判断することです (これにより、<div>jQuery を介してページ上の a が変更されます)。

ここに私の問題があります.マウスがどのスライドの上にあるかを特定する方法を見つけようとしています. 基本的に、次のロジックを埋めるコードが必要です (ほとんどの場合、mouse_handler()関数内にあります)。

// if (mouse is over a slide) {
//     slideName = get .name of moused-over slide;
// } else {
//     slideName = "";
// }
// $("#slideName").html(slideName);

何かご意見は？

4

1 に答える 1

0

これを理解する前に、少し眠る必要があったようです。

画像のサイズとキャンバス上の配置を決定するために必要なものはすべて揃っています。

次の関数を my に追加しましたslide_object。

    this.getBounds = function () {
        var bounds = new Array();
        bounds[0] = Math.ceil(this.xpos); // xmin
        bounds[1] = bounds[0] + Math.ceil(this.imgx * this.scale); // xmax
        bounds[2] = Math.ceil(this.ypos); // ymin
        bounds[3] = bounds[2] + Math.ceil(this.imgy * this.scale); // ymax
        return bounds;
    };

次に、私のmouse_handler関数では、現在マウスが置かれているスライドのインデックスをisWithinBounds()、マウスの x とマウスの y の位置を取る関数から取得します。

function isWithinBounds(mx,my) {
    var index = -1;
    for ( var i in slides ) { 
        bounds = slides[i].getBounds();
        if ((mx >= bounds[0] && mx <= bounds[1]) && (my >= bounds[2] && my <= bounds[3])) {
            index = i;
        }
    }
    return index;
}

は最小から最大のスケール順に並べ替えられるためslides、反復ごとに の値が置き換えられるか保持されますindex。スペースを占める画像が複数ある場合は、一番上のスライドindexが返されます。

唯一の問題は、コードをより効率的にする方法を見つけることです。Chrome は遅延なくアニメーションを実行します。Firefox にはいくつかありますが、IE ユーザー向けに excanvas.js を実装することはまだ考えていません。キャンバスをサポートしていないブラウザーの場合、キャンバス オブジェクトは単純に で非表示になりdisplay:noneます。

于 2010-09-15T16:17:20.097 に答える