CODEWITHSUNDEEP
jqueryhtmlraphael
supersize
supersize

Reputation: 14773

how to get the current circle position in raphael on dragend

I'm messing around with Raphael.js and got the following problem. I have a draggable circle (ellipse) which should rotate +15 or -15 degree on button click around its center point.

var angle = 0;
function rotateLeft(e) {
    angle += 15;
    circle.animate( {transform: "r" + angle}, 500);
}   

function rotateRight(e) {
    angle -= 15;
    circle.animate( {transform: "r" + angle}, 500);
}               

$('#left').on('click', this, rotateRight);
$('#right').on('click', this, rotateLeft);

which works so far if the circle was not dragged on another position before. If the circle was already dragged, it animates around its center point, but also animates to the point where the drag started.

What i want to is, that after drag the current position saves when rotating the circle.

I've uploaded the files, so you can have a LOOK

Any help is much appreciated. Thanks.

Note: My drag-code refers to this POST

Upvotes: 0

Views: 402

Answers (1)

Chris Wilson
Chris Wilson

Reputation: 6719

This is a common cause of heartburn with Raphael transformations, since they overwrite one another routinely. Try this: Keep ox and oy as variables representing the current rest position of the oval, and translate the shape each time you rotate it. (Also, rotate it each time you translate it):

I messed with the code a bit to make it fit in a jsFiddle without jQuery, but concept is identical:

var docwidth = 500;
var docheight = 500;
var paper = Raphael(0, 0, docheight, docwidth);
var circle = paper.ellipse(180, 100, 50, 80); 
circle.attr("fill", "#f00");
circle.attr("stroke", "#000");
circle.attr("opacity", "0.4");

function drawCircle(e) {    
    var $random = Math.floor(Math.random()*3)+1;

    if($random == 1) {
        var circle = paper.ellipse(e.pageX, e.pageY, 20, 50); 
    }

    if($random == 2) {
        var circle = paper.ellipse(e.pageX, e.pageY, 50, 80); 
    }

    if($random == 3) {
        var circle = paper.ellipse(e.pageX, e.pageY, 100, 100); 
    }
    circle.attr("fill", "#f00");
    circle.attr("stroke", "#000");
    circle.attr("opacity", "0.4");
}

// DRAG
var ox = 0;
var oy = 0;

var current_x, current_dy;

function drag_start() {}

//Now here is the complicated bit
function drag_move(dx, dy, posx, posy) {
    //console.log(dx, dy, posx, posy);
    circle.attr({
        fill: "#fa0"
    });

    // keep ox and oy at the original location for the duration 
    // of the drag and just us dx/dy 
    circle.attr({
        transform: "T" + (ox + dx) + "," + (oy + dy) + "R" + angle
    });

    // save net dag coordinates -- we'll need them.
    current_x = dx;
    current_y = dy;
}


function drag_up(e) {
    // don't forget to reset the original positions.
    ox += current_x;
    oy += current_y;
    console.log(ox, oy);
}

circle.drag(drag_move, drag_start, drag_up);

// ROTATION
var angle = 0;
function rotateLeft(e) {
    angle += 15;
    circle.animate( {transform: "T" + ox + "," + oy + "R" + angle}, 500);
}   

function rotateRight(e) {
    angle -= 15;
    circle.animate( {transform: "T" + ox + "," + oy + "R" + angle}, 500);
}               

document.getElementById('left').onclick = rotateRight;
document.getElementById('right').onclick = rotateLeft;

http://jsfiddle.net/chriswilsondc/Pq9qx/1/

In general, think of each transformation as starting from scratch. I generally avoid the "..." syntax as well, since it's so difficult to debug in cases like this.

Upvotes: 1

Related Questions