4

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

谢谢，

4

2 回答 2

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

并尝试使用 xy 坐标

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);
        }
    },
于 2016-04-29T09:40:37.050 回答
0

在函数之前创建一个新数组，如下所示：

 var xArray = new Array();

然后在你的函数里面

    oh.on('dragend', function(e) {
       alert(oh.getPosition().x);
       // ADD NEW ITEM TO ARRAY, STORE X POSITION
       xArray.push(oh.getPosition().x);
    });

所以所有的 x 值都存储在数组中。如果您需要清除数组，您可以简单地再次创建一个具有相同名称的新数组。如果需要，您可以使用循环遍历它。

更新：http: //jsfiddle.net/pwM8M/2/

于 2013-01-02T22:06:01.687 回答