MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
hello, 大家好, 我是徐夕, 今天又到了分享時間. 今天和大家分享一下我最近開源的輕量級電子簽名組件——react-sign2。
我們可以使用它輕松的實現電子簽名, 比如說常用的合同簽字, 文稿簽名, 藝術簽名等, 并支持一鍵將簽名保存。
我們要想直接使用, 可以在 npm 上安裝 react-sign2 :
# 或者yarn add react-sign2npm i react-sign2然后一個簡單的使用如下:
import Sign from 'react-sign2';export default () => <Sign width={400} onDrawEnd={(c) => console.log(c)} />;react-sign2還提供了很多可定制的屬性, 來方便使用者靈活定制電子簽名, 以下是開放性屬性介紹:
比如我可以調整線條的顏色:
調整線條寬度:
在具體使用的時候靈活配置即可, 我還提供了業務中經常用到的監聽事件, 方便使用者靈活調用:
按照筆者之前的習慣, 在設計組件之前都會先明確組件的設計需求, 然后根據健壯組件的設計原則來落地組件, 這里給大家分享一下我總結的幾條組件設計經驗:
對于電子簽名組件, 我們最小化的需求就是能滿足用戶的線上簽名, 并能保存簽名數據。
以上就是我們最小化的需求, 為了滿足我總結的組件設計幾大原則, 我們需要對組件進行近一步的需求分析: 簽名的顏色, 筆觸的粗細, 平滑度, 支持自定義事件等。
這些都是組件第一個階段可以想到的配置點, 也是能應對第一階段業務需求的功能, 所以有了第一版的組件需求設計:
接下來就需要用 typescript 來規范組件的輸入和輸出了. 具體定義如下:
export interface IProp { /** * @description 畫布寬度 * @default 400 */ width?: number; /** * @description 畫布高度 * @default 200 */ height?: number; /** * @description 線寬 * @default 4 */ lineWidth?: number; /** * @description 線段顏色 * @default 'red' */ strokeColor?: string; /** * @description 設置線條兩端圓角 * @default 'round' */ lineCap?: string; /** * @description 線條交匯處圓角 * @default 'round' */ lineJoin?: string; /** * @description 畫布背景顏色 * @default 'transparent' */ bgColor?: string; /** * @description true */ showBtn?: boolean; /** * @description 當保存時的回調, blob為生成的圖片bob * @default - */ onSave?: (blob: Blob) => void; /** * @description 當畫布清空時的回調, 參數為畫布的上下文對象,可以直接使用canvas的api * @default - */ onClear?: (canvasContext: CanvasRenderingContext2D) => void; /** * @description 當畫布結束時的回調 * @default - */ onDrawEnd?: (canvas: HTMLCanvasElement) => void;}接下來就到了我們具體的代碼實現階段. 由于電子簽名的核心技術采用的是canvas(雖然用dom和svg也可以實現), 所以無論你是用的react還是vue3, 或者似乎原生態javascript, 都能低成本的封裝. 這里筆者采用全球程序員最愛用的react 來實現。
以上是組件的基本屬性定義和代碼結構, 畫圖部分涉及到 canvas 的比較細節的部分。
具體實現的源碼我已經上傳到github, 感興趣的朋友大家可以參考一下。
github: https://github.com/MrXujiang/react-sign
大家如果想直接使用, 可以使用如下方式安裝使用:
react-sign2 官方演示文檔
本文鏈接：http://www.tebozhan.com/showinfo-26-16012-0.html開源推薦! 一款開箱即用的電子簽名組
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C++讀取文件和寫入文件內容實例詳解
下一篇： 數據結構分類以及數據結構特點、優缺點
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號