html5 – 是否已经有一个画布图指令AngularJS在那里？

是否已经有一个指令在画布上绘制/绘制东西？所以你可以实现像Paint或者像Photoshop等更大的东西，但一个非常基本的例子就足够了。

我没有在我的搜索中找到一个，如果已经有一个被认为最好的做法，我想使用它。否则我必须自己实现一个。

解决方法

Ok我做了一个，它实际上是很容易：

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