有没有已经是指示绘制/油漆的东西在画布上？ 所以，你可以实现像漆，甚至更大的东西，如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:
角非常适合在声明样式编写应用程序。 一旦你打在画布元素，你不能用声明再往前走，你必须对写作机制势在必行的方式进行切换。 如果大多数应用程序是提供用户界面，您可以在HTML应用程序中的其余部分定义我会强烈建议您使用AngularJS。 它对于一个惊人的框架。
关于如果大多数你的代码将是canvas元素里面另一方面，也许AngularJS是不是你的理想工具。 如果你真的坚持使用AngularJS对于大多数应用程序的，我建议你考虑使用类似D3这是一个很好的替代，并在后台使用SVG（这是本质上的声明，因此对AngularJS一个伟大的搭档）。
Answer 3:
前段时间我为一个可配置的指令。
https://github.com/pwambach/angular-canvas-painter
的指令创建画布元件，并增加了处理程序的mousedown /鼠标移动/鼠标松开事件（和相应的触摸事件）的元素。 鼠标按下和鼠标移动之后得出的事件与贝塞尔曲线canvasContext.quadraticCurveTo()流畅的笔触（而不是针对每个点只是画界）方法。 有关绘制算法的细节来看看这篇文章： http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/
Answer 4:
这是一个非常好的执行！ 如果你想在画布转换的图像上，我可以添加方法
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
这会让你与源为Base64元素的形象标签。
希望它可以帮助你
文章来源: Is there already a canvas drawing directive for AngularJS out there?
