Element rotation mit RaphaelJs wie bei EBV Programm

[mita1982]

Hallo Community,

ich möchte gerne ein Objekt drehen lassn wenn man ein an der Ecke ist.

Wie es Photoshop und co auch machen. nur bekomm ich den Algoiythmus nicht hin.. um kreise ziehen zu können.

Hier ein buggy Verison.. weil ich da nur die MouseKoordinate und die Differenz abtaste.

http://jsfiddle.net/QmB4X/202/

Und hier ist eine Version wo ich es versuche.. Aber leider nicht hinbekomme..

http://jsfiddle.net/QmB4X/201/

Es Wäre halt cool wenn man mit Kreisbewegungen was erstellen kann.

Hier gibt es eine Version mit Jqoery leider funkioniert sie nicht beim IE und ich möchte auch nciht per schift Taste drehen sondern wenn man einen bestimmten punkt drückt..

http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/

Den Algorithmus verstehe ich nicht.. beispiel wie man den current Image Angle bekommt.

Vielen Dank schonmal.

Achso es soll die Blaue Box gedreht werden.. wenn man am roten kleinen Quadrat klickt und bewegt.

 

[mita1982]

Hallo noch einmal.

Ich dachtre dass Thema war erledigt allerdings irgendwie doch nicht.

Ich verstehe nicht, wie der Winkel negativ sein kann. In PHP eingebunten verhält sich das ganze auch anders als in der Live Developer Umgebung bzw. reine HTML Seite mit den ganzen code drinn.

Hier nochmal die aktuellste Version

http://jsfiddle.net/QmB4X/268/

Und hier der Javascript Code:

var angle = 0;
var rotate= true;
var gloablAngle =0;
var mouseStartAngle = false;    // The angle of the mouse relative to the image centre at the start of the rotation
var imageStartAngle = 0;
var dragging = true;   
    
    
var ox = 0;
var oy = 0;

var R = Raphael("room_box", 800, 400)
var c = R.rect(100,100, 200, 100).attr({
    fill: "#00f",
    stroke: "transparent"
});

var butt1 = R.rect(95,95,10,10).attr({
    fill: "red",
    stroke: "none",
    opacity: 0
});
var butt2 = R.rect(295,95,10,10).attr({
   fill: "red",
    stroke: "none",
    opacity: 0
});
var butt3 = R.rect(95,195,10,10).attr({
    fill: "red",
    stroke: "none",
    opacity: 0
});
var butt4 = R.rect(295,195,10,10).attr({
    fill: "red",
    stroke: "none",
    opacity: 0
});

registerTransformPoint(butt1);
registerTransformPoint(butt2);
registerTransformPoint(butt3);
registerTransformPoint(butt4);

var st = R.set();
st.push(c);
st.push( butt1);
st.push( butt2);
st.push( butt3);
st.push( butt4);


var start = function () {
    // storing original coordinates
    if(!rotate) {
    ox = event.screenX;
    oy = event.screenY;
    c.attr({
        opacity: .5
    });
    dragging = true;  
},
move = function (dx, dy) {
     if (dragging) {
        st.translate(event.screenX - ox, event.screenY - oy);
        ox = event.screenX;
        oy = event.screenY;
    }
},
up = function () {
    dragging = false;
    c.attr({
        opacity: 1
    });
};
     
//alert(st.attr('rotation'));

function startRotate(target) {
    document.onmousemove = function(event) {
        if(!rotate) return false;
        st.attr({opacity: 1});
       
        /*if (globalX < event.pageX ) {
            gloablAngle = gloablAngle + 2;
            angel = 2;
        }
        
        if (globalX > event.pageX) {
            gloablAngle =  gloablAngle - 2;
            angel = -2;
        }*/
        
        var cx, cy;
        cx = c.attr('x') + c.attr('width') /2;
        cy = c.attr('y') + c.attr('height')/2;
        
// Calculate the new mouse angle relative to the image centre
 
  var mouseXFromCentre = event.pageX - cx;
  var mouseYFromCentre = event.pageY - cy;
  var mouseAngle = (180/Math.PI) * Math.atan2( mouseYFromCentre, mouseXFromCentre );
  // Calculate the new rotation angle for the image
  var rotateAngle =  mouseAngle - mouseStartAngle + imageStartAngle;

  // Rotate the image to the new angle, and store the new angle
    
        
        
        //target.rotate(angel);
        //butt1.rotate(gloablAngle, cx, cy, true);
        
        
        if(event.shiftKey) {
            document.getElementById('debug3').innerHTML =  'SHIFT';
            if(rotateAngle > 0 && rotateAngle < 45) {
                rotateAngle = 0;            
            } else if(rotateAngle >= 45 && rotateAngle < 90) {
                rotateAngle = 45;
            } else if(rotateAngle >= 90 && rotateAngle < 135) {
                rotateAngle = 90;
            } else if(rotateAngle >= 135 && rotateAngle < 180) {
                rotateAngle = 135;
            } else if(rotateAngle >= 180 && rotateAngle < 225) {
                rotateAngle = 180;
            } else if(rotateAngle >= 225 && rotateAngle < 270) {
                rotateAngle = 225;
            } else if(rotateAngle >= 270 && rotateAngle < 360) {
                rotateAngle = 270;
            } else if(rotateAngle > 0) {
                rotateAngle = 0;
            } 
            
        } else if(!event.shiftKey){
            document.getElementById('debug3').innerHTML =  '';
            rotateAngle =  mouseAngle - mouseStartAngle + imageStartAngle;
        }
        target.rotate(rotateAngle ,cx , cy, false);
        
        //butt1.attr({ x: target.attr('x')-5, y: target.attr('y')-5});
        document.getElementById('debug').innerHTML =  'ANGLE : ' + rotateAngle;
            
        
    }
}



function registerTransformPoint(point) {

    point.mousedown(function (event) {
        //globalPoint = point;
        dragging = false;
        rotate= true;
        
        var cx, cy;
        cx = c.attr('x') + c.attr('width') /2;
        cy = c.attr('y') + c.attr('height')/2;
        
        
        var mouseStartXFromCentre = event.pageX - cx;
        var mouseStartYFromCentre = event.pageY - cy;
        mouseStartAngle =  (180/Math.PI) * Math.atan2( mouseStartYFromCentre, mouseStartXFromCentre );
    
      // Store the current rotation angle of the image at the start of the rotatio
        
        imageStartAngle = 0 * (180/Math.PI);
            
        globalX = event.pageX;
        globalY = event.pageY;
        startRotate(st); 
    })
    .mouseover(function () {
        document.getElementById('debug2').innerHTML =  'Hover';
        
    })
    .mouseout(function () {
        document.getElementById('debug2').innerHTML =  'OUT';  
        
    });
}



setTimeout(function () {R.safari();});

document.onmouseup = function(){
    rotate= false;
    globalPoint.attr({opacity: 0});
}




st.mouseover(function(event) {
    butt1.animate({opacity: 1}, 300);
    butt2.animate({opacity: 1}, 300);
    butt3.animate({opacity: 1}, 300);
    butt4.animate({opacity: 1}, 300);
});
st.mouseout(function(event) {
    butt1.animate({opacity: 0}, 300);
    butt2.animate({opacity: 0}, 300);
    butt3.animate({opacity: 0}, 300);
    butt4.animate({opacity: 0}, 300);
});

st.drag(move, start, up);