paintpad

paintpad

مكون القماش الذي يسمح بالطلاء المجاني.

العرض التوضيحي

تثبيت

غزل

yarn add paintpad

NPM

npm install --save paintpad

UNPKG

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

الاستخدام

HTML

 <لوحة الطلاء
  width = "300px" height = "300px" linewidth = "15" lineWidThMin = "5" lineWidThMax = "25" color = "#ffdab9" hasslider = "true" hascolorpicker = "true" isClearable = "isDownLoadable =" true " "isStateChangeable =" true "> </paint-pad>

جافا سكريبت

 استيراد {paintpad} من "paintpad" ؛ const paintpad = new paintpad ({
  العرض: "300px" ،
  الارتفاع: "300px" ،
  عرض الخط: 15 ،
  linewidthmin: 5 ،
  linewidthmax: 25 ،
  اللون: "#ffdab9" ،
  Hasslider: صحيح ،
  Hascolorpicker: صحيح ،
  غير قابل للاعتبار: صحيح ،
  قابلة للتحميل: صحيح ،
  isStateChangable: true ،}) ؛ document.getElementById ("paint-pad-container"). إلحاق (paintpad) ؛

زاوي

 // app.module.tsimport {custom_elements_schema} من '@angular/core' ؛@ngmodule ({
  ... مخططات: [custom_elements_schema]
  ...})

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

 // app.component.tsimport "paintpad" ؛ تصدير فئة AppComponent {
  ViewChild ('paintpad') paintpad public!: elementRef ؛

  public clear (): void {this.paintpad.nistilelement.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	اللون الأولي للقلم الرصاص (يجب أن يكون رمز سداسي من 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	يحصل على نقطة القماش في وظيفة رد الاتصال