paintpad

Pintura

Componente de lona que permite la pintura de forma libre.

manifestación

Instalación

Hilo

yarn add paintpad

Npm

npm install --save paintpad

Imprudente

 <script src = "https://unpkg.com/paintpad/dist/index.js" Derfer> </script>

Uso

Html

 <
  width = "300px" Height = "300px" LineWidth = "15" LineWidthmin = "5" LineWidthMax = "25" Color = "#ffdab9" Hasslider = "True" HasColorPicker = "True" isClearable = "True" isdoward = "true =" true " "IsStateChangable =" True "> </pint-pad>

Javascript

 import {pintarPad} de "pintarPad"; const pintPad = new PaintPad ({
  Ancho: "300px",
  Altura: "300px",
  Linewidth: 15,
  linewidthmin: 5,
  linewidthmax: 25,
  Color: "#ffdab9",
  Hasslider: verdadero,
  Hascolorpicker: verdadero,
  ISCLEARABLE: VERDADERO,
  isDownloadable: verdadero,
  isstateChangable: true,}); document.getElementById ("pintura-pat-contener"). append (pintarPad);

Angular

 // app.module.tsimport {custom_elements_schema} de '@angular/core';@ngmodule ({
  ... Esquemas: [Custom_elements_schema]
  ...})

 // App.component.html <Paint-Pad #PaintPad Width = "300px" Color = " #FFDAB9"> </pinte-pad>

 // app.component.tsimport "Paintpad"; Export Clase AppComponent {
  @ViewChild ('Paintpad') Portalpad público!: Elementref;

  public Clear (): void {this.PaintPad.nativeElement.Clear ();
  }}

Reaccionar

 importar "pintarPad"; function app () {
  const pintPad = useref (nulo);

  const clear = () => pintarPad.Current.Clear ();

  return <pintar-pad ref = {pintarPad} width = "300px" color = "#ffdab9"> </pinte-pad>;}

Opción

atributo	tipo	descripción	por defecto
width	string	ancho del lienzo	'500px'
height	string	altura del lienzo	'500px'
lineWidth	number	grosor inicial del lápiz	10
lineWidthMin	number	grosor mínimo del lápiz	1
lineWidthMax	number	Espesor máximo del lápiz	30
color	string	Color inicial del lápiz (debe ser un hexcodo de 6 caracteres)	'#000000'
imageName	string	Nombre de la imagen descargada	'paintpad'
hasSlider	boolean	Si el usuario puede cambiar el grosor del lápiz	true
hasColorPicker	boolean	Si el usuario puede cambiar el color del lápiz	true
isClearable	boolean	Si el usuario puede borrar el lienzo	true
isDownloadable	boolean	Si el usuario puede descargar una imagen del lienzo	true
isStateChangeable	boolean	Si el usuario puede deshacer y rehacer el estado al lienzo	true

Métodos

método	parámetros	descripción
setWidth	width: string	establece el ancho del lienzo
setHeight	height: string	establece la altura del lienzo
setLineWidth	lineWidth: number	establece el grosor del lápiz
setLineWidthMin	lineWidth: number	establece el grosor mínimo del lápiz
setLineWidthMax	lineWidth: number	establece el grosor máximo del lápiz
setColor	color: string	establece el color del lápiz
setImageName	name: string	Establece el nombre de la imagen descargada
setSlider	isVisible: boolean	Si el usuario puede cambiar el grosor del lápiz
setColorPicker	isVisible: boolean	Si el usuario puede cambiar el color del lápiz
setClearable	isVisible: boolean	Si el usuario puede borrar el lienzo
setDownloadable	isVisible: boolean	Si el usuario puede descargar una imagen del lienzo
setStateChangeable	isVisible: boolean	Si el usuario puede deshacer y rehacer el estado al lienzo
clear		borra el lienzo
download		descarga una imagen del lienzo
undo		Cambia el estado del lienzo al estado anterior
redo		Cambia el estado del lienzo al siguiente estado
getDataURL		Devuelve la URL de datos del lienzo
getBlob	callback: BlobCallback type?: string | undefined quality?: number	Obtiene el blob del lienzo en una función de devolución de llamada