如何在dragend上获取raphael中的当前圆圈位置

Question

我在搞砸Raphael.js 并遇到以下问题。 我有一个可拖动的圆（椭圆），在单击按钮时应围绕其中心点旋转+15 或-15 度数。

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);

如果circle 之前没有被拖到另一个位置，那么它到目前为止有效。如果圆已经被拖动，它会围绕其中心点进行动画处理，但也会动画到开始拖动的点。

我想要的是，拖动当前位置后，旋转圆圈时保存。

我已经上传了文件，所以你可以有一个LOOK

非常感谢任何帮助。谢谢。

注意：我的拖动代码指的是POST

Answer 1

这是 Raphael 变换引起胃灼热的常见原因，因为它们经常会相互覆盖。试试这个：将ox 和oy 保留为代表椭圆当前静止位置的变量，并在每次旋转时平移形状。 （另外，每次翻译时都要旋转它）：

我稍微弄乱了代码以使其适合没有 jQuery 的 jsFiddle，但概念是相同的：

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/

通常，将每个转换视为从头开始。我通常也会避免使用“...”语法，因为在这种情况下很难调试。