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在层的空白空间上未检测到事件。尚不清楚如果舞台上有几层怎么办。

如果您仍然需要在空层上侦听并使层在任何空间均可拖动，则可以：

改为使舞台可拖动，并监听其上的事件（click也将在空白处工作）。
添加一个透明矩形作为背景，以便用于侦听事件：

<!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图层

1 个答案: