如何使用JavaScript和Raphael旋转以前拖动的SVG对象？

2019-11-02 04:34:19 阅读：216 来源： 互联网

标签：svg rotation drag-and-drop raphael javascript

我正在使用Raphael库旋转和拖动图像.我可以正确拖动它,并且有一个按钮可以在每次按下时将其正确旋转90度.但是,旋转图像,拖动图像然后尝试再次旋转时出现问题.

HTML中唯一的元素是保存Raphael画布的div和旋转图像的按钮. JavaScript在这里：

var gboard;
var piece;

window.onload = function () 
{
    gboard = Raphael("gameboard", 800, 500);    
    // piece = gboard.rect(100, 100, 50, 50).attr({fill: "#0CF", "fill-opacity": 1, stroke: "none", cursor: "move"});
    piece = gboard.image("piece.gif", 100, 100, 50, 50).attr({cursor: "move"});
    piece.drag(dragMove, dragStart, dragStop);  
    var angle = 0;

    document.getElementById('btn').onclick = function () {
        angle += 90;
        var cx = piece.attr('x') + 25;
        var cy = piece.attr('y') + 25;
        piece.animate({transform: "R" + angle + ", " + cx + ", " + cy + ""}, 500, "<>");
        // piece.transform("R90," + cx + "," + cy);
    };

}

// Set up the object for dragging
function dragStart() 
{
    this.ox = this.attr("x");
    this.oy = this.attr("y");
}

// Clean up after dragging ends
function dragStop() {}

/**
 * Handle the moving of objects when dragging 
 * Check the current angle to compensate for rotated coordinate system.
 */
function dragMove(dx, dy) 
{
    var angle = getAngle(this._['deg']);
    if (angle == 90)
        this.attr({x: this.ox + dy, y: this.oy - dx});
    else if (angle == 180)
        this.attr({x: this.ox - dx, y: this.oy - dy});
    else if (angle == 270)
        this.attr({x: this.ox - dy, y: this.oy + dx});
    else // angle == 0
        this.attr({x: this.ox + dx, y: this.oy + dy});
}

/** 
 * Get the simplified equivalent angle (0 <= angle <= 360) for the given angle. 
 *
 * @param deg   The angle in degrees
 * @return  The equivalent angle between 0 and 360
 */
function getAngle(deg)
{
    if (deg % 360 == 0)
        return 0;   
    else if (deg < 0)
    {
        while (deg < 0)
            deg += 360;
    }
    else if (deg > 360)
    {
        while (deg > 360)
            deg -= 360;
    }

    return deg;
}

解决方法:

我通过在值更改时重新应用所有转换来解决此问题.

http://alias.io/raphael/free_transform/

资料来源：https://github.com/ElbertF/Raphael.FreeTransform

标签：svg,rotation,drag-and-drop,raphael,javascript
来源： https://codeday.me/bug/20191102/1988938.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何使用JavaScript和Raphael旋转以前拖动的SVG对象？