paintpad

Paintpad

ส่วนประกอบผ้าใบที่อนุญาตให้วาดภาพฟรีฟอร์ม

การสาธิต

การติดตั้ง

เส้นด้าย

yarn add paintpad

NPM

npm install --save paintpad

UNPKG

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

การใช้งาน

HTML

 <paint-pad
  width = "300px" ความสูง = "300px" linewidth = "15" linewidthmin = "5" linewidthmax = "25" color = "#ffdab9" hasslider = "true" hascolorpicker = "true" isclearable = "true" "isstateChangeable =" true "> </paint-pad>

จาวาสคริปต์

 นำเข้า {paintpad} จาก "paintpad"; const paintpad = new paintpad ({
  ความกว้าง: "300px"
  ความสูง: "300px",
  linewidth: 15,
  linewidthmin: 5,
  linewidthmax: 25,
  สี: "#ffdab9"
  Hasslider: จริง
  Hascolorpicker: จริง
  isclearable: จริง
  Isdownloadable: จริง
  IsstateChangeable: จริง,}); document.getElementById ("paint-pad-pad-container"). ผนวก (Paintpad);

เชิงมุม

 // app.module.tsimport {custom_elements_schema} จาก '@angular/core';@ngmodule ({
  ... Schemas: [custom_elements_schema]
  -

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

 // app.component.tsimport "Paintpad"; Export Class AppComponent {
  @ViewChild ('Paintpad') Public Paintpad !: Elementref;

  Public Clear (): เป็นโมฆะ {this.paintpad.nativeelement.clear ();
  -

ตอบโต้

 นำเข้า "Paintpad"; แอปฟังก์ชั่น () {
  const paintpad = useref (null);

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

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

ตัวเลือก

คุณลักษณะ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
width	string	ความกว้างของผืนผ้าใบ	'500px'
height	string	ความสูงของผืนผ้าใบ	'500px'
lineWidth	number	ความหนาเริ่มต้นของดินสอ	10
lineWidthMin	number	ความหนาน้อยที่สุดของดินสอ	1
lineWidthMax	number	ความหนาสูงสุดของดินสอ	30
color	string	สีเริ่มต้นของดินสอ (ต้องเป็น hexcode 6 อักขระ)	'#000000'
imageName	string	ชื่อของภาพที่ดาวน์โหลด	'paintpad'
hasSlider	boolean	หากผู้ใช้สามารถเปลี่ยนความหนาของดินสอ	true
hasColorPicker	boolean	หากผู้ใช้สามารถเปลี่ยนสีของดินสอ	true
isClearable	boolean	หากผู้ใช้สามารถล้างผืนผ้าใบได้	true
isDownloadable	boolean	หากผู้ใช้สามารถดาวน์โหลดรูปภาพของผืนผ้าใบ	true
isStateChangeable	boolean	หากผู้ใช้สามารถยกเลิกและทำซ้ำสถานะไปยังผืนผ้าใบได้	true

วิธีการ

วิธี	พารามิเตอร์	คำอธิบาย
setWidth	width: string	ตั้งค่าความกว้างของผืนผ้าใบ
setHeight	height: string	ตั้งค่าความสูงของผืนผ้าใบ
setLineWidth	lineWidth: number	ตั้งค่าความหนาของดินสอ
setLineWidthMin	lineWidth: number	ตั้งค่าความหนาน้อยที่สุดของดินสอ
setLineWidthMax	lineWidth: number	ตั้งค่าความหนาสูงสุดของดินสอ
setColor	color: string	ตั้งค่าสีของดินสอ
setImageName	name: string	ตั้งค่าชื่อของภาพที่ดาวน์โหลด
setSlider	isVisible: boolean	หากผู้ใช้สามารถเปลี่ยนความหนาของดินสอ
setColorPicker	isVisible: boolean	หากผู้ใช้สามารถเปลี่ยนสีของดินสอ
setClearable	isVisible: boolean	หากผู้ใช้สามารถล้างผืนผ้าใบได้
setDownloadable	isVisible: boolean	หากผู้ใช้สามารถดาวน์โหลดรูปภาพของผืนผ้าใบ
setStateChangeable	isVisible: boolean	หากผู้ใช้สามารถยกเลิกและทำซ้ำสถานะไปยังผืนผ้าใบได้
clear		ล้างผ้าใบ
download		ดาวน์โหลดภาพของผืนผ้าใบ
undo		เปลี่ยนสถานะของผืนผ้าใบเป็นสถานะก่อนหน้า
redo		เปลี่ยนสถานะของผ้าใบเป็นสถานะถัดไป
getDataURL		ส่งคืน URL ข้อมูลของผืนผ้าใบ
getBlob	callback: BlobCallback type?: string | undefined quality?: number	รับหยดของผืนผ้าใบในฟังก์ชั่นการโทรกลับ