獲取畫布X和Y座標並顯示在屏幕上

我目前正在學習畫布觸摸事件功能，我可以在畫布上畫線，現在我想繪製任何線條時獲得x和y座標，顯示在screen.please幫助和教我如何得到x和y值，謝謝你！獲取畫布X和Y座標並顯示在屏幕上

這裏是編碼

<!DOCTYPE html> 
<html><head> 
<style> 
#contain { 
width: 500px; 
height: 120px; 
top : 15px; 
margin: 0 auto; 
position: relative;  
} 
</style> 
<script> 
     var canvas; 
     var ctx; 
     var lastPt=null; 
     var letsdraw = false; 
     var offX = 10, offY = 20; 


    function init() { 
     var touchzone = document.getElementById("layer1"); 
     touchzone.addEventListener("touchmove", draw, false); 
     touchzone.addEventListener("touchend", end, false); 
     ctx = touchzone.getContext("2d"); 
     } 

     function draw(e) { 
     e.preventDefault(); 
     if (lastPt != null) { 
     ctx.beginPath(); 
     ctx.moveTo(lastPt.x, lastPt.y); 
     ctx.lineTo(e.touches[0].pageX - offX, 
       e.touches[0].pageY - offY); 
     ctx.stroke(); 
    } 
    lastPt = { 
     x: e.touches[0].pageX - offX, 
     y: e.touches[0].pageY - offY 
    }; 
} 

    function end(e) { 
    var touchzone = document.getElementById("layer1"); 
    e.preventDefault(); 
    // Terminate touch path 
    lastPt = null; 
    } 

    function clear_canvas_width() 
     { 
      var s = document.getElementById ("layer1"); 
      var w = s.width; 
      s.width = 10; 
      s.width = w; 
     } 
    </script>  
</head> 

<body onload="init()"> 

<div id="contain"> 
<canvas id="layer1" width="450" height="440" 
    style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas> 
</div> 

    </body> 
</html>

來源

2013-10-26 user2913749

你想要什麼x和y？ – DrC

例如：用戶在畫布中心畫一個S形，我如何找到S形的x和y座標。非常感謝！ – user2913749

還沒完全有信心，我明白你的問題。

在您發佈的代碼中，您已經使用e.touches [0] .pageX/Y獲取座標。主要的問題是pageX/Y值是相對於頁面原點的。然後在代碼中減去固定的offX/Y，嘗試將它們轉換爲畫布相對座標。正確的想法，錯誤的價值。您需要減去canvas元素的位置，可以通過在使用offsetParent引用向上遍歷樹時對offsetX/Y值求和來獲取該位置。

喜歡的東西：

offX=0;offY=0; 
node = document.getElementById ("layer1"); 
do { 
    offX += node.offsetX; 
    offY += node.offsetY; 
    node = node.offsetParent; 
} while(node);

應該給你offX和offY更好的價值。

如果您只是想在最後找到實際的圖形，最簡單的方法就是在用戶繪製時跟蹤邊界框。

來源

2013-10-26 16:10:28 DrC

對不起，當我可以將你的代碼粘貼到我的程序中時，它不起作用。你能解釋一下我怎樣編輯代碼，因爲我在我的筆記本電腦上使用了chrome，我想修正div上的畫布繪圖，因此我改變了offx和offy的值以使畫布鼠標指針同步。謝謝。 – user2913749

是的。我想找到實際的用戶繪圖，我可以知道如何跟蹤邊界框 – user2913749

只需跟蹤用戶繪製的最小和最大x和y值。 – DrC

獲取畫布X和Y座標並顯示在屏幕上

回答

相關問題