paintpad

ペイントパッド

自由形式の塗装を可能にするキャンバスコンポーネント。

デモ

インストール

糸

yarn add paintpad

npm

npm install --save paintpad

unpkg

 <スクリプト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 = "true" is downowable = " 「isstateChangable = "true"> </paint-pad>

JavaScript

 "paintpad"; const paintpad = new PaintPadから{paintPad}をインポートします（{
  幅：「300px」、
  高さ：「300px」、
  LineWidth：15、
  linewidthmin：5、
  linewidthmax：25、
  色： "＃ffdab9"、
  ハスライダー：本当、
  hascolorpicker：true、
  isClearable：本当、
  ISDownLoadable：True、
  isstateChangable：true、}）; document.getElementById（ "Paint-Pad Container"）。append（paintpad）;

角度

// app.module.tsimport {custom_elements_schema} from '@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 {th​​is.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	コールバック関数でキャンバスの塊を取得します