KineticJS transform layers for scrolling

Question

I've been trying to put scrollbars into my KineticJS app following the tutorial Kinetic have on the API. I have the scrollbars themselves appearing as they should, but I'm not sure what to do with the event listeners to actually get the stage or each of the layers to move so that the scrollbars actually move the view along.

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

Any help would be greatly appreciated :) Thanks, Becky

Answer 1

You can move stage or layer when your scrollbar(rectangle) is dragged. ie,

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

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

Answer 2

I would recommend placing the objects you wish to scroll into their own group and position the group accordingly, rather than trying to position layers or the stage. The size of the group would be the (axis-aligned) bounding box of all the objects within the group. You can use the size of the group and compare it against the size of the stage to get a ratio for width and height. These ratios would be used to help calculate sizes for horizontal and vertical scroll bars (the bars being what get dragged to create a scroll effect). The ratio would also be used to determine when to show and hide the scroll bar areas. The difference in sizes would help in determining how to position the group within the stage.