Получить координаты холста X и Y и показать на экране

В настоящее время я изучаю функцию события касания холста, я могу нарисовать линию на холсте, теперь я хочу получить координаты x и y при рисовании любых строк и показать на экране. помочь и научить меня, как получить значения 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-форму в центре холста, как найти координаты x и y формы S. Большое спасибо! – user2913749

До сих пор не совсем уверен, что я понимаю ваш вопрос.

В коде, который вы отправили, вы уже получаете координаты, используя e.touches [0] .pageX/Y. Основная проблема заключается в том, что значения pageX/Y относятся к началу страницы. Затем вы вычитаете фиксированный offX/Y в свой код, чтобы попытаться преобразовать их в относительные координаты холста. Правильная идея, неправильные значения. Вам нужно вычесть позицию элемента холста, которую можно получить, суммируя значения offsetX/Y при прохождении дерева вверх, используя ссылку offsetParent.

Что-то вроде:

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

Извините, когда я могу вставить свой код внутри своей программы, он не работает. вы можете объяснить больше, как я могу отредактировать код, потому что я использую хром на своем ноутбуке, я хочу исправить рисунок холста в div, поэтому я изменяю значение offx и offy, чтобы сделать курсор мыши курсором синхронизированным. Спасибо. – user2913749

Да. Я хочу найти фактический чертеж пользователя, могу ли я узнать, как отслеживать ограничительную рамку. – user2913749

Просто отслеживайте минимальные и максимальные значения x и y по мере того, как пользователь рисует. – DrC

Получить координаты холста X и Y и показать на экране

ответ

Смежные вопросы