复杂的拖拽区域限制

获取Konva最新的信息

我们可以使用 dragBoundFunc 属性定义一个区域,限制节点只能在这个区域内拖拽。

提示:dragBoundsFunc 使用的是绝对坐标,所以你必须返回绝对坐标。如果你想使用相对坐标可以配合使用 dragmove 事件。

说明:拖拽蓝色矩形,观察它的 y 坐标被限制在大于50;拖拽黄色矩形,观察它的拖拽区域被限制在一个圆形区域内。

Konva Complex Drag and Drop Bounds Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Complex Drag and Drop Bounds Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

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

var layer = new Konva.Layer();

// bound below y=50
var blueGroup = new Konva.Group({
x: 30,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var newY = pos.y < 50 ? 50 : pos.y;
return {
x: pos.x,
y: newY
};
}
});

// bound inside a circle
var yellowGroup = new Konva.Group({
x: stage.width() / 2,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var x = stage.width() / 2;
var y = 70;
var radius = 50;
var scale =
radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
if (scale < 1)
return {
y: Math.round((pos.y - y) * scale + y),
x: Math.round((pos.x - x) * scale + x)
};
else return pos;
}
});

var blueText = new Konva.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'bound below',
fill: 'black',
padding: 10
});

var blueRect = new Konva.Rect({
width: blueText.width(),
height: blueText.height(),
fill: '#aaf',
stroke: 'black',
strokeWidth: 4
});

var yellowText = new Konva.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'bound in circle',
fill: 'black',
padding: 10
});

var yellowRect = new Konva.Rect({
width: yellowText.width(),
height: yellowText.height(),
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});

blueGroup.add(blueRect).add(blueText);
yellowGroup.add(yellowRect).add(yellowText);

layer.add(blueGroup);
layer.add(yellowGroup);

// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>