UNPKG

@shixinde/vuepress-theme-init

Version:

### 其他开源项目

shixindea.github.io/guoguo-notes/

shixindea/guoguo-notes

62 lines (61 loc) • 35.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},o=p(`<h1 id="组件" tabindex="-1"><a class="header-anchor" href="#组件"><span>组件</span></a></h1><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>canvas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@mousedown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>startDrawing<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@mousemove</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>draw<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@mouseup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stopDrawing<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearSignature<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>清除签名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>saveSignature<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>保存签名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span> <span class="line"></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span> <span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">isDrawing</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">lastX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">lastY</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;2d&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">startDrawing</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>isDrawing <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">const</span> rect <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>lastX <span class="token operator">=</span> event<span class="token punctuation">.</span>clientX <span class="token operator">-</span> rect<span class="token punctuation">.</span>left<span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>lastY <span class="token operator">=</span> event<span class="token punctuation">.</span>clientY <span class="token operator">-</span> rect<span class="token punctuation">.</span>top<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">draw</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>isDrawing<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">const</span> rect <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">const</span> x <span class="token operator">=</span> event<span class="token punctuation">.</span>clientX <span class="token operator">-</span> rect<span class="token punctuation">.</span>left<span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">const</span> y <span class="token operator">=</span> event<span class="token punctuation">.</span>clientY <span class="token operator">-</span> rect<span class="token punctuation">.</span>top<span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lastX<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastY<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>lastX <span class="token operator">=</span> x<span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>lastY <span class="token operator">=</span> y<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">stopDrawing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>isDrawing <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">clearSignature</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">const</span> canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>canvas<span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">saveSignature</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">const</span> canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>canvas<span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">const</span> signatureData <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token comment">// 将 signatureData 发送到服务器进行保存或其他操作</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;signatureData&#39;</span><span class="token punctuation">,</span> signatureData<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span> <span class="line"></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,2),c=[o];function e(l,u){return a(),s("div",null,c)}const k=n(t,[["render",e],["__file","index.html.vue"]]),r=JSON.parse(`{"path":"/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85/%E7%94%B5%E5%AD%90%E7%AD%BE%E5%90%8D/","title":"电子签名","lang":"zh-CN","frontmatter":{"title":"电子签名","date":"2023-5-21","tags":["电子签名","笔记"],"categories":["汇智篇"]},"headers":[],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"组件封装/电子签名/index.md","excerpt":"\\n<div class=\\"language-vue\\" data-highlighter=\\"prismjs\\" data-ext=\\"vue\\" data-title=\\"vue\\"><pre class=\\"language-vue\\"><code><span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>template</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>canvas</span> <span class=\\"token attr-name\\">ref</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>canvas<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">@mousedown</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>startDrawing<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">@mousemove</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>draw<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">@mouseup</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>stopDrawing<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>canvas</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>button</span> <span class=\\"token attr-name\\">@click</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>clearSignature<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span>清除签名<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>button</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>button</span> <span class=\\"token attr-name\\">@click</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>saveSignature<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span>保存签名<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>button</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>template</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>script</span><span class=\\"token punctuation\\">&gt;</span></span><span class=\\"token script\\"><span class=\\"token language-javascript\\"></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">export</span> <span class=\\"token keyword\\">default</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">data</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">return</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">isDrawing</span><span class=\\"token operator\\">:</span> <span class=\\"token boolean\\">false</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">context</span><span class=\\"token operator\\">:</span> <span class=\\"token keyword\\">null</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">lastX</span><span class=\\"token operator\\">:</span> <span class=\\"token number\\">0</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">lastY</span><span class=\\"token operator\\">:</span> <span class=\\"token number\\">0</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">mounted</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>$refs<span class=\\"token punctuation\\">.</span>canvas<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getContext</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">\\"2d\\"</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span>lineWidth <span class=\\"token operator\\">=</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">methods</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">startDrawing</span><span class=\\"token punctuation\\">(</span><span class=\\"token parameter\\">event</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>isDrawing <span class=\\"token operator\\">=</span> <span class=\\"token boolean\\">true</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> rect <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>$refs<span class=\\"token punctuation\\">.</span>canvas<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getBoundingClientRect</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastX <span class=\\"token operator\\">=</span> event<span class=\\"token punctuation\\">.</span>clientX <span class=\\"token operator\\">-</span> rect<span class=\\"token punctuation\\">.</span>left<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastY <span class=\\"token operator\\">=</span> event<span class=\\"token punctuation\\">.</span>clientY <span class=\\"token operator\\">-</span> rect<span class=\\"token punctuation\\">.</span>top<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">draw</span><span class=\\"token punctuation\\">(</span><span class=\\"token parameter\\">event</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">if</span> <span class=\\"token punctuation\\">(</span><span class=\\"token operator\\">!</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>isDrawing<span class=\\"token punctuation\\">)</span> <span class=\\"token keyword\\">return</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> rect <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>$refs<span class=\\"token punctuation\\">.</span>canvas<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getBoundingClientRect</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> x <span class=\\"token operator\\">=</span> event<span class=\\"token punctuation\\">.</span>clientX <span class=\\"token operator\\">-</span> rect<span class=\\"token punctuation\\">.</span>left<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> y <span class=\\"token operator\\">=</span> event<span class=\\"token punctuation\\">.</span>clientY <span class=\\"token operator\\">-</span> rect<span class=\\"token punctuation\\">.</span>top<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">beginPath</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">moveTo</span><span class=\\"token punctuation\\">(</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastX<span class=\\"token punctuation\\">,</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastY<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">lineTo</span><span class=\\"token punctuation\\">(</span>x<span class=\\"token punctuation\\">,</span> y<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">stroke</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastX <span class=\\"token operator\\">=</span> x<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>lastY <span class=\\"token operator\\">=</span> y<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">stopDrawing</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>isDrawing <span class=\\"token operator\\">=</span> <span class=\\"token boolean\\">false</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">clearSignature</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> canvas <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>$refs<span class=\\"token punctuation\\">.</span>canvas<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>context<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">clearRect</span><span class=\\"token punctuation\\">(</span><span class=\\"token number\\">0</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">0</span><span class=\\"token punctuation\\">,</span> canvas<span class=\\"token punctuation\\">.</span>width<span class=\\"token punctuation\\">,</span> canvas<span class=\\"token punctuation\\">.</span>height<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token function\\">saveSignature</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> canvas <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>$refs<span class=\\"token punctuation\\">.</span>canvas<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> signatureData <span class=\\"token operator\\">=</span> canvas<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">toDataURL</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token comment\\">// 将 signatureData 发送到服务器进行保存或其他操作</span></span>\\n<span class=\\"line\\"> console<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">log</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'signatureData'</span><span class=\\"token punctuation\\">,</span> signatureData<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\"><span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>script</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{k as comp,r as data};