KonvaJS:相对于子坐标的组坐标
KonvaJS: Group's Coordinates With Respect to Childrens' Coordinates
我在我的项目中使用 KonvaJs。我正在使用 Konva.Group
将 Konva.Image
、Konva.Rect
等项目组合在一起。但是我在将它们放置在 mousemove
事件的特定位置时遇到了一些挑战。我有 Konva.Group
这样的:
var group = new Konva.Group({
x: 0,
y: 0
});
还有像这样的图像和矩形
var border = new Konva.Rect({
x: 115,
y: 35,
width: 116,
height: 128,
fill: 'grey'
});
yoda = new Konva.Image({
x: 120,
y: 40,
image: imageObj,
width: 106,
height: 118
});
这是 plunkr。
现在我要做的是将组移动到鼠标指针所在的位置。为此,我正在这样做:
stage.on('mousemove', function(e) {
var point=stage.getPointerPosition();
//Don't know why this is not puttig the group childern poperly
//group.position(stage.getPointerPosition());
yoda.position(point);
border.position({
x: point.x-5,
y: point.y-5
})
layer.batchDraw();
});
因为这里我只有两个元素,所以我可以一个一个地移动它们,但是如果我的组中的元素或子元素的数量会增加。我无法将它们全部一一移动。我试图移动整个组,但它没有跟随指针位置。我想了解如何以 group.position(position)
这样的方式放置棋子,并且棒状棋子开始跟随鼠标指针。还有Group的坐标和它的children是什么关系。
您可能会遇到意外行为,因为您的子节点已移入组内。
当您在 had x = 120 y = 140 中创建图像时。当您将组位置设置为(例如)x= 100 y = 100 时,图像将放置在 x = 210 (120 + 100) y = 240 (140 + 100).
只需减少子元素的位置:
yoda = new Konva.Image({
x: 5,
y: 5,
image: imageObj,
width: 106,
height: 118
});
group.add(border);
group.add(yoda);
我在我的项目中使用 KonvaJs。我正在使用 Konva.Group
将 Konva.Image
、Konva.Rect
等项目组合在一起。但是我在将它们放置在 mousemove
事件的特定位置时遇到了一些挑战。我有 Konva.Group
这样的:
var group = new Konva.Group({
x: 0,
y: 0
});
还有像这样的图像和矩形
var border = new Konva.Rect({
x: 115,
y: 35,
width: 116,
height: 128,
fill: 'grey'
});
yoda = new Konva.Image({
x: 120,
y: 40,
image: imageObj,
width: 106,
height: 118
});
这是 plunkr。
现在我要做的是将组移动到鼠标指针所在的位置。为此,我正在这样做:
stage.on('mousemove', function(e) {
var point=stage.getPointerPosition();
//Don't know why this is not puttig the group childern poperly
//group.position(stage.getPointerPosition());
yoda.position(point);
border.position({
x: point.x-5,
y: point.y-5
})
layer.batchDraw();
});
因为这里我只有两个元素,所以我可以一个一个地移动它们,但是如果我的组中的元素或子元素的数量会增加。我无法将它们全部一一移动。我试图移动整个组,但它没有跟随指针位置。我想了解如何以 group.position(position)
这样的方式放置棋子,并且棒状棋子开始跟随鼠标指针。还有Group的坐标和它的children是什么关系。
您可能会遇到意外行为,因为您的子节点已移入组内。
当您在 had x = 120 y = 140 中创建图像时。当您将组位置设置为(例如)x= 100 y = 100 时,图像将放置在 x = 210 (120 + 100) y = 240 (140 + 100).
只需减少子元素的位置:
yoda = new Konva.Image({
x: 5,
y: 5,
image: imageObj,
width: 106,
height: 118
});
group.add(border);
group.add(yoda);