paintpad

Paintpad

Komponen kanvas yang memungkinkan lukisan bentuk bebas.

demo

Instalasi

Benang

yarn add paintpad

NPM

npm install --save paintpad

UNPKG

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

Penggunaan

Html

 <cat-pad
  width = "300px" tinggi = "300px" linewidth = "15" linewidthmin = "5" linewidthmax = "25" color = "#ffdab9" hasslider = "true" hascolorpicker = "true" isClearable = "true" isDownloadable = "true" hascolorpicker = "true" isClearable = "true" isDownloadable = "true" hascolorpicker = "true" isClearable = "true" isDownloadable = "true" true " "isStatechangable =" true "> </cat-pad>

Javascript

 Impor {PaintPad} dari "PaintPad"; const paintpad = new PaintPad ({
  Lebar: "300px",
  Tinggi: "300px",
  Linewidth: 15,
  linewidthmin: 5,
  Linewidthmax: 25,
  Warna: "#ffdab9",
  Hasslider: Benar,
  HASCOLORPICKER: Benar,
  Terpisah: Benar,
  ISDownloadable: Benar,
  isStateChangable: true,}); document.geteLementById ("cat-pad-container"). append (paintpad);

Angular

 // app.module.tsimport {custom_elements_schema} dari '@angular/core';@ngmodule ({
  ... skema: [custom_elements_schema]
  ...})

 // app.component.html <cat-pad #PaintPad width = "300px" color = " #ffdab9"> </paint-pad>

 // app.component.tsimport "PaintPad"; Kelas Ekspor AppComponent {
  @ViewChild ('PaintPad') Public Paintpad!: ElementRef;

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

Bereaksi

 import "paintpad"; aplikasi fungsi () {
  const paintpad = useref (null);

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

  Return <Paint-Pad Ref = {PaintPad} width = "300px" color = "#ffdab9"> </cat-pad>;}

Opsi

atribut	jenis	keterangan	bawaan
width	string	lebar kanvas	'500px'
height	string	tinggi kanvas	'500px'
lineWidth	number	Ketebalan awal pensil	10
lineWidthMin	number	ketebalan pensil minimal	1
lineWidthMax	number	ketebalan maksimum pensil	30
color	string	Warna awal pensil (harus menjadi hexcode 6 karakter)	'#000000'
imageName	string	Nama gambar yang diunduh	'paintpad'
hasSlider	boolean	Jika pengguna dapat mengubah ketebalan pensil	true
hasColorPicker	boolean	Jika pengguna dapat mengubah warna pensil	true
isClearable	boolean	Jika pengguna dapat menghapus kanvas	true
isDownloadable	boolean	Jika pengguna dapat mengunduh gambar kanvas	true
isStateChangeable	boolean	Jika pengguna dapat membatalkan dan mengulang negara ke kanvas	true

Metode

metode	parameter	keterangan
setWidth	width: string	mengatur lebar kanvas
setHeight	height: string	mengatur ketinggian kanvas
setLineWidth	lineWidth: number	mengatur ketebalan pensil
setLineWidthMin	lineWidth: number	menetapkan ketebalan minimal pensil
setLineWidthMax	lineWidth: number	menetapkan ketebalan maksimum pensil
setColor	color: string	mengatur warna pensil
setImageName	name: string	Menetapkan nama gambar yang diunduh
setSlider	isVisible: boolean	Jika pengguna dapat mengubah ketebalan pensil
setColorPicker	isVisible: boolean	Jika pengguna dapat mengubah warna pensil
setClearable	isVisible: boolean	Jika pengguna dapat menghapus kanvas
setDownloadable	isVisible: boolean	Jika pengguna dapat mengunduh gambar kanvas
setStateChangeable	isVisible: boolean	Jika pengguna dapat membatalkan dan mengulang negara ke kanvas
clear		membersihkan kanvas
download		mengunduh gambar kanvas
undo		mengubah keadaan kanvas ke keadaan sebelumnya
redo		mengubah keadaan kanvas ke negara bagian berikutnya
getDataURL		Mengembalikan URL Data Kanvas
getBlob	callback: BlobCallback type?: string | undefined quality?: number	Mendapat gumpalan kanvas dalam fungsi panggilan balik