KineticJS转换图层用于滚动

KineticJS transform layers for scrolling

本文关键字：滚动 用于 图层 转换 KineticJS      更新时间：2023-09-26

我一直在尝试将滚动条放入我的KineticJS应用程序中，遵循Kinetic在API上的教程。我有滚动条本身出现，因为他们应该，但我不确定如何处理事件监听器，以实际得到舞台或每一层移动，使滚动条实际移动视图。

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
});

任何帮助都会非常感激:)谢谢,贝基

当滚动条(矩形)被拖动时，可以移动舞台或图层。例如,

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

我建议您将希望滚动的对象放置到它们自己的组中，并相应地定位组，而不是尝试定位图层或舞台。组的大小将是组中所有对象的(与轴对齐的)边界框。您可以使用组的大小并将其与舞台的大小进行比较，以获得宽度和高度的比例。这些比率将用于帮助计算水平和垂直滚动条的大小(拖动这些滚动条来创建滚动效果)。该比率还将用于确定何时显示和隐藏滚动条区域。大小的差异将有助于确定该群体在舞台上的位置。

相关文章：