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"색상 = "#ffdab9"Hasslider = "True"HascolorPicker = "true"isclearable = "true"isdownloadable = "isdownloadable ="true "isstatechangable ="true "> </paint-pad>

자바 스크립트

 "PaintPad"에서 {paintpad} import {const paintpad = new PaintPad ({{
  너비 : "300px",
  높이 : "300px",
  linewidth : 15,
  linewidthmin : 5,
  linewidthmax : 25,
  색상 : "#ffdab9",
  Hasslider : True,
  hascolorpicker : 사실,
  Isclearable : True,
  isdownloadable : true,
  isstateChangable : true,}); docum

모난

 // app.module.tsimport {custom_elements_schema} from '@Angular/Core';@ngmodule ({
  ... 스키마 : [custom_elements_schema]
  ...})

 // app.component.html <페인트-패드 #paintpad width = "300px"color = " #ffdab9"> </paint-pad>

 // app.component.timport "PaintPad"; 내보내기 클래스 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 <페인트 패드 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 자의 16 진 코드 여야합니다)	'#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	콜백 함수에서 캔버스의 덩어리를 가져옵니다.