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 =“ hascolorpicker =“ true” “ isStatechangable =“ true” > </paint-pad>

JavaScript

導入{paintpad}來自“繪畫板”; const繪畫板= new Paintpad（{
  寬度：“ 300px”，
  身高：“ 300px”，
  線寬：15，
  線寬度：5，
  linewidthmax：25，
  顏色：“＃ffdab9”，
  哈斯萊德：是的，
  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“ PARTAPAD”;導出類AppComponent {
  @ViewChild（'Paintpad'）公共繪畫板！：ElementRef;

  public clear（）：void {th​​is.paintpad.nativelement.clear（）;
  }}}

反應

導入“繪圖板”; function app（）{
  const繪圖板= useref（null）;

  const clear =（）=> paintpad.current.clear（）;

  返回<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	在回調功能中獲取畫布的斑點