Gibt es bereits eine Canvas-Zeichnungsanweisung für AngularJS?

Question

Gibt es bereits eine Anweisung zum Zeichnen/Malen von Dingen auf einer Leinwand? Sie können also etwas wie Paint oder sogar etwas größeres wie Photoshop usw. implementieren, aber ein sehr einfaches Beispiel würde ausreichen.

Ich habe keins in meiner Suche gefunden, und wenn es bereits eins gibt, das als Best Practice gilt, würde ich es gerne verwenden. Ansonsten muss ich selbst eines implementieren.

Answer 1

Ok ich tat, und es ist eigentlich recht einfach:

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

Und dann kann man es auf Leinwand wie folgt verwenden:

<canvas drawing></canvas> 

Hier ist eine Demo auf Plunkr: http://plnkr.co/aG4paH

Answer 2

Angular eignet sich ideal zum Schreiben von Anwendungen im deklarativen Stil. Sobald Sie das Canvas-Element gedrückt haben, können Sie nicht weiter mit deklarativen Schritten gehen und Sie müssen zu einem imperativen Schreibmechanismus wechseln. Wenn der Großteil Ihrer Anwendung eine Benutzeroberfläche bereitstellt, die Sie im Rest Ihrer Anwendung in HTML definieren, würde ich Ihnen sehr empfehlen, AngularJS zu verwenden. Es ist ein erstaunlicher Rahmen dafür.

Auf der anderen Seite, wenn der Großteil Ihres Codes innerhalb des Canvas-Elements sein wird, dann ist AngularJS vielleicht nicht das ideale Werkzeug für Sie. Wenn Sie wirklich darauf bestehen, AngularJS für den Großteil Ihrer Anwendung zu verwenden, würde ich Ihnen empfehlen, etwas wie D3 zu verwenden, das eine ausgezeichnete Alternative ist und SVG hinter den Kulissen verwendet (was deklarativ ist und daher ein toller Kumpel für AngularJS ist).

Answer 3

Vor einiger Zeit habe ich eine konfigurierbare Direktive dafür gebaut.

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

Die Richtlinie schafft das Canvas-Element und fügt Handler für mousedown-/mousemove-/mouseup Ereignisse (und die entsprechenden Berührungsereignisse) an das Element. Mauszeiger und nachfolgende Mauszeiger-Ereignisse zeichnen Bezier-Kurven mit der canvasContext.quadraticCurveTo() Methode für glattere Striche (statt nur Kreise für jeden Punkt zu malen). Details zum Zeichnungsalgorithmus finden Sie in diesem Artikel: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

Answer 4

Das ist eine wirklich nette Umsetzung! Ich konnte die Methode hinzufügen, wenn Sie die Leinwand auf ein Bild konvertieren möchten

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

Dies wird Ihnen ein Image-Tag mit der Quelle als base64 Element machen.

Hoffe, dass es Sie