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

Question

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

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

的坐标

我需要弄清楚 canvas 在哪里，这样我才能弄清楚指标的新角度。谁能解释一下这是怎么做到的？

<!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 因为您实际上不需要使用差异，您可以从传递到 onmove 函数的 x,y 中找出它作为3,4个参数。

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 转换拖动回调坐标相对于 canvas

Raphaël convert drag callback coords relative to canvas

javascript

html

raphael