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

Answer 2

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

 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/

Kineticjs Dragend - 如何存储getPosition（）的结果

2 个答案: