Как вы можете держать вращающиеся перетаскиваемые объекты внутри бумаги Рафаэля? - PullRequest
Новая
       3

Как вы можете держать вращающиеся перетаскиваемые объекты внутри бумаги Рафаэля?

1 голос
/ 26 февраля 2012

У меня есть приложение со множеством перетаскиваемых объектов, которые также можно поворачивать с шагом 90 градусов. Я пытаюсь понять, как не дать пользователю перетаскивать объекты за пределы бумаги Рафаэля (холст).

Это довольно просто для не повернутых объектов. Я могу просто увидеть, если текущие координаты x и y меньше 0 и установить вместо них 0. Я могу настроить аналогичным образом, проверив, находятся ли они за пределами ширины и высоты холста.

Однако, проблема возникает, когда объект вращается, потому что по некоторой нечетной причине вращается и координатная плоскость. Есть ли простой способ держать предметы внутри холста? Или есть где-то пример этого?

Я потратил много часов на то, чтобы поиграть с этим, и мне кажется, что я не вижу смысла в повороте координатной плоскости для корректировки моих расчетов. Даже при отладке текущих координат они кажутся странными, если я перетаскиваю объект, отпускаю его, а затем снова перетаскиваю объект.

Любая помощь очень ценится.

Спасибо, Райан

Ответы [ 2 ]

1 голос
/ 18 декабря 2013

У меня была похожая проблема, мне нужно было перемещать фигуру в границах другой фигуры, поэтому я сделал: 

element.drag(onstart, onmove, onend);

...
onStart: function(x,y,e){
        //  Initialize values so it doesn't recalculate per iteration
        // this allows to resume dragging from the point it were left
        App.oldX = 0;
        App.oldY = 0;
        App.currentCircleX  = App.fingerPath.attr('cx');
        App.currentCircleY  = App.fingerPath.attr('cy');
    },
    onMove: function(dx,dy,x,y,e){
        App.setDirection(dx,dy);
    },
    onEnd: function(e){
        // nothing to do here for now
    },

// this function tells the element to move only if it's within the bound area
    setDirection: function(dx, dy){
        var isXYinside;
        this.newX   = this.currentCircleX - (this.oldX - dx);
        this.newY   = this.currentCircleY - (this.oldY - dy);

        // HERE is the key, this method receives your bounding path and evaluates the positions given and then returns true or false
        isXYinside  = Raphael.isPointInsidePath(this.viewportPath, this.newX, this.newY);
        this.oldX   = dx;
        this.oldY   = dy;
        // so if it is within the bound area, will move, otherwise will just stay there
        if (isXYinside) {
            this.fingerPath.attr({
                "cx": this.newX,
                "cy": this.newY
            });
            this.currentCircleX = this.newX;
            this.currentCircleY = this.newY;
        }
    }

Я знаю, что это старый, но я наткнулся на этот вопрос, пытаясь найти способ сделать это. Так что вот мои 2 цента на случай, если у кого-то возникнет эта проблема.

Справка:

Raphael.isPointInsidePath

0 голосов
/ 28 февраля 2012

Вы пробовали Element.getBBox () Есть 2 флавона, которые дают результат до вращения и после вращения Вы должны переключить логический аргумент и проверить его

...