本文介绍了有没有已经是绘图画布指令来AngularJS在那里?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
时已经有一个指令来绘制/油漆的东西在画布上?所以,你可以实现像漆,甚至更大的东西,如Photoshop等,但一个非常简单的例子就足够了。
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.
我还没有找到一个在我的搜索,如果有已经一个被认为是最好的做法,我想使用它。否则我要实现一个自己。
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.
推荐答案
好吧我做了一个,它实际上是pretty容易:
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>
这里有一个Plunkr的演示:
这篇关于有没有已经是绘图画布指令来AngularJS在那里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!