javascript - Kineticjs Dragend - 如何存储 getPosition() 的结果

Question

我是 Kineticjs 的新手，并不是一个出色的 JavaScript 编码员，所以我希望在这个例子中得到一些帮助。 http://jsfiddle.net/pwM8M/

我正在尝试将 x 轴存储在门上，这样当完成与门无关的重绘时，它们不会返回到默认位置。 (也有多种类型的门窗)

每个表单元素可以有多个数量(不止一扇门)，所以我需要一种方法来存储/检索当前包含在 jsfiddle 警报中的数据。

我做了一些研究，但一无所获。任何人都可以帮助我提供什么吗？

       function OH(x,y,w,h) {
        var oh = new Kinetic.Text({
            x:x,
            y: y,
            width: w*scale,
            height: h*scale,
            stroke: wtc,
            strokeWidth: 1,
            fill: 'brown',
            fontSize: 6,
            fontFamily: 'Calibri',
            padding:4,
            text: w+' x '+h+' OH\n\n<- DRAG ->',
            align: 'center',
            textFill: 'white',
            draggable: true,
            dragConstraint:'horizontal',
            dragBounds: {
                left:xoffset, right: xoffset+width+length-(w*scale)
            }
        });
            oh.on('dragend', function(e) {
                alert(oh.getPosition().x);
            });
            window.south.add(oh);
    }

谢谢，

Answer 1

我在这里使用了拖动功能的固定大小的 40x40 矩形。试试这个

 var box = new Kinetic.Rect({
                    x: parseFloat(area.size.x),
                    y: parseFloat(area.size.y),
                    width: 40, //parseFloat(area.size.width)
                    height: 40,
                    fill: area.color,
                    stroke: 'black',
                    strokeWidth: 1,
                    opacity: 0.6,
                    id : area.id + id,
                    draggable: true,
                    dragBoundFunc: function(pos) {
                        // x
                        var newX = pos.x < 0 ? 40 : pos.x;
                        var newX = newX > _self.canvasWidth - area.size.width ? _self.canvasWidth - area.size.width : newX;
                        // y
                        var newY = pos.y < 0 ? 40 : pos.y;
                        var newY = newY > _self.canvasHeight - area.size.height ? _self.canvasHeight - area.size.height : newY;

                        return {
                          x: newX,
                          y: newY
                        };

使用这个函数

box.on('dragend', function() {
            _self.draw = false;
            _self.dragArea(area, box);
        });

并尝试使用 x y 坐标进行游戏

dragArea: function(area, box){
        if(box){
            $$('#' + this.formId + ' [name="areas[' + area.id + '][size][x]"]').first().value = parseInt(box.attrs.x);
            $$('#' + this.formId + ' [name="areas[' + area.id + '][size][y]"]').first().value = parseInt(box.attrs.y);

            area.size.x = parseInt(box.attrs.x);
            area.size.y = parseInt(box.attrs.y);
        }
    },