从空白区域拖动 Konva 层

Question

我想拖动一个 Konva 图层，即使它是空的。我看到我只能在存在对象的位置拖动图层（代码显示您可以在矩形所在的位置拖动，但不能在其他任何地方拖动）。

如何拖动图层拖动空白部分？

此外，我发现如果您不在图层的对象中，也不会遵守 mouseenter 和 mousleave。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
 
 
 
 <div id="container"></div>
 <script>
 
 function demo() {
  
 var stage = new Konva.Stage({
      container: 'container',
      width: 100,
      height: 100
 });

 var layer = new Konva.Layer({draggable: true});
 stage.add(layer);
 
  layer.on("dragmove", function() {
  console.log(this.x(), this.y())
  });
 
 layer.on("mouseenter", function() {
  stage.container().style.cursor = 'pointer';
 });

 layer.on("mouseleave", function() {
  stage.container().style.cursor = 'default';
 });
  
var rect = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5
});

layer.add(rect);
 
 stage.draw();
 }
 
 demo();
</script>
  
</body>
</html>

Answer 1

Konva 不检测空 space 层上的事件。而且不知道舞台上有几层怎么办。

如果您仍然需要在空图层上监听并使图层可在任意位置拖动 space，您可以：

改为可拖动舞台并监听其上的事件（click 也适用于空 space）。
添加一个透明矩形作为背景，这样会用来监听事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
 
 
 
 <div id="container"></div>
 <script>
 
 function demo() {
  
 var stage = new Konva.Stage({
      container: 'container',
      width: 300,
      height: 300
 });

 var layer = new Konva.Layer({draggable: true});
 stage.add(layer);

 
 layer.on("mouseenter", function() {
  stage.container().style.cursor = 'pointer';
 });

 layer.on("mouseleave", function() {
  stage.container().style.cursor = 'default';
 });
  
var rect = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5
});

var back = new Konva.Rect({
   fill: 'red',
   width: stage.width(),
   height: stage.height()
})
layer.add(back);

// move rectangle so it always stay on the screen, no matter where layer it
layer.on('dragend', function() {
   back.setAbsolutePosition({x: 0, y: 0});
   layer.draw();
});



layer.add(rect);
 
 stage.draw();
 }
 
 demo();
</script>
  
</body>
</html>

从空白区域拖动 Konva 层

Dragging a Konva layer from empty areas

javascript

konvajs