Kinetic.js：一組的移動和setWidth

Question

我正在尋找一種將多個形狀（矩形）一起移動的方法。使用鼠標滾輪時，形狀應在Size（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

這是很多代碼來通過，所以這裏是一個普遍的答案。

動力學組可以移動和調整大小...

動力學集團是，你可以把多個形狀到容器中。

這是組織日曆的好方法。

你可以通過簡單的拖動屬性設置爲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);