我在 Konva 中有两个可拖动的矩形，取自 tutorial .
我的目标是让红色(不可拖动)矩形始终位于蓝色可拖动矩形的平均位置。
我尝试从教程代码中更改它:
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
center.x = (box1.x() + box2.x() ) / 2; // added
center.y = (box1.y() + box2.y()) / 2; // added
});
中心是我想保留在中间的红色矩形。
我认为问题在于 center.x = (box1.x() + box2.x() )/2; 创建了一个新变量而不是将 rect 的位置更改为我愿意。
我还补充说:
stage.on('contentMousemove', function () {
layer.batchDraw();
});
但是，它仍然不起作用。
如何实时更新中心矩形的 x 和 y 坐标，并在我拖动其中一个矩形时看到它移动？
可以看出问题的最小示例:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.7/konva.min.js"></script>
<meta charset="utf-8">
<title>Interactive center of mass simulation</title>
<p>Drag the blue rectangles around, they have mass proportional to their area.
The red rectangle, that reresents the center of mass will move in real time<p>
<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();
var box1 = new Konva.Rect({
x: 100,
y: 100,
width: 50,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var box2 = new Konva.Rect({
x: 200,
y: 100,
width: 50,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var center = new Konva.Rect({
x: (box1.x() + box2.x() ) / 2,
y: (box1.y() + box2.y() ) / 2,
width: 50,
height: 50,
fill: '#FF0000',
stroke: 'black',
strokeWidth: 4,
draggable: false
});
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
center.x = (box1.x() + box2.x() ) / 2;
center.y = (box1.y() + box2.y()) / 2;
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
center.x = (box1.x() + box2.x() ) / 2;
center.y = (box1.y() + box2.y()) / 2;
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box1);
layer.add(box2);
layer.add(center);
stage.add(layer);
stage.on('contentMousemove', function () {
layer.batchDraw();
});
</script>
</body>
</html>最佳答案
如果你想移动你需要使用的中心对象center.move
这是一个完整的示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.7/konva.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
function KonvaRect(x, y, fill, draggable) {
return new Konva.Rect({
x: x, y: y, width: 50, height: 50,
fill: fill, stroke: 'black',
strokeWidth: 4, draggable: draggable
});
}
var box1 = KonvaRect(50, 50, '#00D2FF', true);
var box2 = KonvaRect(200, 50, '#00D2FF', true);
var center = KonvaRect(125, 50, '#FF0000', false);
var layer = new Konva.Layer();
layer.add(box1);
layer.add(box2);
layer.add(center);
var stage = new Konva.Stage({
container: 'container', width: 600, height: 170
});
stage.add(layer);
function moveCenter() {
var x = ((box1.x() + box2.x() ) / 2) - center.x();
var y = ((box1.y() + box2.y() ) / 2) - center.y();
if (x != 0 || y != 0) {
center.move({ x: x, y: y })
layer.batchDraw();
}
}
stage.on('contentMousemove', function () {
moveCenter();
});
box1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
box2.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box2.on('mouseout', function() {
document.body.style.cursor = 'default';
});
</script>
</body>
</html>关于javascript - Konva 实时更新一个正确的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51615687/