ng-canvas-paint
Version:
Esta libreria fue generada con [Angular CLI](https://github.com/angular/angular-cli) version 8.2.9.
295 lines (289 loc) • 11.7 kB
JavaScript
import { EventEmitter, Component, Input, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
class NgCanvasPaintComponent {
constructor() {
this.value = undefined;
this.onValue = new EventEmitter();
this.containerClass = '';
this.headerClass = 'options-container';
this.painterContainerClass = 'ng-canvas-container';
this.confirmBtnClass = 'confirm-button';
this.cleanBtnClass = 'clean-button';
this.title = "Firmar en el recuadro";
this.color = "black";
this.backgroundColor = "white";
this.iconAcceptButton = "icon-check"; //"fas fa-check";
this.iconCleanButton = "icon-clean"; //"fas fa-redo-alt";
this.onAccept = new EventEmitter();
this.onRefresh = new EventEmitter();
this.positionButtons = "bottom" || "top";
}
ngOnInit() {
}
ngAfterViewInit() {
setColor(this.color, this.backgroundColor);
let time = setTimeout((_) => init(), 100);
}
refreshCanvas() {
if (this.value)
this.value = undefined;
setTimeout(() => {
canvasClear();
init();
this.onRefresh.emit();
}, 500);
}
guardarCanvas() {
this.value = canvasToImg();
this.onAccept.emit(this.value);
}
}
NgCanvasPaintComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-canvas-paint',
template: `
<div id="container" class="main-container" [ngClass]="containerClass" >
<div [ngClass]="headerClass">
<p><strong>{{title}}</strong></p>
<div class="buttons-container" *ngIf="positionButtons === 'top'">
<button type="button" [ngClass]="cleanBtnClass" (click)="refreshCanvas()"><i [ngClass]="iconCleanButton"></i></button>
<button type="button" [ngClass]="confirmBtnClass" (click)="guardarCanvas()"><i [ngClass]="iconAcceptButton"></i></button>
</div>
</div>
<div id="container-painter" [ngClass]="painterContainerClass">
<canvas id="canvasPainterView" class="canvas-painter" *ngIf="!value">
<p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the
inconvenience. Please use one of the supported browsers listed below, or draw the image you want using an
offline tool.</p>
<p>Supported browsers: <a href="http://www.opera.com/">Opera</a>, <a href="http://www.mozilla.com/">Firefox</a>,
<a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org/">Konqueror</a>.</p>
</canvas>
<img class="image-painter" [src]="value" *ngIf="value" />
</div>
<div class="buttons-container" *ngIf="positionButtons === 'bottom'">
<button type="button" [ngClass]="cleanBtnClass" (click)="refreshCanvas()" title="Limpiar recuadro"><i [ngClass]="iconCleanButton"></i></button>
<button type="button" [ngClass]="confirmBtnClass" (click)="guardarCanvas()" title="Confirmar firma"><i [ngClass]="iconAcceptButton"></i></button>
</div>
</div>
`,
styles: ["@charset \"UTF-8\";.main-container{display:flex;flex-direction:column}.ng-canvas-container{background:#ebf0f2;min-height:240px;width:100%;border:2px dashed #c2d1d9;border-radius:8px;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:0;width:inherit;height:inherit;padding:0!important}.canvas-painter,.image-painter{width:inherit;height:inherit;display:block}.options-container{justify-content:space-between}.buttons-container,.options-container{width:inherit;display:flex;align-items:center}.buttons-container{justify-content:flex-end}.card-body{padding:0!important}.center{display:flex;flex-direction:row;align-items:center;justify-content:center}.confirm-button{color:#00695e}.clean-button,.confirm-button{background-color:initial;border:none;font-size:24px}.clean-button{color:#012c5b}.icon-clean:before{content:\"\u274C\"}.icon-check:before{content:\"\u2714\uFE0F\"}"]
},] }
];
/** @nocollapse */
NgCanvasPaintComponent.ctorParameters = () => [];
NgCanvasPaintComponent.propDecorators = {
value: [{ type: Input, args: ['value',] }],
onValue: [{ type: Output, args: ['value',] }],
containerClass: [{ type: Input, args: ['containerClass',] }],
headerClass: [{ type: Input, args: ['headerClass',] }],
painterContainerClass: [{ type: Input, args: ['painterContainerClass',] }],
confirmBtnClass: [{ type: Input, args: ['confirmBtnClass',] }],
cleanBtnClass: [{ type: Input, args: ['cleanBtnClass',] }],
title: [{ type: Input, args: ['title',] }],
color: [{ type: Input, args: ['color',] }],
backgroundColor: [{ type: Input, args: ['backgroundColor',] }],
iconAcceptButton: [{ type: Input, args: ['iconAcceptButton',] }],
iconCleanButton: [{ type: Input, args: ['iconCleanButton',] }],
onAccept: [{ type: Output, args: ['onAccept',] }],
onRefresh: [{ type: Output, args: ['onRefresh',] }],
positionButtons: [{ type: Input, args: ['positionButtons',] }]
};
var containerCanvas, canvas, context, tool, color, background, autoSave;
function setColor(lineColor, backgroundColor) {
color = lineColor;
background = backgroundColor;
}
function init(saveAuto = true) {
autoSave = saveAuto;
// Find the canvas element.
canvas = document.getElementById('canvasPainterView');
containerCanvas = document.getElementById("container-painter");
canvas.width = containerCanvas.offsetWidth;
canvas.height = containerCanvas.offsetHeight;
if (!canvas) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvas.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Error: failed to getContext!');
return;
}
context.fillStyle = background;
context.strokeStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
if (touchAvailable) {
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, { passive: false });
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchmove', function (e) {
// stop touch event
e.stopPropagation();
e.preventDefault();
// translate to mouse event
var clkEvt = document.createEvent('MouseEvent');
clkEvt.initMouseEvent('mousemove', true, true, window, e.detail, e.touches[0].screenX, e.touches[0].screenY, e.touches[0].clientX, e.touches[0].clientY, false, false, false, false, 0, null);
canvas.dispatchEvent(clkEvt);
// or just handle touch event
ev_canvas(e);
}, false);
//canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', ev_canvas, false);
}
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil() {
tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
if (autoSave) {
canvasToImg();
}
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
else if (ev.pageX || ev.pageX == 0) {
ev._x = ev.pageX;
ev._y = ev.pageY;
}
// Call the event handler of the tool.
var type = null;
switch (ev.type) {
case "touchstart":
type = "mousedown";
break;
case "touchmove":
type = "mousemove";
break;
case "touchend":
type = "mouseup";
break;
default:
type = ev.type;
break;
}
;
var func = tool[type];
if (func) {
func(ev);
}
}
function canvasClear() {
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
function canvasToImg() {
//var canvas = document.getElementById("canvasPainterView");
var ctx = canvas.getContext("2d");
//draw a red box
ctx.fillStyle = background;
ctx.strokeStyle = color;
ctx.fillRect(10, 10, 30, 30);
return canvas.toDataURL();
}
const ɵ0 = function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
}, ɵ1 = function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
}, ɵ2 = function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
};
var drawer = {
isDrawing: false,
touchstart: ɵ0,
touchmove: ɵ1,
touchend: ɵ2
};
function draw(event) {
var type = null;
var coors;
if (event.type === "touchend") {
coors = {
x: event.changedTouches[0].pageX,
y: event.changedTouches[0].pageY
};
}
else {
// get the touch coordinates
coors = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
type = type || event.type;
// pass the coordinates to the appropriate handler
drawer[type](coors);
}
class NgCanvasPaintModule {
}
NgCanvasPaintModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgCanvasPaintComponent],
imports: [
CommonModule
],
exports: [NgCanvasPaintComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
},] }
];
/*
* Public API Surface of ng-canvas-paint
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgCanvasPaintComponent, NgCanvasPaintModule, ɵ0, ɵ1, ɵ2 };
//# sourceMappingURL=ng-canvas-paint.js.map