影音體驗(yàn)是真的強(qiáng) 簡單聊聊iQOO Pad
大公司的好處就是產(chǎn)品線豐富，非常細(xì)分化的東西也能給你做出來，例如早先我們看到了新的vivo Pad2，之后我們又在iQOO Neo8 Pro的發(fā)布會上看到了iQOO的首款平板產(chǎn)品iQOO Pad。雖
hello, 大家好, 我是徐夕, 今天又到了分享時(shí)間. 今天和大家分享一下我最近開源的輕量級電子簽名組件——react-sign2。
我們可以使用它輕松的實(shí)現(xiàn)電子簽名, 比如說常用的合同簽字, 文稿簽名, 藝術(shù)簽名等, 并支持一鍵將簽名保存。
我們要想直接使用, 可以在 npm 上安裝 react-sign2 :
# 或者yarn add react-sign2npm i react-sign2然后一個(gè)簡單的使用如下:
import Sign from 'react-sign2';export default () => <Sign width={400} onDrawEnd={(c) => console.log(c)} />;react-sign2還提供了很多可定制的屬性, 來方便使用者靈活定制電子簽名, 以下是開放性屬性介紹:
比如我可以調(diào)整線條的顏色:
調(diào)整線條寬度:
在具體使用的時(shí)候靈活配置即可, 我還提供了業(yè)務(wù)中經(jīng)常用到的監(jiān)聽事件, 方便使用者靈活調(diào)用:
按照筆者之前的習(xí)慣, 在設(shè)計(jì)組件之前都會先明確組件的設(shè)計(jì)需求, 然后根據(jù)健壯組件的設(shè)計(jì)原則來落地組件, 這里給大家分享一下我總結(jié)的幾條組件設(shè)計(jì)經(jīng)驗(yàn):
對于電子簽名組件, 我們最小化的需求就是能滿足用戶的線上簽名, 并能保存簽名數(shù)據(jù)。
以上就是我們最小化的需求, 為了滿足我總結(jié)的組件設(shè)計(jì)幾大原則, 我們需要對組件進(jìn)行近一步的需求分析: 簽名的顏色, 筆觸的粗細(xì), 平滑度, 支持自定義事件等。
這些都是組件第一個(gè)階段可以想到的配置點(diǎn), 也是能應(yīng)對第一階段業(yè)務(wù)需求的功能, 所以有了第一版的組件需求設(shè)計(jì):
接下來就需要用 typescript 來規(guī)范組件的輸入和輸出了. 具體定義如下:
export interface IProp { /** * @description 畫布寬度 * @default 400 */ width?: number; /** * @description 畫布高度 * @default 200 */ height?: number; /** * @description 線寬 * @default 4 */ lineWidth?: number; /** * @description 線段顏色 * @default 'red' */ strokeColor?: string; /** * @description 設(shè)置線條兩端圓角 * @default 'round' */ lineCap?: string; /** * @description 線條交匯處圓角 * @default 'round' */ lineJoin?: string; /** * @description 畫布背景顏色 * @default 'transparent' */ bgColor?: string; /** * @description true */ showBtn?: boolean; /** * @description 當(dāng)保存時(shí)的回調(diào), blob為生成的圖片bob * @default - */ onSave?: (blob: Blob) => void; /** * @description 當(dāng)畫布清空時(shí)的回調(diào), 參數(shù)為畫布的上下文對象,可以直接使用canvas的api * @default - */ onClear?: (canvasContext: CanvasRenderingContext2D) => void; /** * @description 當(dāng)畫布結(jié)束時(shí)的回調(diào) * @default - */ onDrawEnd?: (canvas: HTMLCanvasElement) => void;}接下來就到了我們具體的代碼實(shí)現(xiàn)階段. 由于電子簽名的核心技術(shù)采用的是canvas(雖然用dom和svg也可以實(shí)現(xiàn)), 所以無論你是用的react還是vue3, 或者似乎原生態(tài)javascript, 都能低成本的封裝. 這里筆者采用全球程序員最愛用的react 來實(shí)現(xiàn)。
以上是組件的基本屬性定義和代碼結(jié)構(gòu), 畫圖部分涉及到 canvas 的比較細(xì)節(jié)的部分。
具體實(shí)現(xiàn)的源碼我已經(jīng)上傳到github, 感興趣的朋友大家可以參考一下。
github: https://github.com/MrXujiang/react-sign
大家如果想直接使用, 可以使用如下方式安裝使用:
react-sign2 官方演示文檔
本文鏈接：http://www.tebozhan.com/showinfo-26-16025-0.html開源推薦! 一款開箱即用的電子簽名組
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 通過實(shí)例理解Web應(yīng)用用戶密碼存儲方案
下一篇： Rust編程基礎(chǔ)之變量與可變性
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號