Question

我已经使用KineticJS实现了拖放项目的解决方案：从工具栏（或手风琴，无关紧要）到白色区域，舞台或画布，项目是图像和矩形。矩形代表一个房间，图像是设备。

在googling（直到现在）之后发现的所有示例中，基本上都是在图层内部绘制Kinetic.Group，向该组添加形状并使其在舞台上可拖动。

这里的问题是我不知道如何将矩形作为一个组，所以当我将它拖到画布上时，图像也会被拖动;也就是说当我拖动一个包含物品的房间时，整个组都会被拖放。我想实现这样的事情：http://jsfiddle.net/tbYLe/2/，如上所述执行。

编辑：这是我迄今为止所做的事情http://jsfiddle.net/wQ8YA/15/

Answer 1

首先，您应该提供您尝试过的代码，以帮助其他人帮助您。

您要做的是创建一个组，它位于图层和形状之间，因此您可以向组中添加形状，然后拖动整个组。

此处列出了一个组可以拥有的属性：http://kineticjs.com/docs/Kinetic.Group.html

这是一个小组的示例：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/

注意没有颜色或形状，但它可以被认为是一个矩形，就像一个图层是一个矩形，而画布是一个矩形。 群组只是一个容器，而不是一个形状

所以，如果你想要一个＆＃34;房间，＆＃34;我建议这种做法。

function createGroup(width,height){
//create a group - define a size for it 
var group = new Kinetic.Group({
    draggable: true //make group draggable
});
//create a rectangle
//add rectangle to group - fill up entire group - this will be the visual representation for your group - this rectangle should not be draggable
//return group
}

// use of
var myRoom = createGroup(100, 200);
myRoom.add(new Kinetic.Circle({config})); // this new circle can be draggable

KineticJS：将一个组从工具栏拖到舞台上

1 个答案: