{"id":114,"date":"2023-07-21T11:30:05","date_gmt":"2023-07-21T03:30:05","guid":{"rendered":"https:\/\/iwebg.cn\/?p=114"},"modified":"2023-07-21T11:40:17","modified_gmt":"2023-07-21T03:40:17","slug":"uniapp%e7%ad%be%e5%90%8d%e7%ad%be%e5%ad%97%e6%9d%bflime-signature","status":"publish","type":"post","link":"http:\/\/iwebg.cn\/index.php\/2023\/07\/21\/uniapp%e7%ad%be%e5%90%8d%e7%ad%be%e5%ad%97%e6%9d%bflime-signature\/","title":{"rendered":"uniapp\u7b7e\u540d\u7b7e\u5b57\u677flime-signature"},"content":{"rendered":"\n
\n
\"\"<\/div><\/figure>\n\n\n\n

\u4f7f\u7528\u524d\u9700\u5728\u63d2\u4ef6\u5e02\u573a\u5b89\u88c5\u63d2\u4ef6 \u63d2\u4ef6ID\uff1alime-signature<\/a><\/p>\n<\/blockquote>\n\n\n\n

HTML\u4ee3\u7801<\/h3>\n\n\n\n
<template>\n  <view class='signature h-100'>\n    <view class='h-100'>\n      <l-signature\n        disableScroll\n        backgroundColor='#ddd'\n        ref='signatureRef'\n        :penColor='penColor'\n        :penSize='penSize'\n        :openSmooth='openSmooth'\n      ><\/l-signature>\n    <\/view>\n    <view class='button'>\n      <view @click='onClick(\"clear\")'>\n        <!-- clear\u6309\u94ae\u7684SVG\u56fe\u6807 -->\n      <\/view>\n      <view @click='onClick(\"undo\")'>\n        <!-- undo\u6309\u94ae\u7684SVG\u56fe\u6807 -->\n      <\/view>\n      <view @click='onClick(\"save\")'>\n        <!-- save\u6309\u94ae\u7684SVG\u56fe\u6807 -->\n      <\/view>\n    <\/view>\n  <\/view>\n<\/template><\/code><\/pre>\n\n\n\n
JavaScript<\/h4>\n\n\n\n
<script>\nexport default {\n  data() {\n    return {\n      title: 'Hello',\n      penColor: 'red',\n      penSize: 5,\n      url: '',\n      openSmooth: true\n    }\n  },\n  methods: {\n    onClick(type) {\n      if (type == 'openSmooth') {\n        this.openSmooth = !this.openSmooth\n        return\n      }\n      if (type == 'save') {\n        this.$refs.signatureRef.canvasToTempFilePath({\n          success: (res) => {\n            \/\/ \u662f\u5426\u4e3a\u7a7a\u753b\u677f \u65e0\u7b7e\u540d\n            console.log(res.isEmpty)\n            \/\/ \u751f\u6210\u56fe\u7247\u7684\u4e34\u65f6\u8def\u5f84\n            \/\/ H5 \u751f\u6210\u7684\u662fbase64\n            this.url = res.tempFilePath\n          }\n        })\n        return\n      }\n      if (this.$refs.signatureRef)\n        this.$refs.signatureRef[type]()\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
Css\u4ee3\u7801<\/h4>\n\n\n\n
<style>\n.signature {\n  position: relative;\n}\n.button {\n  position: absolute;\n  background: #fff;\n  padding: 10px;\n  bottom: 0;\n  display: flex;\n  justify-content: space-around;\n  width: 100%;\n  align-items: center;\n}\n.h-100 {\n  height: 100%;\n}\n<\/style><\/code><\/pre>\n\n\n\n
API<\/h3>\n\n\n\n
Props<\/h4>\n\n\n\n
\u53c2\u6570<\/th>\u8bf4\u660e<\/th>\u7c7b\u578b<\/th>\u9ed8\u8ba4\u503c<\/th><\/tr><\/thead>
penSize<\/td>\u753b\u7b14\u5927\u5c0f<\/td>number<\/td>2<\/td><\/tr>
minLineWidth<\/td>\u7ebf\u6761\u6700\u5c0f\u5bbd<\/td>number<\/td>2<\/td><\/tr>
maxLineWidth<\/td>\u7ebf\u6761\u6700\u5927\u5bbd<\/td>number<\/td>6<\/td><\/tr>
penColor<\/td>\u753b\u7b14\u989c\u8272<\/td>string<\/td>black<\/td><\/tr>
backgroundColor<\/td>\u80cc\u666f\u989c\u8272<\/td>string<\/td>“”<\/td><\/tr>
type<\/td>\u6307\u5b9a canvas \u7c7b\u578b<\/td>string<\/td>2d<\/td><\/tr>
openSmooth<\/td>\u662f\u5426\u6a21\u62df\u538b\u611f<\/td>boolean<\/td>false<\/td><\/tr>
beforeDelay<\/td>\u5ef6\u65f6\u521d\u59cb\u5316\uff0c\u5728\u653e\u5728\u5f39\u7a97\u91cc\u53ef\u4ee5\u4f7f\u7528 \uff08\u6beb\u79d2\uff09<\/td>number<\/td>0<\/td><\/tr>
maxHistoryLength<\/td>\u9650\u5236\u5386\u53f2\u8bb0\u5f55\u6570\uff0c\u5373\u6700\u5927\u53ef\u64a4\u9500\u6570\uff0c\u4f20\u51650\u5219\u5173\u95ed\u5386\u53f2\u8bb0\u5f55\u529f\u80fd<\/td>boolean<\/td>20<\/td><\/tr>
landscape<\/td>\u6a2a\u5c4f<\/td>boolean<\/td><\/td><\/tr>
disableScroll<\/td>\u5f53\u5728\u5199\u5b57\u65f6\uff0c\u7981\u6b62\u5c4f\u5e55\u6eda\u52a8\u4ee5\u53ca\u4e0b\u62c9\u5237\u65b0<\/td>boolean<\/td>true<\/td><\/tr>
boundingBox<\/td>\u53ea\u751f\u6210\u5185\u5bb9\u533a\u57df\uff0c\u5373\u672a\u753b\u90e8\u5206\u4e0d\u751f\u6210\uff0c\u6709\u6027\u80fd\u7684\u635f\u8017<\/td>boolean<\/td>false<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u4e8b\u4ef6 Events<\/h4>\n\n\n\n
\u4e8b\u4ef6\u540d<\/th>\u8bf4\u660e<\/th>\u56de\u8c03<\/th><\/tr><\/thead>
undo<\/td>\u64a4\u6d88\uff0c\u56de\u9000\u5230\u4e0a\u4e00\u6b65<\/td><\/td><\/tr>
clear<\/td>\u6e05\u7a7a\uff0c\u6e05\u7a7a\u753b\u677f<\/td><\/td><\/tr>
canvasToTempFilePath<\/td>\u4fdd\u5b58\uff0c\u751f\u6210\u56fe\u7247\uff0c\u4e0e\u5b98\u65b9\u4fdd\u6301\u4e00\u81f4\uff0c\u4f46\u4e0d\u9700\u8981\u4f20canvasId<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Vue 2 \u548c Vue 3 \u7684\u5e73\u53f0\u517c\u5bb9\u6027\uff1a<\/h4>\n\n\n\n
\u5e73\u53f0\/\u6d4f\u89c8\u5668<\/th>Vue 2 \u517c\u5bb9\u6027<\/th>Vue 3 \u517c\u5bb9\u6027<\/th><\/tr><\/thead>
App<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u5feb\u5e94\u7528<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u767e\u5ea6\u5c0f\u7a0b\u5e8f<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u5b57\u8282\u5c0f\u7a0b\u5e8f<\/td>\u221a<\/td>\u221a<\/td><\/tr>
QQ\u5c0f\u7a0b\u5e8f<\/td>\u221a<\/td>\u221a<\/td><\/tr>
HBuilderX 3.5.4 app-vue<\/td>\u221a<\/td>\u221a<\/td><\/tr>
HBuilderX 3.5.4 app-nvue<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u9489\u9489\u5c0f\u7a0b\u5e8f<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
\u5feb\u624b\u5c0f\u7a0b\u5e8f<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
\u98de\u4e66\u5c0f\u7a0b\u5e8f<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
\u4eac\u4e1c\u5c0f\u7a0b\u5e8f<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
H5-Safari<\/td>\u221a<\/td>\u221a<\/td><\/tr>
Android Browser<\/td>\u221a<\/td>\u221a<\/td><\/tr>
\u5fae\u4fe1\u6d4f\u89c8\u5668(Android)<\/td>\u221a<\/td>\u221a<\/td><\/tr>
QQ\u6d4f\u89c8\u5668(Android)<\/td>\u221a<\/td>\u221a<\/td><\/tr>
Chrome<\/td>\u221a<\/td>\u221a<\/td><\/tr>
IE<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
Edge<\/td>\u00d7<\/td>\u00d7<\/td><\/tr>
Firefox<\/td>\u221a<\/td>\u221a<\/td><\/tr>
PC-Safari<\/td>\u221a<\/td>\u221a<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
HTML\u4ee3\u7801 JavaScript Css\u4ee3\u7801 API Props \u53c2\u6570 \u8bf4\u660e \u7c7b\u578b \u9ed8\u8ba4\u503c penSize  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-10"],"_links":{"self":[{"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":12,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":131,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions\/131"}],"wp:attachment":[{"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/iwebg.cn\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}