Konva 实时更新矩形位置答案

【问题标题】：Konva real time update a rect positionKonva 实时更新矩形位置
【发布时间】：2019-01-07 23:40:12
【问题描述】：

我在 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 是我想保留在中间的红色矩形。

我认为问题在于center.x = (box1.x() + box2.x() ) / 2; 创建了一个新变量，而不是按照我的意愿更改矩形的位置。

我还补充了：

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>

【问题讨论】：

标签： javascript html animation canvas konvajs

【解决方案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>

【讨论】：

非常清晰的代码，非常感谢。我有几个疑问：if (x != 0 || y != 0) 的作用是什么？如果我添加更多的盒子，我可以在一个循环中压缩on mouseover 和on mouseout 吗？是否可以在拖动矩形时使中心矩形移动？对我来说它有效，但中心只有在我释放 bue 可拖动矩形后才会移动。
if (x != 0 || y != 0)的作用是防止在不需要的时候调用batchDraw。你可以做很多事情只是测试看看，我不是这个主题的专家......是的，我注意到 Konva 渲染动作有点慢，也许你应该尝试使用不同的框架。
您对这个小演示的框架有什么建议吗？
查看游戏框架：github.com/collections/javascript-game-engines