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/

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

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

1 个答案: