是否已经为AngularJS制作了画布绘图指令？

Question

是否已有指令在画布上绘制/绘制内容？所以你可以实现像Paint这样的东西甚至像Photoshop等更大的东西,但是一个非常基本的例子就足够了.

我没有在我的搜索中找到一个,如果已经有一个被认为是最佳实践,我想使用它.否则我必须自己实施一个.

Answer 1

好的,我做了一个,实际上非常简单:

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

Answer 2

Angular非常适合以声明式方式编写应用程序.一旦你点击了canvas元素,你就无法继续使用声明,你必须转向一种必要的写作机制.如果您的大部分应用程序都提供了UI,您在应用程序的其余部分中使用html定义,我强烈建议您使用AngularJS.它是一个惊人的框架.

另一方面,如果你的大部分代码都在canvas元素中,那么AngularJS可能不适合你.如果你真的坚持在大多数应用程序中使用AngularJS,我建议你考虑使用类似D3的东西,这是一个很好的选择,并在幕后使用SVG(这是声明性的,因此是AngularJS的一个很好的搭档).

Answer 3

前段时间我为此构建了一个可配置的指令.

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

该指令创建canvas元素,并为该元素添加mousedown/mousemove/mouseup事件(以及相应的触摸事件)的处理程序.Mousedown和以下mousemove事件使用canvasContext.quadraticCurveTo()更平滑的笔划方法绘制贝塞尔曲线 (而不是仅为每个点绘制圆圈).有关绘图算法的详细信息,请查看本文:http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/