JavaScript chữ ký canvas

Ban đầu, đây chỉ là một nhánh rẽ của react-signature-pad không có bất kỳ kiểu dáng nào hoặc bọc bất kỳ phần tử không mong muốn nào khác xung quanh canvas của bạn -- nó chỉ là một trình bao quanh một phần tử canvas duy nhất. Do đó sự khác biệt đặt tên. Ngày nay, repo/thư viện này đã phát triển đáng kể, giới thiệu các tính năng mới, sửa các lỗi khác nhau và hiện đang bao bọc

 { this.sigCanvas = ref }} />

1 ngược dòng để có các bản cập nhật và sửa lỗi của nó

Ngã ba này cũng cho phép bạn chuyển trực tiếp các đạo cụ tới phần tử canvas bên dưới, có các phương thức API mới, được ghi lại mà bạn có thể sử dụng, có các đạo cụ mới, được ghi lại mà bạn có thể chuyển tới nó, có bản trình diễn trực tiếp, có sân chơi CodeSandbox và có 100%

Cài đặt

 { this.sigCanvas = ref }} />

2

Cách sử dụng

import React from 'react'
import ReactDOM from 'react-dom'
import SignatureCanvas from 'react-signature-canvas'

ReactDOM.render[
  ,
  document.getElementById['react-container']
]

đạo cụ

Các đạo cụ của SignatureCanvas chủ yếu kiểm soát các thuộc tính của nét bút được sử dụng trong bản vẽ. Tất cả các đạo cụ là tùy chọn

•  { this.sigCanvas = ref }} />

  3.

   { this.sigCanvas = ref }} />

  4, mặc định.

   { this.sigCanvas = ref }} />

  5

•  { this.sigCanvas = ref }} />

  6.

   { this.sigCanvas = ref }} />

  4, mặc định.

   { this.sigCanvas = ref }} />

  8

•  { this.sigCanvas = ref }} />

  0.

   { this.sigCanvas = ref }} />

  4, mặc định.

   { this.sigCanvas = ref }} />

  2

•  { this.sigCanvas = ref }} />

  3.

   { this.sigCanvas = ref }} />

  4, mặc định.

   { this.sigCanvas = ref }} />

  5

•  { this.sigCanvas = ref }} />

  6.

   { this.sigCanvas = ref }} />

  4 hoặc

   { this.sigCanvas = ref }} />

  8, mặc định.

   { this.sigCanvas = ref }} />

  9

•  { this.sigCanvas = ref }} />

  10.

   { this.sigCanvas = ref }} />

  11, mặc định.

   { this.sigCanvas = ref }} />

  12

•  { this.sigCanvas = ref }} />

  13.

   { this.sigCanvas = ref }} />

  4, mặc định.

   { this.sigCanvas = ref }} />

  15

Ngoài ra còn có hai cuộc gọi lại sẽ được gọi khi một nét vẽ kết thúc và một lần bắt đầu, tương ứng

•  { this.sigCanvas = ref }} />

  16.

   { this.sigCanvas = ref }} />

  8

•  { this.sigCanvas = ref }} />

  18.

   { this.sigCanvas = ref }} />

  8

Các đạo cụ bổ sung được sử dụng để điều khiển phần tử canvas

•  { this.sigCanvas = ref }} />

  20.

   { this.sigCanvas = ref }} />

  21
  • được chuyển trực tiếp đến phần tử

     { this.sigCanvas = ref }} />

    22 bên dưới

•  { this.sigCanvas = ref }} />

  23.

   { this.sigCanvas = ref }} />

  11, mặc định.

   { this.sigCanvas = ref }} />

  25
  • được sử dụng trong phương thức thuận tiện

     { this.sigCanvas = ref }} />

    26 của API [bản thân phương thức này được gọi nội bộ trong quá trình thay đổi kích thước]

•  { this.sigCanvas = ref }} />

  27.

   { this.sigCanvas = ref }} />

  28, mặc định.

   { this.sigCanvas = ref }} />

  29
  • có nên xóa khung vẽ khi cửa sổ thay đổi kích thước hay không

Trong số các đạo cụ này, tất cả, ngoại trừ

 { this.sigCanvas = ref }} />

20 và

 { this.sigCanvas = ref }} />

27, đều được chuyển cho

 { this.sigCanvas = ref }} />

1 dưới dạng tùy chọn của nó. Trạng thái bên trong của

 { this.sigCanvas = ref }} />

1 được tự động giữ đồng bộ với các bản cập nhật chống đỡ cho bạn [thông qua móc nối

 { this.sigCanvas = ref }} />

34]

API

Tất cả các phương thức API đều yêu cầu tham chiếu đến SignatureCanvas để sử dụng và là các phương thức mẫu của tham chiếu

 { this.sigCanvas = ref }} />

•  { this.sigCanvas = ref }} />

  35.

   { this.sigCanvas = ref }} />

  36, tự giải thích

•  { this.sigCanvas = ref }} />

  37.

   { this.sigCanvas = ref }} />

  38, xóa canvas bằng giá đỡ

   { this.sigCanvas = ref }} />

  23

•  { this.sigCanvas = ref }} />

  40.

   { this.sigCanvas = ref }} />

  38, ghi hình ảnh base64 vào canvas

•  { this.sigCanvas = ref }} />

  42.

   { this.sigCanvas = ref }} />

  43, trả về hình ảnh chữ ký dưới dạng URL dữ liệu

•  { this.sigCanvas = ref }} />

  44.

   { this.sigCanvas = ref }} />

  38, vẽ hình ảnh chữ ký từ một loạt các nhóm điểm

•  { this.sigCanvas = ref }} />

  46.

   { this.sigCanvas = ref }} />

  47, trả về hình ảnh chữ ký dưới dạng một mảng các nhóm điểm

•  { this.sigCanvas = ref }} />

  48.

   { this.sigCanvas = ref }} />

  38, hủy liên kết tất cả các trình xử lý sự kiện

•  { this.sigCanvas = ref }} />

  50.

   { this.sigCanvas = ref }} />

  38, rebinds tất cả các trình xử lý sự kiện

•  { this.sigCanvas = ref }} />

  52.

   { this.sigCanvas = ref }} />

  53, trả về tham chiếu canvas bên dưới. Cho phép bạn sửa đổi canvas theo cách bạn muốn hoặc gọi các phương thức như

   { this.sigCanvas = ref }} />

  54

•  { this.sigCanvas = ref }} />

  55.

   { this.sigCanvas = ref }} />

  53, tạo một bản sao của canvas và trả về một phiên bản đã được cắt bớt của canvas đó, đã xóa tất cả khoảng trắng

•  { this.sigCanvas = ref }} />

  57.

   { this.sigCanvas = ref }} />

  58, trả về tham chiếu SignaturePad bên dưới

Các phương thức API chủ yếu chỉ là các trình bao bọc xung quanh API của

 { this.sigCanvas = ref }} />

1. Ngoài ra,

 { this.sigCanvas = ref }} />

50 và

 { this.sigCanvas = ref }} />

48 sẽ liên kết/bỏ liên kết trình xử lý sự kiện thay đổi kích thước cửa sổ.

 { this.sigCanvas = ref }} />

52,

 { this.sigCanvas = ref }} />

55 và

 { this.sigCanvas = ref }} />

57 là mới