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 に答える