paintpad

Paintpad

Canvas -Komponente, die Freiformmalerei ermöglicht.

Demo

Installation

Garn

yarn add paintpad

NPM

npm install --save paintpad

Unpkg

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

Verwendung

Html

 <Paint-Pad
  width="300px"  height="300px"  lineWidth="15"  lineWidthMin="5"  lineWidthMax="25"  color="#ffdab9"  hasSlider="true"  hasColorPicker="true"  isClearable="true"  isDownloadable="true "isStatEchangable =" true "> </Paint-Pad>

JavaScript

 Importieren Sie {Paintpad} aus "Paintpad"; const Paintpad = new Paintpad ({{{{{{{{{{{{
  Breite: "300px",
  Höhe: "300px",
  Linienbreite: 15,
  Linewidthmin: 5,
  Linewidtherdmax: 25,
  Farbe: "#ffdab9",
  Hasslider: wahr,
  hascolorpicker: wahr,
  isclearable: wahr,
  ist downloadable: true,
  isStatEchangeable: true,}); document.getElementById ("Paint-Pad-Container"). Anhänge (Paintpad);

Eckig

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

 // app.component.html <Paint-Pad #paintpad width = "300px" color = " #ffdab9"> </paint-pad>

 // App.comPonent.tsimport "Paintpad"; Exportklasse AppComponent {
  @Viewchild ('Paintpad') public Paintpad !: ElementRef;

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

Reagieren

 importieren "Paintpad"; Funktion app () {
  const Paintpad = Useref (NULL);

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

  return <paint-pad ref = {Paintpad} width = "300px" color = "#ffdab9"> </Paint-Pad>;}

Optionen

Attribut	Typ	Beschreibung	Standard
width	string	Breite der Leinwand	'500px'
height	string	Höhe der Leinwand	'500px'
lineWidth	number	anfängliche Dicke des Bleistifts	10
lineWidthMin	number	minimale Dicke des Bleistifts	1
lineWidthMax	number	maximale Dicke des Bleistifts	30
color	string	Anfangsfarbe des Bleistifts (muss ein Hexcode von 6 Zeichen sein)	'#000000'
imageName	string	Name des heruntergeladenen Bildes	'paintpad'
hasSlider	boolean	Wenn der Benutzer die Dicke des Bleistifts ändern kann	true
hasColorPicker	boolean	Wenn der Benutzer die Farbe des Bleistifts ändern kann	true
isClearable	boolean	Wenn der Benutzer die Leinwand löschen kann	true
isDownloadable	boolean	Wenn der Benutzer ein Bild der Leinwand herunterladen kann	true
isStateChangeable	boolean	Wenn der Benutzer den Status auf die Leinwand rückgängig machen und wiederholen kann	true

Methoden

Verfahren	Parameter	Beschreibung
setWidth	width: string	Legt die Breite der Leinwand fest
setHeight	height: string	Legt die Höhe der Leinwand fest
setLineWidth	lineWidth: number	setzt die Dicke des Bleistifts
setLineWidthMin	lineWidth: number	setzt die minimale Dicke des Bleistifts
setLineWidthMax	lineWidth: number	stellt die maximale Dicke des Bleistifts fest
setColor	color: string	stellt die Farbe des Bleistifts fest
setImageName	name: string	Legt den Namen des heruntergeladenen Bildes fest
setSlider	isVisible: boolean	Wenn der Benutzer die Dicke des Bleistifts ändern kann
setColorPicker	isVisible: boolean	Wenn der Benutzer die Farbe des Bleistifts ändern kann
setClearable	isVisible: boolean	Wenn der Benutzer die Leinwand löschen kann
setDownloadable	isVisible: boolean	Wenn der Benutzer ein Bild der Leinwand herunterladen kann
setStateChangeable	isVisible: boolean	Wenn der Benutzer den Status auf die Leinwand rückgängig machen und wiederholen kann
clear		löscht die Leinwand
download		Laden Sie ein Bild der Leinwand herunter
undo		ändert den Zustand der Leinwand in den vorherigen Zustand
redo		ändert den Zustand der Leinwand in den nächsten Zustand
getDataURL		Gibt die Daten -URL der Leinwand zurück
getBlob	callback: BlobCallback type?: string | undefined quality?: number	Ruft den Blob der Leinwand in einer Rückruffunktion ein