Javascript 用于滚动的KineticJS变换层
我一直在尝试在我的KineticJS应用程序中加入滚动条,遵循API上的教程。我让滚动条本身看起来像它们应该的那样,但我不确定如何使用事件侦听器来实际移动舞台或每个层,以便滚动条实际移动视图Javascript 用于滚动的KineticJS变换层,javascript,scroll,kineticjs,Javascript,Scroll,Kineticjs,我一直在尝试在我的KineticJS应用程序中加入滚动条,遵循API上的教程。我让滚动条本身看起来像它们应该的那样,但我不确定如何使用事件侦听器来实际移动舞台或每个层,以便滚动条实际移动视图 var hscrollArea = new Kinetic.Rect({ x: 10, y: $(window).height() - 30 - 80, // 80 to account for the fixed footer width: $(window).width() -
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
});
任何帮助都将不胜感激:)
谢谢
Becky拖动滚动条(矩形)时,可以移动舞台或层。i、 e
stage.move(50,50);
stage.draw();
stage.move(-50,-50);
stage.draw();
我建议将您希望滚动的对象放入它们自己的组中,并相应地定位组,而不是尝试定位层或舞台。组的大小将是组内所有对象的(轴对齐)边界框。您可以使用组的大小,并将其与舞台的大小进行比较,以获得宽度和高度的比率。这些比率将用于帮助计算水平和垂直滚动条的大小(拖动滚动条以创建滚动效果)。该比率还将用于确定何时显示和隐藏滚动条区域。大小的差异将有助于确定如何在舞台上定位团队