paintpad

Peinture

Composant de toile qui permet la peinture de forme libre.

démo

Installation

Fil

yarn add paintpad

NPM

npm install --save paintpad

Impermable

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

Usage

Html

 <peinture-pad
  width = "300px" height = "300px" linewidth = "15" linewidthmin = "5" linewidthmax = "25" color = "# ffdab9" hasslider = "true" hascolorpick "isStateChangeable =" true "> </ peinture-pad>

Javascrip

 Importer {PaintPad} à partir de "PaintPad"; const Paintpad = new PaintPad ({{
  Largeur: "300px",
  hauteur: "300px",
  Linewidth: 15,
  Linewidthmin: 5,
  LineWidthMax: 25,
  couleur: "# ffdab9",
  Hasslider: vrai,
  Hascolorpicker: vrai,
  isClearable: vrai,
  Isownloadable: true,
  isStateChangeable: true,}); document.getElementById ("peinture-pad-container"). APPEND (PaintPad);

Angulaire

 // app.module.tsimport {personnalisé_elements_schema} de '@ angular / core'; @ ngmodule ({{
  ... schémas: [Custom_Elements_schema]
  ...})

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

 // app ...T.STIMPORT "PaintPad"; classe d'exportation AppComponent {
  @ViewChild ('Paintpad') public Paintpad !: ElementRef;

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

Réagir

 Importer "PaintPad"; fonction Function () {
  const paintpad = useref (null);

  const Clear = () => pewppad.current.clear ();

  return <peinture-pad ref = {pewppad} width = "300px" color = "# ffdab9"> </paint-pad>;}

Options

attribut	taper	description	défaut
width	string	Largeur de la toile	'500px'
height	string	hauteur de la toile	'500px'
lineWidth	number	Épaisseur initiale du crayon	10
lineWidthMin	number	Épaisseur minimale du crayon	1
lineWidthMax	number	épaisseur maximale du crayon	30
color	string	Couleur initiale du crayon (doit être un hexcode de 6 caractères)	'#000000'
imageName	string	Nom de l'image téléchargée	'paintpad'
hasSlider	boolean	Si l'utilisateur peut changer l'épaisseur du crayon	true
hasColorPicker	boolean	Si l'utilisateur peut changer la couleur du crayon	true
isClearable	boolean	Si l'utilisateur peut effacer la toile	true
isDownloadable	boolean	Si l'utilisateur peut télécharger une image de la toile	true
isStateChangeable	boolean	Si l'utilisateur peut annuler et refaire l'état vers la toile	true

Méthodes

méthode	paramètres	description
setWidth	width: string	Définit la largeur de la toile
setHeight	height: string	Définit la hauteur de la toile
setLineWidth	lineWidth: number	Définit l'épaisseur du crayon
setLineWidthMin	lineWidth: number	Définit l'épaisseur minimale du crayon
setLineWidthMax	lineWidth: number	Définit l'épaisseur maximale du crayon
setColor	color: string	Définit la couleur du crayon
setImageName	name: string	Définit le nom de l'image téléchargée
setSlider	isVisible: boolean	Si l'utilisateur peut changer l'épaisseur du crayon
setColorPicker	isVisible: boolean	Si l'utilisateur peut changer la couleur du crayon
setClearable	isVisible: boolean	Si l'utilisateur peut effacer la toile
setDownloadable	isVisible: boolean	Si l'utilisateur peut télécharger une image de la toile
setStateChangeable	isVisible: boolean	Si l'utilisateur peut annuler et refaire l'état vers la toile
clear		efface la toile
download		télécharge une image de la toile
undo		change l'état de la toile à l'état précédent
redo		change l'état de la toile en l'état suivant
getDataURL		Renvoie l'URL de données de la toile
getBlob	callback: BlobCallback type?: string | undefined quality?: number	Obtient la goutte de la toile dans une fonction de rappel