Context.Arc не рисование по заданным координатам

Я пытаюсь нарисовать круг, когда пользователь нажимает и перемещает мышь внутри холста. Если я использую случайные координаты на .arc() дро, но если я использую мышь координирует он не рисуетContext.Arc не рисование по заданным координатам

Если я пытаюсь это:

JS:

<script> 
     var clicked = false; 
     var x = 0; 
     var y = 0; 

     var ye = true; 

     function load(event) { 

      debugger; var x2 = event.pageX; 
     var y2 = event.pageY; 

     if (x2 > 10) { 

      var num; 
     } 

      document.getElementById("<% = values.ClientID%>").innerText = "X= " + x2 + " Y= " + y2; 

      if (clicked) { 

       //debugger; document.getElementById("<% = values.ClientID%>").innerText += " Moving!"; 
        debugger; var canvas = document.getElementById("<% = canvasSignature.ClientID%>"); 

        var ctx = canvas.getContext("2d"); 

        ctx.beginPath(); 
        ctx.arc(x, y, 3, 0, 2 * Math.PI); 
        ctx.stroke();     

        x = x + 1; 

        y = y + 1; 


      } 
    } 

    function down() { 

     debugger; clicked = true; 
    } 

    function up() { 
     debugger; 
     clicked = false;   
    } 
</script>

ASP:

<body onmouseup ="up()"> 
    <div > 
     <asp:Label ID ="lblSignature" runat ="server">Sign here</asp:Label> 
    </div> 
<canvas id ="canvasSignature" runat ="server" width="200" height="100" style="border:1px solid #000000;" onmousemove ="load(event);" onmousedown ="down();"></canvas> 

    <asp:Label ID ="values" runat ="server"></asp:Label> 
    </body>

Это работает, но если я заменю x и y на x2 и y2 ctx.arc(x2, y2, 3, 0, 2 * Math.PI);, не рисует. Я тоже не ошибаюсь.

Благодаря

источник

2015-06-05 José Corretjer-Gómez

Мне удалось выяснить это! Вместо рисования кругов я рисовал линии. На странице mousedown позвоните по телефону moveTo(clientX,clientY) и по телефону mouseMove. lineTo(clientX,clientY)moveTo(clientX,clientY) Таким образом, когда пользователь нажимает, у меня есть начальное положение для линии, когда он перемещается, назначает конечную позицию и обновляет начальную позицию.

JS:

<script> 
    var clicked = false; 

    var ctx = null; 

    var canvas = null; 

    function move(event) 
    { 
     document.getElementById("<% = values.ClientID%>").innerText = "X= " + currentX + " Y= " + currentY; 

     if (clicked) 
     {  
      ctx.lineTo(event.offsetX, event.offsetY); 

      ctx.moveTo(event.offsetX, event.offsetY); 

      ctx.stroke();    

      x = x + 1; 

      y = y + 1; 
     } 
    } 

    function down(event) 
    { 
     clicked = true; 

     var canvas = document.getElementById("<% = canvasSignature.ClientID%>"); 

     ctx = canvas.getContext("2d"); 

     ctx.beginPath(); 

     ctx.moveTo(event.offsetX, event.offsetY); 
    } 

    function up() 
    { 
     clicked = false; 

     ctx.closePath(); 
    } 

</script>

ASPX:

<div onmouseup="up();"> 

     <div> 
      <asp:Label ID="lblSignature" runat="server">Sign here</asp:Label> 
     </div> 

     <canvas id="canvasSignature" runat="server" width="300" height="300" style="border: 1px solid #000000;" onmousemove="move(event);" onmousedown="down(event);"></canvas> 

     <asp:Label ID="values" runat="server"></asp:Label> 

</div>

работает на Chrome и IE9.

источник

2015-06-08 18:27:11

положения мыши должно быть отрегулировано, как они здесь по отношению к странице, хотя, pageX и Пейджи не является частью официального стандарта и может не работать в некоторых браузерах.

[pageX/pageY] Эта функция является нестандартной и не соответствует стандартам . Не используйте его на производственных площадках, обращенных к Интернету: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями и поведение может измениться в будущем.

Source

Вы можете использовать следующий код для регулировки положения мыши. Он использует clientX/Y, который относится к клиенту. Затем используйте абсолютное положение щелкнутого элемента, здесь холст, чтобы найти разницу, так что положение мыши становится относительно холст вместо:

var ctx = canvas.getContext("2d");    // set this once in global/parent 

function load(event) { 

    var rect = this.getBoundingClientRect(), // get abs. region for clicked element 
     x = event.clientX - rect.left, 
     y = event.clientY - rect.top; 

    // plot arc 
    ctx.beginPath(); 
    ctx.arc(x, y, 3, 0, 2 * Math.PI); 
    ctx.stroke();     
}

Единственного недостаток заключается в том, что вы должны рассмотреть границы и отступы, если применить это к холсту. Обычно избегайте применения таких стилей к холсту, а скорее переносите их в div контейнера и вместо этого применяйте эти стили к div.

источник

2015-06-05 21:38:00 K3N

К сожалению, я забыл заменить pageX/Y на clientX/Y. Тот, который я тестирую, - с clientX/Y. –

@ JoséCorretjer-Gómez ah, ну тогда это просто вопрос настройки координат с использованием абсолютной области холста. – K3N

Я сейчас работаю над этим. Извините за поздний ответ: P –

Context.Arc не рисование по заданным координатам

ответ

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