获取画布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坐标并显示在屏幕上

回答

相关问题