webentwicklung-frage-antwort-db.com.de

Gibt es bereits eine Zeichenrichtlinie für AngularJS?

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

Ich habe in meiner Suche keine gefunden, und wenn es bereits eine bewährte Methode gibt, würde ich sie gerne verwenden. Ansonsten muss ich selbst eins implementieren.

50
JustGoscha

Ok ich habe einen gemacht und es ist eigentlich ziemlich 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 kannst du es auf Leinwand wie folgt verwenden:

<canvas drawing></canvas>

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

83
JustGoscha

Angular eignet sich ideal zum Schreiben von Anwendungen im deklarativen Stil. Sobald Sie das Zeichenelement treffen, können Sie mit deklarativen Elementen nicht weiter fortfahren und müssen zu einem zwingenden Schreibmechanismus wechseln. Wenn der Großteil Ihrer Anwendung eine Benutzeroberfläche bereitstellt, die Sie in html im Rest Ihrer Anwendung definieren, würde ich Ihnen dringend empfehlen, AngularJS zu verwenden. Es ist ein erstaunlicher Rahmen dafür. 

Wenn sich der größte Teil Ihres Codes dagegen im Canvas-Element befindet, ist AngularJS möglicherweise 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 empfehlen, etwas wie D3 in Betracht zu ziehen, das eine ausgezeichnete Alternative darstellt und SVG im Hintergrund verwendet (was deklarativ ist und daher ein großartiger Kumpel für AngularJS ist).

12
ganaraj

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

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

Die Direktive erstellt das Canvas-Element und fügt dem Element Handler für Mousedown/Mousemove/Mouseup-Ereignisse (und entsprechende Berührungsereignisse) hinzu. Mousedown und folgende Mausbewegungsereignisse zeichnen Bezier-Kurven mit der canvasContext.quadraticCurveTo()-Methode für weichere Striche (anstatt nur Kreise für jeden Punkt zu zeichnen). Weitere Informationen zum Zeichnungsalgorithmus finden Sie in diesem Artikel: http://codetheory.in/html5-canvas-drawingline-with-smooth-edges/

5
pwambach

Das ist eine wirklich schöne Umsetzung! Ich könnte die Methode hinzufügen, wenn Sie die Leinwand auf einem Bild konvertieren möchten

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

Dadurch wird ein Image-Tag mit der Quelle als base64-Element erstellt.

Ich hoffe es hilft dir

1
Pablo Ascencao