kineticjs - 动力学js不尊重dragBoundsFunc来约束拖动

Question

在此示例 jsfiddle中，我无法让 kineticjs 尊重dragBoundsFunc以限制水平和垂直拖动两个框。我需要做什么才能使以下代码正常工作？

$(function() {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: $("#container").width(),
        height: window.innerHeight * 0.9,
        listening: true
    });

    var scrollAreas = new Kinetic.Group();
    var scrollBars = new Kinetic.Group();
    var scrollBarsLayer = new Kinetic.Layer();

    var hscrollArea = new Kinetic.Rect({
        x: 10,
        y: stage.getHeight() - 30,
        width: stage.getWidth() - 40,
        height: 20,
        fill: "gray",
        opacity: 0.3
    });

    var hscroll = new Kinetic.Rect({
        x: 10,
        y: stage.getHeight() - 30,
        width: 130,
        height: 20,
        fill: "orange",
        draggable: true,
          dragBoundsFunc: function(pos) {
            return {
                x: pos.x,
                y: this.getAbsolutePostion().y
            };
          },
        opacity: 0.9,
        stroke: "black",
        strokeWidth: 1
    });

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

    var vscroll = new Kinetic.Rect({
        x: stage.getWidth() - 30,
        y: 10,
        width: 20,
        height: 70,
        fill: "orange",
        draggable: true,
        dragBoundsFunc: function(pos) {
            return {
                x: this.getAbsolutePosition().x,
                y: pos.y
            };
        },
        opacity: 0.9,
        stroke: "black",
        strokeWidth: 1
    });

    scrollBars.on("mouseover", function() {
        document.body.style.cursor = "pointer";
    });
    scrollBars.on("mouseout", function() {
        document.body.style.cursor = "default";
    });

    scrollAreas.add(hscrollArea);
    scrollAreas.add(vscrollArea);
    scrollBars.add(hscroll);
    scrollBars.add(vscroll);

    scrollBarsLayer.add(scrollAreas);
    scrollBarsLayer.add(scrollBars);
    stage.add(scrollBarsLayer);
});

Answer 1

它是dragBoundFunc（而不是dragBoundsFunc，请注意s）。