Il y a déjà un canevas de dessin directive pour AngularJS là-bas?

Question

Il y a déjà une directive pour dessiner/peindre des choses sur une toile? De sorte que vous pouvez mettre en place quelque chose comme de la Peinture ou même quelque chose de plus grand comme Photoshop, etc., mais un exemple très simple devrait suffire.

Je n'ai pas trouvé dans ma recherche et si il y a déjà un qui est considéré comme une bonne pratique, je voudrais l'utiliser. Autre chose que j'ai à mettre en œuvre un moi-même.

Answer 1

Ok j'ai fait un et il est en fait assez facile:

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

Et puis vous pouvez l'utiliser sur de la toile, comme ceci:

<canvas drawing></canvas>

Voici une démo sur Plunkr: http://plnkr.co/aG4paH

Answer 2

Angulaire est idéalement adapté pour l'écriture d'applications dans déclaratif de style. Lorsque vous cliquez sur l'élément canvas vous ne pouvez pas aller plus loin avec déclaratives et vous devez basculer vers un impératif pour l'écriture de mécanisme. Si la majorité de votre application est de fournir de l'INTERFACE utilisateur, ce qui vous permet de définir le code html dans le reste de votre demande je vous encourage fortement à utiliser AngularJS. C'est un étonnant cadre pour cela.

D'autre part, si la majorité de votre code va être à l'intérieur de l'élément canvas, alors peut-être AngularJS n'est pas l'outil idéal pour vous. Si vraiment vous insistez sur l'utilisation d'AngularJS pour la majorité de votre demande, je vous suggère d'envisager d'utiliser quelque chose comme D3, qui est une excellente alternative et utilise le SVG en coulisses ( qui est déclaratif dans la nature et donc une grande sidekick pour AngularJS ).