Question

我正在寻找一种将多个形状（矩形）移动到一起的方法。使用鼠标滚轮滚动时，形状应在大小（setWidth）上更改并移动到不同的x位置。我知道不可能设置图层的宽度，因为代表图层的画布总是与动力学阶段的尺寸相同。可能与团体一样......

我创造了一个小提琴：jsfiddle.net

我希望将形状与上面的日历网格相匹配，这样当用户使用鼠标滚动时，它们的x位置和宽度必须设置为新值（第444行）：

    else if (eventline.stage.zoomWheel<=8){
      group.setX(sdaynum*cellW/7);
      group.setWidth((edaynum-sdaynum)*cellW/7);

提前感谢您的帮助！

Answer 1

这需要很多代码，所以这是一个普遍的答案。

动力群可以移动并调整大小......

Kinetic Group是一个可以放入多个形状的容器。

这是整理日历的好方法。

您可以通过简单地将其draggable属性设置为true来拖动组：

myGroup.setDraggable(true);

您可以设置组的XY位置（也为所有包含的形状设置XY）：

myGroup.setX(20);
myGroup.setY(20);

重要的是，在您的情况下，您还可以通过该组的所有子项进行枚举来更改这些子项的属性：

myGroup.getChildren().each( function(){

    // Make your changes to each child here
    // You could set each child's XY position within the group (relative positioning)
    // You could reset each child's width 

});

在您的情况下也很有用，您可以拥有多个组并在它们之间移动形状：

aSelectedDay.moveTo(myVacationGroup);

anotherSelectedDay.moveTo(myConferenceGroup);

Kinetic.js：组的移动和setWidth

1 个答案: