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" height = "300px" linewidth = "15" linewidthmin = "5" linewidthmax = "25" color = "#ffdab9" hasslider = "true" hascolorpicker = "true" isclearable = "true" isdownload = "true" "isStateChangable =" true "> </paint-pad>

JavaScript

 Import {paintpad} из "Paintpad"; const paintpad = new Paintpad ({
  Ширина: "300px",
  высота: "300px",
  ширина линии: 15,
  LineWidthmin: 5,
  LineWidthMax: 25,
  Цвет: "#ffdab9",
  Hasslider: True,
  Hascolorpicker: True,
  Isclearable: правда,
  Isdownload: True,
  isstateChangable: true,}); document.getElementbyId ("paint-pad-container"). Append (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"; export class appcomponent {
  @Viewchild ('paintpad') public paintpad!: ElementRef;

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

Реагировать

 Импорт "Paintpad"; function app () {
  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	Получает каплей холста в функции обратного вызова