Konva实时更新rect位置
Konva实时更新rect位置
提问于 2018-07-31 22:23:37
我在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;创建了一个新的变量，而不是像我希望的那样改变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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-31 23:47:10
如果要移动中心对象，则需要使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51615687
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号