KineticJS變換圖層滾動

我一直試圖把滾動條放入我的KineticJS應用程序中，下面是關於API的教程Kinetic。我有滾動條自己出現，因爲他們應該，但我不知道如何處理事件監聽器實際上讓舞臺或每個圖層移動，以便滾動條實際上移動視圖。KineticJS變換圖層滾動

var hscrollArea = new Kinetic.Rect({ 
    x: 10, 
    y: $(window).height() - 30 - 80, // 80 to account for the fixed footer 
    width: $(window).width() - 40, 
    height: 20, 
    fill: "gray", 
    opacity: 0.3 
}); 

var hscroll = new Kinetic.Rect({ 
    x: 10, 
    y: $(window).height() - 30 - 80,// 80 to account for the fixed footer 
    width: 130, 
    height: 20, 
    fill: "orange", 
    draggable: true, 
     dragBoundFunc: function(pos) { 
     // TODO: Move stage or layers at this point 
     console.log("dragBoundFunc: " + this); 
     return { 
      x: pos.x, 
      y: this.getAbsolutePostion().y 
     }; 
     }, 
    opacity: 0.9, 
    stroke: "black", 
    strokeWidth: 1 
}); 

var vscrollArea = new Kinetic.Rect({ 
    x: $(window).width() - 30, 
    y: 10, 
    width: 20, 
    height: $(window).height() - 40 - 80, 
    fill: "gray", 
    opacity: 0.3 
}); 

var vscroll = new Kinetic.Rect({ 
    x: $(window).width() - 30, 
    y: 10, 
    width: 20, 
    height: 70, 
    fill: "orange", 
    draggable: true, 
    dragBoundFunc: function(pos) { 
     // TODO: Move stage or layers at this point 
     console.log("dragBoundFunc: " + this); 
     return { 
      x: this.getAbsolutePosition().x, 
      y: pos.y 
     }; 
    }, 
    opacity: 0.9, 
    stroke: "black", 
    strokeWidth: 1 
});

任何幫助將不勝感激:) 謝謝，貝基

來源

2013-02-28 Becky Franklin

當你的滾動條（矩形）拖動可以移動階段或層。即，

stage.move(50,50); 
stage.draw(); 

stage.move(-50,-50); 
stage.draw();

來源

2013-02-28 15:09:17 allenhwkim

我會建議將您希望滾動到自己的組和組相應的位置上，而不是試圖位置層或舞臺上的對象。組的大小將是組內所有對象的（軸對齊）邊界框。您可以使用組的大小，並將其與舞臺的大小進行比較，以獲得寬度和高度的比率。這些比率將用於幫助計算水平和垂直滾動條的大小（這些條被拖動以創建滾動效果）。該比例還將用於確定何時顯示和隱藏滾動條區域。尺寸的差異有助於確定如何在舞臺中定位組。

來源

2014-11-02 03:38:33 truefusion

KineticJS變換圖層滾動

回答

相關問題