Question

我正在尝试创建一个带有360指示器的圆形仪表，可以使用Raphaël用鼠标移动。

我想知道如何获得主面板的绝对坐标。我的示例计算出与创建的画布相关的所有内容但是，Element.drag上设置的回调给了我相对于浏览器窗口而不是画布的坐标。

我需要弄清楚画布的位置，这样我才能弄清楚指示器的新角度。谁能解释一下这是怎么做到的？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example using Raphaël</title>
        <script src="raphael-min.js"></script>
        <script>
            window.onload = function () {
                var PANEL_SIZE = 600,
                    r = Raphael("holder", PANEL_SIZE, PANEL_SIZE),
                    PANEL_MID = PANEL_SIZE/2,
                    RADIUS = 200;

                var out = r.set();
                out.push(r.circle(PANEL_MID, PANEL_MID, RADIUS).attr({stroke: "none", fill: "#ffa"}));

                var pathCmd = function( d ) { return "M"+PANEL_MID.toString()+","+(PANEL_MID+30).toString()+"L"+PANEL_MID.toString()+"," + (PANEL_MID - (RADIUS * d)).toString(); }

                var onStart = function (dx, dy) {
                        this.ox = dx;
                        this.oy = dy;
                        console.log("onStart ", dx, " ", dy); },
                    onMove = function (dx, dy) {
                        console.log("onMove ", this.ox + dx, " ", this.oy + dy, " ", this.value, " ", this.total);
                    },                  
                    onEnd = function () { console.log("onEnd"); };

                var pointer = r.path(pathCmd(0.85)).attr( { stroke: "#444", "stroke-width": 20 } ).drag(onMove, onStart, onEnd);
                pointer.total = 360;
                pointer.value = 0;

                (function () {
                    pointer.animate({transform: "r0,"+PANEL_MID.toString()+","+PANEL_MID.toString()}, PANEL_MID, "elastic" );
                })();
            };
        </script>
    </head>
    <body>
        <div id="holder"></div>
    </body>
</html>

Answer 1

您可以尝试使用jQuery's offset()方法。

var holderOffset = $("#holder").offset();
//now dx and dy would become
dx -= holderOffset.left;
dy -= holderOffset.top;

Answer 2

我不明白为什么需要这样做，Raph中的所有内容都应该根据需要设置，因为你只使用Raph方法。

首先在这种情况下，你不需要dx / dy，因为你实际上并不需要使用差异，你可以从x，y中找出它，并将其作为3,4传递给onmove函数参数。

Raph还有一个角度方法来计算。所以我们可以添加一小段代码，并删除dx，dy的东西..

所以你需要的只是......

angle = Raphael.angle( x, y, PANEL_MID, PANEL_MID)
this.transform('r'+(angle+90)+','+PANEL_MID+','+PANEL_MID)

jsfiddle（拖动手）

然后你也可以摆脱onstart / onend方法，因为它们也不需要。

Raphaël转换拖动回调坐标相对于画布

2 个答案: