Есть ли уже директива рисовать/рисовать вещи на холсте? Таким образом, вы можете реализовать что-то вроде Paint или даже нечто большее, например Photoshop и т.д., Но достаточно простого примера.
Я не нашел его в своем поиске, и если уже есть тот, который считается лучшей практикой, я бы хотел его использовать. Иначе я должен сам реализовать его.
Хорошо, я сделал это, и на самом деле это довольно просто:
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
Angular идеально подходит для написания приложений в декларативном стиле. Как только вы нажмете элемент canvas, вы не сможете идти дальше с декларативным, и вам нужно переключиться на императивный способ написания механизма. Если большая часть вашего приложения предоставляет пользовательский интерфейс, который вы определяете в html в остальной части вашего приложения, я настоятельно рекомендую вам использовать AngularJS. Это потрясающая основа для этого.
С другой стороны, если большая часть вашего кода будет находиться внутри элемента canvas, то, возможно, AngularJS не является идеальным инструментом для вас. Если вы действительно настаиваете на использовании AngularJS для большинства своих приложений, я бы предложил вам использовать что-то вроде D3, что является отличной альтернативой и использует SVG за кулисами (что носит декларативный характер и, следовательно, отличный сторонник AngularJS).
Некоторое время назад я построил для этого настраиваемую директиву.
https://github.com/pwambach/angular-canvas-painter
Директива создает элемент canvas и добавляет обработчики для событий mousedown/mousemove/mouseup (и соответствующих событий касания) к элементу. Mousedown и следующие события mousemove рисуют кривые Безье с
canvasContext.quadraticCurveTo() для более гладких штрихов (вместо того, чтобы просто рисовать круги для каждой точки). Подробнее об алгоритме рисования смотрите в этой статье: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/
Это действительно хорошая реализация! Я мог бы добавить этот метод, если вы хотите преобразовать холст в изображение
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
Это сделает вам тег изображения с исходным кодом как элемент base64.
Надеюсь, это поможет вам