0

我正在搞砸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如果之前没有将其拖到另一个位置，则到目前为止有效。如果圆已经被拖动，它会围绕其中心点进行动画处理，但也会动画到开始拖动的点。

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

我已经上传了文件，你可以看看

任何帮助深表感谢。谢谢。

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

4

1 回答 1

1

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.

于 2013-06-19T17:53:44.223 回答