Fatal编程技术网
  • javascript/
  • Javascript 拉法ë；l转换相对于画布的拖动回调坐标

Javascript 拉法ë；l转换相对于画布的拖动回调坐标

javascript html

Javascript 拉法ë；l转换相对于画布的拖动回调坐标,javascript,html,raphael,Javascript,Html,Raphael,我正在尝试创建一个带有360度指示器的圆形仪表，可以使用Raphaël用鼠标移动 我想知道怎样才能得到主面板的绝对坐标。我的示例计算出与所创建画布相关的所有内容。但是，在Element.drag上设置的回调给了我相对于浏览器窗口而不是画布的坐标 我需要计算出画布的位置，这样我才能计算出指示器的新角度。有人能解释一下这是怎么做到的吗 <!DOCTYPE html> <html lang="en"> <head> <meta char

我正在尝试创建一个带有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>




使用Raphaël的示例
window.onload=函数（）{
var配电盘尺寸=600，
r=拉斐尔（“支架”、面板尺寸、面板尺寸），
面板尺寸=面板尺寸/2，
半径=200；
var out=r.set（）；
向外推（右圆（面板中间，面板中间，半径）.attr（{笔划：“无”，填充：#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=函数（dx，dy）{
this.ox=dx；
this.oy=dy；
log（“onStart”，dx，”，dy）；}，
onMove=函数（dx，dy）{
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}）。拖动（onMove，onStart，oned）；
指针总数=360；
pointer.value=0；
（功能（）{
动画（{transform:“r0，”+PANEL_MID.toString（）+”，“+PANEL_MID.toString（）}，PANEL_MID，“弹性”）；
})();
};

您可以尝试使用
jQuery的offset（）
方法


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



我不明白为什么需要这样做，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)


（拖手）


然后，您还可以去掉onstart/onend方法，因为它们也不需要。
太棒了！！非常感谢！