那里已经有一个AngularJS的canvas绘图指令了吗？

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

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

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上使用它：

 <canvas drawing></canvas> 

以下是关于Plunkr的演示 ： http ://plnkr.co/aG4paH

Answer 2

Angular非常适合以声明风格编写应用程序。 一旦你击中了canvas元素，你就不能再进一步声明，你必须转向写作机制的必要方式。 如果你的应用程序的大部分都提供UI，你在应用程序的其他部分中定义的HTML，我会强烈build议你使用AngularJS。 它是一个惊人的框架。

另一方面，如果大部分代码将在canvas元素中，那么AngularJS可能不是您理想的工具。 如果你真的坚持使用AngularJS来处理你的大部分应用程序，我build议你考虑使用类似D3的东西，这是一个很好的select，并在后台使用SVG（这是本质上的声明，因此也是AngularJS的一个很好的搭档）。

Answer 3

前段时间我为此构build了一个可configuration的指令。

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

该指令创buildcanvas元素，并为该元素添加mousedown / mousemove / mouseup事件（以及相应的触摸事件）的处理程序。 Mousedown和下面的mousemove事件使用canvasContext.quadraticCurveTo()方法绘制更平滑的笔划的bezier曲线（而不是仅为每个点绘制圆）。 有关绘图algorithm的细节请看这篇文章： http : //codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

Answer 4

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

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

这将使你成为一个图像标签与来源为base64元素。

希望它可以帮助你