2

Kinetic.Line オブジェクトでマウスオーバーを検出しようとしています。

ドキュメントによると、Kinetic.Line はノードの子であるため on 関数があります。on 関数は、サポートされているイベントとして mousemove と mouseover をリストします。

ただし、行での mouseover または mousemove では機能しないようです。

これは設計によるものですか？この機能は実装されますか? 私は何か間違ったことをしていますか？

function canvasTest () {
    stage = new Kinetic.Stage({
        container: "tutorial",
        width: 400,
        height: 400
    });

    var layer = new Kinetic.Layer();

    var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: "red",
        strokeWidth: 15,
        lineCap: "round",
        lineJoin: "round"
    });

    redLine.on('mouseover mousemove', function (ev) {
        alert('line moused over.');
    });

    layer.add(redLine);

    stage.add(layer);
}
4

2 に答える 2

2

エリックの回答に追加したいと思います。

ラインが接続されているレイヤーは、事前にステージに追加する必要があります! .saveData() 関数を発行します。そうしないと、例外が発生します。

幸運を。

于 2012-06-10T13:29:15.803 に答える
2

キネティック ラインにはパスがないため、ピクセル検出を使用してイベントを処理します。検出できるように、 shape.saveData() メソッドを使用する必要があります。

次に例を示します。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/

乾杯！

于 2012-05-27T16:32:24.707 に答える