Angular에 대한 캔버스 그리기 지침이 이미 있습니까?밖에 JS?

Angular에 대한 캔버스 그리기 지침이 이미 있습니까?밖에 JS?

캔버스에 그림을 그리거나 그림을 그리라는 지시가 이미 있습니까?페인트나 Photoshop 같은 큰 것을 실장할 수 있습니다만, 기본적인 예라면 충분합니다.

검색에서 찾을 수 없습니다.만약 이미 베스트 프랙티스로 간주되는 것이 있다면 사용하고 싶습니다.그렇지 않으면 내가 직접 구현해야 합니다.

네, 한 번 해봤는데 사실 꽤 쉬워요.

app.directive("drawing", function(){
  return {
    restrict: "A",
    link: function(scope, element){
      var ctx = element[0].getContext('2d');

      // variable that decides if something should be drawn on mousemove
      var drawing = false;

      // the last coordinates before the current move
      var lastX;
      var lastY;

      element.bind('mousedown', function(event){
        if(event.offsetX!==undefined){
          lastX = event.offsetX;
          lastY = event.offsetY;
        } else { // Firefox compatibility
          lastX = event.layerX - event.currentTarget.offsetLeft;
          lastY = event.layerY - event.currentTarget.offsetTop;
        }

        // begins new line
        ctx.beginPath();

        drawing = true;
      });
      element.bind('mousemove', function(event){
        if(drawing){
          // get current mouse position
          if(event.offsetX!==undefined){
            currentX = event.offsetX;
            currentY = event.offsetY;
          } else {
            currentX = event.layerX - event.currentTarget.offsetLeft;
            currentY = event.layerY - event.currentTarget.offsetTop;
          }

          draw(lastX, lastY, currentX, currentY);

          // set current coordinates to last one
          lastX = currentX;
          lastY = currentY;
        }

      });
      element.bind('mouseup', function(event){
        // stop drawing
        drawing = false;
      });

      // canvas reset
      function reset(){
       element[0].width = element[0].width; 
      }

      function draw(lX, lY, cX, cY){
        // line from
        ctx.moveTo(lX,lY);
        // to
        ctx.lineTo(cX,cY);
        // color
        ctx.strokeStyle = "#4bf";
        // draw it
        ctx.stroke();
      }
    }
  };
});

그리고 캔버스에 다음과 같이 사용할 수 있습니다.

<canvas drawing></canvas>

여기 Plunkr 데모가 있습니다.http://plnkr.co/aG4paH

Angular는 선언적 스타일로 응용 프로그램을 작성하는 데 이상적입니다.일단 캔버스 요소를 누르면 선언형으로는 더 이상 진행할 수 없으며 필연적인 쓰기 메커니즘으로 전환해야 합니다.어플리케이션의 대부분이 UI를 제공하고 있는 경우, 어플리케이션의 나머지 부분에서 html로 정의되어 있다면, AngularJs를 사용하는 것을 강력히 권장합니다.이것은 그것을 위한 놀라운 프레임워크입니다.

한편, 코드의 대부분이 캔버스 요소 안에 있을 경우, 아마 Angular는JS는 고객에게 이상적인 도구가 아닙니다.정말 앵글을 쓰겠다고 하면대부분의 어플리케이션에서는 D3와 같은 것을 사용하는 것을 추천합니다.D3는 훌륭한 대안이며, SVG를 백그라운드에서 사용합니다(이것은 본질적으로 선언적인 것이므로 AngularJS의 훌륭한 조수입니다).

얼마 전에 설정 가능한 디렉티브를 작성했습니다.

https://github.com/pwambach/angular-canvas-painter

지시문은 캔버스 요소를 만들고 마우스 다운/마우스 이동/마우스 업 이벤트(및 대응하는 터치 이벤트)를 위한 핸들러를 요소에 추가합니다.마우스 다운 및 다음 마우스 이동 이벤트는 베지어 곡선을 그립니다.canvasContext.quadraticCurveTo()부드러운 스트로크를 위한 방법(모든 점에 대해 원을 그리는 방법)그리기 알고리즘에 대한 자세한 내용은 다음 문서를 참조하십시오.http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

정말 훌륭한 구현입니다!이미지에서 캔버스를 변환하고 싶다면 메서드를 추가할 수 있습니다.

    function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas.toDataURL("image/png");
       return image;
    }

그러면 소스가 base64 요소인 이미지 태그가 됩니다.

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/16587961/is-there-already-a-canvas-drawing-directive-for-angularjs-out-there