Question

我从tutorial上取了两个Konva可拖动的矩形。

我的目标是始终使红色（不可拖动）矩形的位置平均处于蓝色可拖动矩形的位置。

我尝试通过教程代码对此进行更改：

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>

Answer 1

如果要移动中心对象，则需要使用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>

Konva实时更新位置

1 个答案: