WeChatミニプログラムのキャンバス開発時の注意点をご紹介します

小プログラム開発チュートリアルキャンバス開発の注意点をコラムで紹介

## 関連する学習の推奨事項:

ミニ プログラム開発チュートリアル

WeChat ミニ プログラム wxcanvas

テスト用電話機は IPHONE6 です。 、開発者ツール バージョン 0.10.102800。開発者ツール バージョン 0.11.112301

WeChat アプレットのキャンバスは、h5 キャンバスとは異なります。以下では、WeChat アプレットのキャンバスは wxcanvas と呼ばれます。

以下はすべて、私が少しずつテストした有益な情報です。辛抱強く読んでください:

1.wxcanvas には、h5canvas のような幅と高さの属性や幅と高さのスタイルがありません。ボックスとして理解できるスタイルのみを持っています;

2. wxcanvas を実際の H5canvas として考えるのではなく、p として考えてください。範囲を描画するものもあります。幅と高さ。表示されるか、ここに再描画がありますが、実装方法がわかりません;

3. wxcanvas スタイルの幅と高さを変更しても、元のキャンバス上の要素;

4. CSS 変換変換での拡大縮小では、元のキャンバス上の要素のサイズを変更することはできません

5. 公式声明: コンテキストは単なるコンテナです。メソッド呼び出しを記録し、描画動作の生成と記録に使用されます。コンテキストと の間には対応関係はなく、コンテキストで生成されたキャンバスの描画アクション配列は複数の に適用できます。

実際には、 context.getActions() の後、コンテキスト内の情報はクリアされます。それを再利用したい場合は、操作配列を保存する前に var temp=context.getActions() が必要です。 wx .drawcanvas;

6 で再利用できます。

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

はデフォルトでキャンバスをクリアします。クリアしたくない場合は、# が必要です。 ##

wx.drawCanvas({
  canvasId: 'target',
  actions: context.getActions(),
  reserve:true
});

7.《 重要なポイント 》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style=&#39;width:{{width}}px;height:{{height}}px&#39;></canvas>

disable-scroll="true" と bindingtouchmove="cvsMove" が同時に存在することに注意してくださいCatchtouchmove が機能しない

上記の書き方では、ccvsMove と cvsMove の両方がトリガーされます。

ccvsMove は、pageX、clientX、

cvsMove は、pageX、clientX なしで、canvasTouch イベント オブジェクトを返します。x、y

8.

wx.drawCanvas({
  canvasId: 'target',
  actions: [],
  reserve:false
});

のみがキャンバスとキャンバスのステータスをクリアできます

9. スケール変換回転およびキャンバスのその他の状態は、reserve:true の場合に継続されます 時間のステータス

10. context.getActions() によって返される配列は非常に便利です。印刷してみると中身がわかると思います 配列を直接変更して描画動作を変更することも可能です

# 11. 携帯電話上で wx.drawCanvas、context.drawImage を描画できる場合、ただし、コンピュータ開発ツールでは描画できません。

12.wx.canvasToTempFilePath

公式ドキュメントには本来 1 行しかありません

wx.canvasToTempFilePath パラメータは、 CanvasID、success、fail、complete を含むオブジェクト (wx.saveFile;

      wx.canvasToTempFilePath({
       canvasId: 'target',
       success: function success(res) {
        wx.saveFile({
         tempFilePath: res.tempFilePath,
         success: function success(res) {
          console.log('saved::' + res.savedFilePath);
         },
         complete: function fail(e) {
          console.log(e.errMsg);
         }
        });
       },
       complete: function complete(e) {
        console.log(e.errMsg);
       }
      });

に似ています)

以上がWeChatミニプログラムのキャンバス開発時の注意点をご紹介しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。