html5 - formularios - ¿Ya existe una directiva de dibujo de lienzo para AngularJS?

ng-app que es

Question

¿Ya hay una directiva para dibujar / pintar cosas en un lienzo? Entonces puedes implementar algo como Paint o incluso algo más grande como Photoshop, etc., pero un ejemplo muy básico sería suficiente.

No he encontrado uno en mi búsqueda y si ya hay uno que se considera la mejor práctica, me gustaría usarlo. De lo contrario, tengo que implementar uno yo mismo.

Answer 1

¡Es una implementación muy buena! Podría agregar el método si quiere convertir el lienzo en una imagen

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

Esto te convertirá en una etiqueta de imagen con la fuente como elemento base64.

Espero que te ayude

Answer 2

Angular es ideal para escribir aplicaciones en estilo declarativo. Una vez que tocas el elemento del lienzo, no puedes avanzar más con declarativo y tienes que cambiar hacia una forma imperativa de escribir el mecanismo. Si la mayoría de su aplicación proporciona UI, que define en html en el resto de su aplicación, le recomiendo encarecidamente que utilice AngularJS. Es un marco increíble para eso.

Por otro lado, si la mayoría de su código va a estar dentro del elemento canvas, entonces quizás AngularJS no sea la herramienta ideal para usted. Si realmente insistes en usar AngularJS para la mayoría de tu aplicación, te sugiero que consideres usar algo como D3, que es una excelente alternativa y utiliza SVG detrás de escena (que es de carácter declarativo y, por lo tanto, un gran compañero para AngularJS).

Answer 3

Hace algún tiempo construí una directiva configurable para eso.

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

La directiva crea el elemento lienzo y agrega controladores para eventos mousedown / mousemove / mouseup (y eventos táctiles correspondientes) al elemento. Mousedown y los siguientes eventos mousemove dibujan curvas de bezier con el método canvasContext.quadraticCurveTo() para trazos más suaves (en lugar de simplemente dibujar círculos para cada punto). Para detalles sobre el algoritmo de dibujo, eche un vistazo a este artículo: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

Answer 4

Ok, hice uno y en realidad es bastante fácil:

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();
      }
    }
  };
});

Y luego puedes usarlo en un lienzo como este:

<canvas drawing></canvas>

Aquí hay una demostración en Plunkr: http://plnkr.co/aG4paH