paintpad

Paintpad

Componente de tela que permite a pintura de forma livre.

demonstração

Instalação

Fio

yarn add paintpad

Npm

npm install --save paintpad

Unpkg

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

Uso

Html

 <pintura-pad
  width = "300px" altura = "300px" linewidth = "15" linewidthmin = "5" linewidthmax = "25" color = "#ffdab9" hasslider = "true" hascolorpicker = "true" isclearable = " "isStateChangeable =" true "> </int-Pad>

JavaScript

 importar {PaintPad} de "Paintpad"; const Paintpad = new Paintpad ({
  Largura: "300px",
  Altura: "300px",
  Linha de linha: 15,
  Linha de Linha: 5,
  LineWidthmax: 25,
  Cor: "#ffdab9",
  Hasslider: Verdadeiro,
  Hascolorpicker: verdadeiro,
  isclearable: verdadeiro,
  Isdownloadable: verdadeiro,
  isStateChangeable: true,}); document.getElementById ("pintura-pad-container"). Append (PaintPad);

Angular

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

 // app.component.html <pint-pad #paintpad width = "300px" color = " #ffdab9"> </inty-pad>

 // app.component.tsimport "Paintpad"; Export Class AppComponent {
  @ViewChild ('PaintPad') Paintpad public!: ElementRef;

  public clear (): void {this.paintpad.nativeElement.clear ();
  }}

Reagir

 importar "PaintPad"; Function App () {
  const Paintpad = useref (nulo);

  const clear = () => Paintpad.current.clear ();

  Retornar <pintura-pad ref = {PaintPad} width = "300px" color = "#ffdab9"> </int-Pad>;}

Opções

atributo	tipo	descrição	padrão
width	string	largura da tela	'500px'
height	string	altura da tela	'500px'
lineWidth	number	espessura inicial do lápis	10
lineWidthMin	number	espessura mínima do lápis	1
lineWidthMax	number	espessura máxima do lápis	30
color	string	Cor inicial do lápis (deve ser um código hexadequivo de 6 caracteres)	'#000000'
imageName	string	Nome da imagem baixada	'paintpad'
hasSlider	boolean	Se o usuário puder alterar a espessura do lápis	true
hasColorPicker	boolean	Se o usuário puder alterar a cor do lápis	true
isClearable	boolean	Se o usuário puder limpar a tela	true
isDownloadable	boolean	Se o usuário puder baixar uma imagem da tela	true
isStateChangeable	boolean	Se o usuário puder desfazer e refazer o estado à tela	true

Métodos

método	parâmetros	descrição
setWidth	width: string	define a largura da tela
setHeight	height: string	define a altura da tela
setLineWidth	lineWidth: number	define a espessura do lápis
setLineWidthMin	lineWidth: number	define a espessura mínima do lápis
setLineWidthMax	lineWidth: number	define a espessura máxima do lápis
setColor	color: string	Define a cor do lápis
setImageName	name: string	Define o nome da imagem baixada
setSlider	isVisible: boolean	Se o usuário puder alterar a espessura do lápis
setColorPicker	isVisible: boolean	Se o usuário puder alterar a cor do lápis
setClearable	isVisible: boolean	Se o usuário puder limpar a tela
setDownloadable	isVisible: boolean	Se o usuário puder baixar uma imagem da tela
setStateChangeable	isVisible: boolean	Se o usuário puder desfazer e refazer o estado à tela
clear		Limpa a tela
download		Download uma imagem da tela
undo		muda o estado da tela para o estado anterior
redo		muda o estado da tela para o próximo estado
getDataURL		Retorna o URL de dados da tela
getBlob	callback: BlobCallback type?: string | undefined quality?: number	Obtém a bolha da tela em uma função de retorno de chamada