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	在回调功能中获取画布的斑点