背景:プロジェクト中、WeChat アプレットに手書き署名コンポーネントを実装する必要があります。手書き署名を実装するための WeChat ミニプログラムをインターネットで検索しましたが、結果は理想的ではありませんでした。実際のアプリケーションでは、多数のベジェ曲線をリアルタイムで計算するため、遅延が発生する可能性があります。効果は理想的ではありません。つまり、一歩引いて考えると、ペン先や手書きのシミュレーション効果は必要ありません。必要なのは簡単な手書きの署名だけです。 必要:ユーザーはWeChatミニプログラムに署名を手書きできるようになります。 コンポーネント化する必要があります。 効果 1. アイデアWeChat アプレットでは、キャンバス コンポーネントを使用して実装します。ユーザー入力をペンとして考えてみましょう。私たちが描く署名は多くの点から構成されます。しかし、単純な点では線をうまく形成できません。点は線で結ばれる必要もあります。以下は実装コードです。 2. 実装1. ページとスタイルwxml ここでのキャンバス コンポーネントは最新の使用法です。 <ビュークラス="ダッシュボックス"> <view class="btnList"> <van-button size="small" bind:click="clearCanvas">クリア</van-button> </ビュー> <view class="handCenter"> <キャンバス クラス="手書き" スクロールを無効にする="{{true}}" id="手書き" bindtouchstart="スケール開始" bindtouchmove="スケール移動" bindtouchend="スケール終了" bindtap="mouseDown" タイプ = "2d" > </キャンバス> </ビュー> </ビュー> wxss .btnリスト{ 幅: 95%; マージン:0 自動; } 。手書き{ 背景: #fff; 幅: 95%; 高さ:80vh; マージン:0 自動 } 2. 初期化カスタム コンポーネントで使用されるため、キャンバスを取得するときに this ポイントの問題に注意してください。 SelectorQuery の In メソッドを呼び出さない場合、この時点では親コンポーネントを指しているため、カスタム コンポーネント内のキャンバスを取得できません。 成分({ /** * コンポーネントの初期データ */ データ: { キャンバス名:'#handWriting', ctx:''、 キャンバス幅:0, キャンバスの高さ:0, 開始点:{ x:0, y:0, }, 選択色: '黒', lineColor: '#1A1A1A', // 色 lineSize: 1.5, // 複数に注意してください radius: 5, // 円の半径}, 準備ができて(){ キャンバス名を this.data.canvasName とします。 let query = wx.createSelectorQuery().in(this); //カスタムコンポーネントのSelectQueryオブジェクトを取得します。query.select(canvasName) .fields({ ノード: true, サイズ: true }) .exec((res) => { const キャンバス = res[0].node; const ctx = canvas.getContext('2d'); //デバイスのピクセル比を取得します。const dpr = wx.getSystemInfoSync().pixelRatio; // 手書きのずれを防ぐためにキャンバスのサイズを拡大縮小して設定します。canvas.width = res[0].width * dpr; キャンバスの高さをres[0]の高さに合わせる。 ctx.scale(dpr, dpr); ctx.lineJoin="丸め"; this.setData({ctx}); }); クエリ.select('.handCenter').boundingClientRect(rect => { console.log('rect', rect); this.setData({ キャンバス幅:rect.width、 キャンバスの高さ:rect.height }); }).exec(); }, //次のコードを省略します... }); 3. クリックすると成分({ //上記のコードを省略します... メソッド: { スケール開始(イベント){ event.type != 'touchstart' の場合は false を返します。 現在のポイントを{ x: イベント.タッチ[0].x、 y: イベント.タッチ[0].y } this.drawCircle(現在のポイント); this.setData({startPoint:currentPoint}); }, drawCircle(point){//ここではポイントを担当します。let ctx = this.data.ctx; ctx.beginPath(); ctx.fillStyle = this.data.lineColor; // 手書きの太さは円の大きさによって決まります ctx.arc(point.x, point.y, this.data.radius, 0 , 2 * Math.PI); ctx.fill(); ctx.closePath(); }, //次のコードを省略します... } }) 4. 署名成分({ //上記のコードメソッドを省略:{ 描画線(ソースポイント、ターゲットポイント){ ctx = this.data.ctx; とします。 ターゲットポイントに円を描画します。 ctx.beginPath(); ctx.strokeStyle = this.data.lineColor; ctx.lineWidth = this.data.radius * 2; //ここで 2 倍する理由は、線の太さが円の直径と等しくなるようにするためです。ctx.moveTo(sourcePoint.x, sourcePoint.y); ctx.lineTo(ターゲットポイント.x、ターゲットポイント.y); ctx.stroke(); ctx.closePath(); }, clearCanvas(){//キャンバスをクリアします let ctx = this.data.ctx; ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight); ctx.fillStyle = '#FFFFFF'; ctx.fill(); } } }) 結論この手書きの署名は、ビジネス上の緊急時のみに使用されます。最適化したい場合は、ペンストロークのシミュレーションと手書きのシミュレーションから始めることができます。解決する必要がある唯一の問題は、リアルタイムシミュレーション中の遅延です。 WeChatミニプログラムに簡単な手書き署名コンポーネントを実装する方法についての記事はこれで終わりです。WeChatミニプログラムの手書き署名コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: テキスト ファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)
>>: Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...
序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...
以下の HTML タグには、基本的に既存のタグがすべて含まれています。数分かけて 1 つずつ参照する...
目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
「downloadlaod」を直接クリックしてもダウンロードできない場合は、ここからダウンロードす...
目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...
1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....
この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...