javascript Konva Layer未报告任何事件

vmjh9lq9 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(124)

我试图使Konva层可点击，但它不工作。这看起来很基本，据我所知，我正在根据文档做一切。

this.stage = new Konva.Stage({
  listening: true,
  container: options.container,
  width: options.container.clientWidth,
  height: options.container.clientHeight,
});
this.waveformLayer = new Konva.Layer({ listening: true });
this.stage.add(this.waveformLayer);

this.waveformLayer.on('click', (e) => {
  console.log(e);
});

单击波形层无效。有矩形绘制在层中，我只是没有分享的代码。我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/75819522/konva-layer-not-reporting-any-events

2条答案

按热度按时间

w1jd8yoj1#

// first we need to create a stage
    var stage = new Konva.Stage({
      container: "container", // id of container <div>
      width: 500,
      height: 500
    });
    
    stage.on('click',(e)=>{
    console.log('stage clicked')
    })

    // then create layer
    var layer = new Konva.Layer();
    layer.on("click", () => {
      console.log("layer");
    });

    // create our shape
    var circle = new Konva.Circle({
      x: stage.width() / 2,
      y: stage.height() / 2,
      radius: 70,
      fill: "red",
      stroke: "black",
      strokeWidth: 4
    });

    // add the shape to the layer
    layer.add(circle);

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

    // draw the image
    layer.draw();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
  </head>
  <body>
    <div
      id="container"
      style="width: 500px; height: 500px; border: 1px solid red;"
    ></div>
  </body>
</html>

您应该在图层中添加一个形状，如demo

赞(0）回复(0）举报 2023-09-29

i34xakig2#

科尼亚的回答似乎不再奏效。舞台的事件处理程序可以正确触发，但层不能。有人能提供更新的解决方案吗？

赞(0）回复(0）举报 2023-09-29