WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

背景:

プロジェクト中、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を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Uniapp が WeChat アプレットの電子署名効果を実装 (デモ付き)
  • WeChat アプレットに手書き署名を実装するためのサンプル コード
  • 電子署名を実装するWeChatミニプログラム
  • WeChatアプレットキャンバスが署名機能を実装
  • WeChatミニプログラムが電子署名機能を実装
  • WeChatアプレットは電子署名を実装し、画像をエクスポートします
  • Java が WeChat アプレット「支払い検証署名に失敗しました」問題に遭遇した解決策
  • .NET WeChat アプレットのユーザーデータ署名検証および復号化コード
  • WeChatアプレットが横画面と縦画面の署名機能を実装

<<:  テキスト ファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)

>>:  Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

推薦する

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

Bootstrap が人気な 11 の理由

序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...

純粋な HTML タグにどれくらい精通していますか?

以下の HTML タグには、基本的に既存のタグがすべて含まれています。数分かけて 1 つずつ参照する...

Vue要素ツリーコントロールに点線を追加する詳細な説明

目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...

Nginxの現在の制限設定の詳細な説明

この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

Datagrip2020 が MySQL ドライバーのダウンロードに失敗する

「downloadlaod」を直接クリックしてもダウンロードできない場合は、ここからダウンロードす...

Vue の双方向イベントバインディング v-model の原理についての簡単な説明

目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...

MySQL の一般的な SQL ステートメントの概要

1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....

iframe に関するいくつかの発見と考察

この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...