Glisser-déposer et la forme de la rotation avec Raphael JS

J'ai essayé plusieurs fois d'envelopper ma tête autour de la transformation de nouveau à moteur, en vain. Donc, je reviens aux premiers principes.

J'ai enfin réussi à correctement faites glisser et déposez un objet thats subi plusieurs transformations, après avoir essayé de travailler sur l'impact des différentes transformations - t,T,..., t,..., T,r,r, etc...

Donc, ici, est le point crucial de la solution

var ox = 0;
var oy = 0;

function drag_start(e) 
{
};


function drag_move(dx, dy, posx, posy) 
{


   r1.attr({fill: "#fa0"});

   //
   //Here's the interesting part, apply an absolute transform 
   //with the dx,dy coordinates minus the previous value for dx and dy
   //
   r1.attr({
    transform: "...T" + (dx - ox) + "," + (dy - oy)
   });

   //
   //store the previous versions of dx,dy for use in the next move call.
   //
   ox = dx;
   oy = dy;
}


function drag_up(e) 
{
   //nothing here
}

Que c'est. Bêtement simple, et je suis sûr qu'elle est produite à des charges de personnes déjà, mais peut-être que quelqu'un pourrait trouver utile.

Voici un violon pour vous de jouer avec.

... et cette est une solution de travail pour la question initiale.

OriginalL'auteur amadan

Comme amadan l'indique, il est généralement une bonne idée de créer des fonctions lorsque plusieurs choses ont le même (initiale) des attributs/propriétés. C'est en effet la réponse à votre première question. Quant à la seconde question, qui est un peu plus délicat.

Lorsqu'un Rapheal objet est mis en rotation, de sorte que les coordonnées de l'avion. Pour une raison quelconque, dmitry et quelques autres sources sur le web semblent d'accord pour dire que c'est la bonne façon de le mettre en œuvre. J'ai, comme vous, sont en désaccord. Je n'ai pas réussi à trouver tout autour de la bonne solution mais je ne mange de la création d'un travail autour de. Je vais brièvement expliquer et de montrer ensuite le code.

• Créer un attribut personnalisé pour stocker l'état actuel de rotation
• Selon que l'attribut de décider de la façon de gérer le déplacement.

À condition que vous allez seulement la rotation de formes de 90 degrés (si ce n'est qu'il devient beaucoup plus difficile), vous pouvez déterminer la façon dont les coordonnées doivent être manipulés.

var R = Raphael("paper", "100%", "100%");

//create the custom attribute which will hold the current rotation of the object {0,1,2,3}
R.customAttributes.rotPos = function (num) {
    this.node.rotPos = num;
};

var shape1 = insert_rect(R, 100, 100, 100, 50, { fill: "red", stroke: "none" });
var shape2 = insert_rect(R, 200, 200, 100, 50, { fill: "green", stroke: "none" });
var shape3 = insert_rect(R, 300, 300, 100, 50, { fill: "blue", stroke: "none" });
var shape4 = insert_rect(R, 400, 400, 100, 50, { fill: "black", stroke: "none" });

//Generic insert rectangle function
function insert_rect(paper,x,y, w, h, attr) {
    var angle = 0;
    var rect = paper.rect(x, y, w, h);  
    rect.attr(attr);

    //on createion of the object set the rotation position to be 0
    rect.attr({rotPos: 0});

    rect.drag(drag_move(), drag_start, drag_up);

    //Each time you dbl click the shape, it gets rotated. So increment its rotated state (looping round 4)
    rect.dblclick(function(){
        var pos = this.attr("rotPos");
        (pos++)%4;
        this.attr({rotPos: pos});
        angle -= 90;
        rect.stop().animate({transform: "r" + angle}, 1000, "<>");
    });

    return rect;  
}

//ELEMENT/SET Dragger functions.
function drag_start(e) {
    this.ox = this.attr("x");
    this.oy = this.attr("y");
};


//Now here is the complicated bit
function drag_move() {
    return function(dx, dy) {

        //default position, treat drag and drop as normal
        if (this.attr("rotPos") == 0) {
          this.attr({x: this.ox + dx, y: this.oy + dy});
        }
        //The shape has now been rotated -90
        else if (this.attr("rotPos") == 1) {

            this.attr({x:this.ox-dy, y:this.oy + dx});
        }           
        else if (this.attr("rotPos") == 2) {
            this.attr({x: this.ox - dx, y: this.oy - dy});
        }
        else if (this.attr("rotPos") == 3) {
             this.attr({x:this.ox+dy, y:this.oy - dx});

        }      
    }
};

function drag_up(e) {
}

Je ne peux pas vraiment penser à claire et concise façon d'expliquer comment la drag_move œuvres. Je pense que c'est probablement mieux que vous regardez le code et de voir comment il fonctionne. Fondamentalement, vous avez juste besoin de travailler sur la façon dont les variables x et y sont maintenant traités à partir de cette nouvelle rotation de l'etat. Sans moi, le tirage au sort des graphismes je ne suis pas sûr que je pourrais être assez clair. (J'ai fait beaucoup de tourne la tête de côté pour travailler sur ce qu'il doit faire).

Il ya quelques inconvénients à cette méthode:

• Elle ne fonctionne que pour des rotations à 90 ° (une énorme quantité plus de calculs seraient nécessaires pour faire 45degrees, passons au degré)
• Il y a un léger mouvement sur l'glisser démarrer après une rotation. C'est parce que le glisser prend les anciennes valeurs x et y, qui ont été tournés. Ce n'est pas un énorme problème pour cette taille de la forme, mais en plus grand de formes, vous allez vraiment commencer à remarquer les formes de saut à travers la toile.

Je suis en supposant que la raison que vous utilisez transformer, c'est que vous pouvez animer la rotation. Si ce n'est pas nécessaire, alors vous pouvez utiliser les .rotate() fonction qui tourne autour du centre de l'élément, et donc d'éliminer la 2ème inconvénient que j'ai mentionnés.

Ce n'est pas une solution complète, mais il devrait certainement vous permettre de continuer le long du chemin d'accès correct. Je serais intéressé de voir une version de travail.

J'ai également créé une version de ce sur jsfiddle, vous pouvez les consulter ici: http://jsfiddle.net/QRZMS/3/

Bonne chance.

OriginalL'auteur Adam Holmes

Si vous ne souhaitez pas utiliser un ElbertF de la bibliothèque, vous pouvez transformer des Coordonnées Cartésiennes en Coordonnées Polaires.

Après vous devez ajouter ou supprimer l'angle et la transformer à nouveau en Coordonnées Cartésiennes.

Nous pouvons voir cet exemple avec un rect, tourner dans le rumble et déplacé.

HTML

<div id="foo">

</div>

JAVASCRIPT

var paper = Raphael(40, 40, 400, 400); 
var c = paper.rect(40, 40, 40, 40).attr({ 
    fill: "#CC9910", 
    stroke: "none", 
    cursor: "move" 
}); 
c.transform("t0,0r45t0,0");

var start = function () { 
    this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
    this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
}, 

move = function (dx, dy) { 
    var r = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    var ang = Math.atan2(dy,dx);
    ang = ang - Math.PI/4;
    dx = r * Math.cos(ang);
    dy = r * Math.sin(ang);

    var att = this.type == "rect" ? { x: this.ox + dx, y: this.oy + dy} : { cx: this.ox + dx, cy: this.oy + dy };
    this.attr(att);
}, 

up = function () { 
}; 

c.drag(move, start, up);?

DÉMO

http://jsfiddle.net/Ef83k/74/

OriginalL'auteur user1374626