0

このコードは jsFiddle で操作できます

フィドルでは、旗竿 (Kinetic.Line) に旗 (Kinetic.Rect) を作成したことがわかります。ユーザーが旗または旗竿の任意の部分にマウスを移動したときにイベントを発生させたいと考えています。以前の試みでは、イベント ハンドラーを各形状に個別にアタッチしましたが、Kinetic.Line がイベントを発生させないことがわかりました。

この最新の試みでは、図形をグループに追加し、ハンドラーをグループに追加して、これで問題が解決すると考えましたが、そうではありません。

目的の動作を実現する方法はありますか? ありがとうございます。ハンドラーのコンソール メッセージを表示するには、F12 を押すことを忘れないでください。

var handler = function(e) {
    console.log("Event fired.");
};

var stage = new Kinetic.Stage({
    container: 'testBlock',
    width: 200,
    height: 200
});

var layer = new Kinetic.Layer();
var group = new Kinetic.Group();

var rect = new Kinetic.Rect({
    x: 75,
    y: 10,
    width: 50,
    height: 50,
    fill: 'silver',
});

line = new Kinetic.Line({
    points: [
        {x: 125, y: 10},
        {x: 125, y: 160},
    ],
    stroke: 'black',
    strokeWidth: 1
});

// add the shapes to the group
group.add(rect);
group.add(line);

// event handler for the group
group.on("mouseover", handler);

// add the group to the layer
layer.add(group);

// add the layer to the stage
stage.add(layer);
4

2 に答える 2

0

私が使用しているこのフィドルと、あなたの行の y2-y1 を試してください。Kinetic.Rectwidth=1height=

line = new Kinetic.Rect({
    x: 125, y: 10,
        width: 1, height: 150,    
    fill: 'black',
});
于 2013-08-27T10:35:37.390 に答える