图像只能在 x 轴上拖动

Question

使用 kinetic-v4.7.2.min.js 库如何允许图像只能在 X 轴上拖动？谁能帮我？在此 fiddle 中，我希望房屋图像可水平拖动。

HTML代码：

<h5>Drag the icon from the toolbar to the Kinetic.Stage<br>This creates new Kinetic.Images</br>The images on the stage are draggable.</h5>
<div id="toolbar">
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/Whosebug/house32x32transparent.png">
    <br>
</div>
<div id="container"></div>

JS代码：

// get a reference to the house icon in the toolbar
// hide the icon until its image has loaded
var $house = $("#house");
$house.hide();

// get the offset position of the kinetic container
var $stageContainer = $("#container");
var stageOffset = $stageContainer.offset();
var offsetX = stageOffset.left;
var offsetY = stageOffset.top;

// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

// start loading the image used in the draggable toolbar element
// this image will be used in a new Kinetic.Image
var image1 = new Image();
image1.onload = function () {
    $house.show();
}
image1.src = "https://dl.dropboxusercontent.com/u/139992952/Whosebug/house32x32transparent.png";

// make the toolbar image draggable
$house.draggable({
    helper: 'clone',
});

// set the data payload
$house.data("url", "house.png"); // key-value pair
$house.data("width", "32"); // key-value pair
$house.data("height", "33"); // key-value pair
$house.data("image", image1); // key-value pair

// make the Kinetic Container a dropzone
$stageContainer.droppable({
    drop: dragDrop,
});

// hangle a drop into the Kinetic container
function dragDrop(e, ui) {

    // get the drop point
    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);

    // get the drop payload (here the payload is the image)
    var element = ui.draggable;
    var data = element.data("url");
    var theImage = element.data("image");

    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Kinetic.Image({
        name: data,
        x: x,
        y: y,
        image: theImage,
        draggable: true
    });
    layer.add(image);
    layer.draw();
}

Answer 1

dragboundFunc可以用来约束用户的拖动（比如横向约束）

dragboundFunc 在对象内部声明：http://jsfiddle.net/m1erickson/LuZbV/

var image = new Kinetic.Image({
    name: data,
    x: x,
    y: y,
    image: theImage,
    draggable: true,

    // restrict to allow horizontal dragging only
    dragBoundFunc: function(pos) {
        return {
          x: pos.x,
          y: this.getAbsolutePosition().y
        }
    }        
});

图像只能在 x 轴上拖动

Image is draggable only on x Axis

javascript

html5-canvas

kineticjs