是否已经有一个指令在画布上绘制/绘制东西？所以你可以实现像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