HTML5 캔버스 방향 및 크기가 변경되는 선 그리기

첫째, 저는 HTML5에서 전문가가 아닙니다. 며칠 전에 HTML5로 몇 가지 작업을 시작했습니다.HTML5 캔버스 방향 및 크기가 변경되는 선 그리기

두 번째로, 내 영어로 유감 스럽지만, 나는 그다지 잘 못하고 실수도 할 수 있습니다. 나는 두 번의 마우스 클릭으로 선을 그릴 수

여기 내 문제의

는 ... 선은 첫 번째 클릭 지점에서 시작하고 두 번째 클릭 지점에서 끝납니다.

하지만 첫 번째 클릭 지점부터 시작하여 마우스의 위치에 따라 방향과 크기가 바뀌고 두 번째 클릭 지점에서 끝나는 선을 만들고 싶습니다. (안드로이드의 그래픽 암호 시스템과 같습니다.)

이게 가능합니까?

한 번만 두 번의 마우스 클릭으로 선을 그릴 수있는 코드를 찾았습니다. 약간 변경하고 직접 코드를 추가했습니다. 당신은 모든 몇 밀리 초 캔버스을 취소 (마우스를 이동할 때 마우스 좌표로 첫 번째 클릭에서 선을 그리고 선을 업데이트 할 애니메이션 루프의 일종 필요

<!DOCTYPE HTML> 
<html> 

    <head> 

    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 
      #myCanvas { 
      border: 1px solid #9C9898; 
     } 
    </style> 

    <script src="jquery.js"></script> 
    <script type="text/javascript"> 

     $(function(){ 

      var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 

      var point1 = new Array(); 
      point1['x'] = false; 
      point1['y'] = false; 
      var point2 = new Array(); 
      point2['x'] = false; 
      point2['y'] = false; 

      $(document).click(function(event){ 

       if (false === point1['x'] || false === point1['y']) { 

        var posX1 = event.pageX; 
        var posY1 = event.pageY; 

        point1['x'] = posX1; 
        point1['y'] = posY1; 

       } 

       else if (false === point2['x'] || false === point2['y']) { 

        var posX2 = event.pageX;    
        var posY2 = event.pageY; 

        point2['x'] = posX2; 
        point2['y'] = posY2; 
        console.log("second"); 

        context.moveTo(point1['x'], point1['y']); 
        context.lineTo(point2['x'], point2['y']); 
        context.stroke(); 

        point1['x'] = point2['x']; 
        point1['y'] = point2['y']; 
        point2['x'] = false; 
        point2['y'] = false; 

       } 

      }); 

     }); 

    </script> 

    </head> 

    <body> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 
    </body> 

</html>

출처

2012-06-12 mikrobik

어떻게 선은 방향을 변경 알 수 있습니까? 두 번째 점쪽으로 곡선을 의미합니까? – Loktar

더블 코멘트를 드려 죄송합니다. 안드로이드 잠금 화면 설명을 읽으십시오. 어쨌든 그 예가 담긴 비디오 또는 스크린 샷을 게시 할 수 있습니까? 사용자 정의 안드로이드 잠금 화면이 너무 많아서 어떤 것을 언급하고 있는지 확실하지 않습니다. – Loktar

죄송합니다. 그것에 대한 비디오를 찾을 수 없습니다. 나는 이것을 설명하려고 노력했다 : http://zapp5.staticworld.net/howto/graphics/184659-android29_180.jpg 사용자가 한 지점에서 시작하여 다른 지점으로 손을 움직이면이 두 지점 사이에 선이 생깁니다. . 사용자가 다른 지점으로 손을 움직이면 시작점은 동일하게 유지되고 줄의 방향이 바뀝니다. – mikrobik

: 여기 내 마지막 코드입니다 캔버스에서 마우스의 새 위치로 이동) 한 번 두 번째 클릭이 발생하면 캔버스에 선을 남겨두고 마지막으로 그린 후 애니메이션 루프를 중단합니다.

두 개의 캔버스를 서로 겹치게 배치 할 수도 있습니다 (움직이는 선을 그리기위한 것이고 실제로 이미지를 저장하는 선). 이렇게하면 첫 번째 선 그리기가 끝나고 두 번째 선을 시작하면 후속 지우기가 캔버스의 저장된 선에 영향을 미치지 않습니다.

희망이 도움이됩니다.

감사합니다, 게리

출처

2012-06-12 17:04:05 Gary

나는이 방법을 시도 할 것이다. 그들 중 한 명이 일하기를 바랍니다. 감사합니다. Gary. – mikrobik

HTML5 캔버스 방향 및 크기가 변경되는 선 그리기

답변

관련 문제