51

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

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

4

4 回答 4

84

好的，我做了一个，实际上很容易：

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

于 2013-05-18T11:35:40.273 回答
12

Angular 非常适合以声明式风格编写应用程序。一旦你点击了画布元素，你就不能再使用声明性了，你必须转向一种命令式的编写机制。如果您的应用程序的大部分都提供 UI，您在应用程序的其余部分中用 html 定义它，我强烈建议您使用 AngularJS。它是一个了不起的框架。

另一方面，如果你的大部分代码都在 canvas 元素中，那么 AngularJS 可能不是你的理想工具。如果你真的坚持在你的大部分应用程序中使用 AngularJS，我建议你考虑使用像 D3 这样的东西，这是一个很好的替代方案，并在幕后使用 SVG（它本质上是声明性的，因此是 AngularJS 的一个很好的搭档）。

于 2013-05-16T13:09:34.053 回答
5

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

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

该指令创建画布元素并将 mousedown/mousemove/mouseup 事件（和相应的触摸事件）的处理程序添加到元素。Mousedown 和之后的 mousemove 事件使用 canvasContext.quadraticCurveTo()更平滑笔划的方法绘制贝塞尔曲线（而不是只为每个点绘制圆圈）。有关绘图算法的详细信息，请查看这篇文章：http ://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

于 2015-04-06T07:19:28.680 回答
1

这是一个非常好的实现！如果您想在图像上转换画布，我可以添加该方法

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

这将使您成为一个图像标签，其源为 base64 元素。

希望对你有帮助

于 2016-11-18T16:33:18.030 回答