1

我正在尝试向Kinetic.Image要添加到 KineticJS 阶段的图像 ( ) 添加单击事件。

  • 当我使用简单的层次结构时，如下所示（测试 0），事件可以成功触发。
  • 但是，在更复杂的层次结构（测试 1）中添加图像时，不会触发事件。

等级制度

我创建了一个Fiddle来演示两种层次结构的情况。

// The canvas container for the stage
var container = $("#container").html("");

// Create the stage
var stage = new Kinetic.Stage({
    container: container.attr("id"),
    width: container.width(),
    height: container.height()
}); 

// Load image
var img = new Image();
img.onload = function() {

    // Dimensions of the image
    var w = this.width;
    var h = this.height;

    // The base layer
    var baseLayer = new Kinetic.Layer({
        width: w,
        height: h
    });

    // The group
    var group = new Kinetic.Group();

    // The asset layer
    var assetLayer = new Kinetic.Layer({
        width: w,
        height: h
    });

    // The kinetic image element
    var element = new Kinetic.Image({
        image: this,
        width: w,
        height: h
    });

    // Event when image is clicked
    element.on("click", function() { alert("Image clicked"); });

    // Build hierarchy
    assetLayer.add(element);
    group.add(assetLayer);
    baseLayer.add(group);
    stage.add(baseLayer);

    // Draw the stage
    stage.draw();
}

// Load image from URL
img.src = "http://www.html5canvastutorials.com/demos/assets/lion.png";

我认为这可能与事件冒泡有关，并尝试更改listening图层上的属性，但不幸的是这没有任何区别。任何建议将不胜感激。

4

1 回答 1

1

我有一种感觉，你不能分组Kinetic.Layer，只有Kinetic.Shape。请参阅本教程中的措辞：http: //www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

我在你的小提琴中更改了 2 行，我让它工作：

代替：

assetLayer.add(element);
group.add(assetLayer);

和：

//assetLayer.add(element);
group.add(element);

瞧！在图像上“单击”时会触发警报。

于 2013-07-03T16:57:55.583 回答