Html 是否已经有针对 AngularJS 的画布绘图指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16587961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there already a canvas drawing directive for AngularJS out there?
提问by JustGoscha
Is there already a directive to draw/paint things on a canvas? So you can implement something like Paint or even something bigger like Photoshop etc., but a very basic example would suffice.
是否已经有在画布上绘制/绘制东西的指令？所以你可以实现像 Paint 这样的东西，甚至像 Photoshop 等更大的东西，但是一个非常基本的例子就足够了。
I haven't found one in my search and if there's already one that is considered best practice I would like to use it. Else I have to implement one myself.
我还没有在我的搜索中找到一个，如果已经有一个被认为是最佳实践的，我想使用它。否则我必须自己实现一个。
回答by JustGoscha
Ok I did one and it is actually pretty easy:
好的，我做了一个，实际上很简单：
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();
}
}
};
});
And then you can use it on canvas like this:
然后你可以像这样在画布上使用它：
<canvas drawing></canvas>
Here's a demoon Plunkr: http://plnkr.co/aG4paH
这是Plunkr的演示：http://plnkr.co/aG4paH
回答by ganaraj
Angular is ideally suited for writing applications in declarative style. Once you hit the canvas element you cannot go any further with declarative and you have to switch towards an imperative way of writing mechanism. If the majority of your application is providing UI, which you define in html in the rest of your application I would highly encourage you to use AngularJS. Its an amazing framework for that.
Angular 非常适合以声明式风格编写应用程序。一旦你点击了 canvas 元素，你就不能再使用声明式的了，你必须切换到一种命令式的编写机制。如果您的大部分应用程序都提供 UI，而您在应用程序的其余部分用 html 定义，我强烈建议您使用 AngularJS。它是一个惊人的框架。
On the other hand if the majority of your code is going to be inside the canvas element, then perhaps AngularJS is not the ideal tool for you. If you really insist on using AngularJS for the majority of your application I would suggest you to consider using something like D3 which is an excellent alternative and uses SVG behind the scenes ( which is declarative in nature and hence a great sidekick for AngularJS ).
另一方面，如果您的大部分代码都在 canvas 元素中，那么 AngularJS 可能不是您的理想工具。如果你真的坚持在你的大部分应用程序中使用 AngularJS，我建议你考虑使用像 D3 这样的东西，它是一个很好的替代品，并在幕后使用 SVG（它本质上是声明性的，因此是 AngularJS 的一个很好的搭档）。
回答by pwambach
Some time ago i built a configurable directive for that.
前段时间我为此构建了一个可配置的指令。
https://github.com/pwambach/angular-canvas-painter
https://github.com/pwambach/angular-canvas-painter
The directive creates the canvas element and adds handlers for mousedown/mousemove/mouseup events (and corresponding touch events) to the element. Mousedown and following mousemove events draw bezier curves with the
canvasContext.quadraticCurveTo()method for smoother strokes (instead of just painting circles for every point). For details on the drawing algorithm have a look at this article: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/
该指令创建 canvas 元素并将 mousedown/mousemove/mouseup 事件（和相应的触摸事件）的处理程序添加到该元素。Mousedown 和跟随 mousemove 事件使用canvasContext.quadraticCurveTo()更平滑笔触的方法绘制贝塞尔曲线
（而不是只为每个点绘制圆圈）。有关绘图算法的详细信息，请查看本文：http: //codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/
回答by Pablo Ascencao
That's a really nice implementation! I could add the method if you want to convert the canvas on an image
这是一个非常好的实现！如果您想在图像上转换画布，我可以添加该方法
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
This will make you a image tag with the source as base64 element.
这将使您成为一个图像标记，源为 base64 元素。
Hope it helps you
希望对你有帮助
