ホームページ >WeChat アプレット >ミニプログラム開発 >WeChatミニプログラムキャンバスの開発について

WeChatミニプログラムキャンバスの開発について

不言オリジナル: 2018-06-22 16:31:161913ブラウズ

この記事では主にWeChatミニプログラムwxcanvasの開発例と注意事項について紹介します。ここではWeChatキャンバスとH5のキャンバスを比較し、注意点を説明します。

テスト用の携帯電話は IPHONE6、開発者ツールバージョン 0.10.102800 です。開発者ツールバージョン 0.11.112301 についても同様です WeChat アプレットのキャンバスは h5 キャンバスとは異なります。以下、WeChat アプレットのキャンバスは wxcanvas と呼ばれます

以下は、私が少しテストした有用な情報です。辛抱強く見てください:

1.wxcanvas には、h5canvas のような幅と高さの属性や幅と高さのスタイルがありません。ボックスとして理解できるのはスタイルだけです。 2. wxcanvas を実際の H5canvas として考えるのではなく、幅と高さを変更するものも存在します。つまり、ここには再描画がありますが、具体的にはどのように実装すればよいのかわかりません。

3. wxcanvas のスタイルの幅と高さを変更しても、元のキャンバス上のサイズは変わりません。

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

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

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

6. 注意事項

wx.drawCanvas({
　　canvasId: &#39;target&#39;,
　　actions: context.getActions()
});

キャンバスはデフォルトでクリアされますので、クリアする必要性については考えないでください

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

注意、disable-scroll ="true" と bindingtouchmove="cvsMove" が同時に存在する場合のみ、Catchtouchmove は機能しません。メソッドでは、ccvsMove と cvsMove の両方がトリガーされます。ccvsMove は、pageX、clientX などを含む通常のタッチイベントオブジェクトを返します。

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

。 8.

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

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

9.キャンバスのスケール変換回転などのステータス、reserve: trueの場合、前回のステータスから継続します

10. context.getActions() によって返される配列は非常に便利です。これを印刷すると、配列を直接変更して描画アクションを変更できることがわかります。 .drawImageは携帯電話では描画できますが、パソコンの開発ツールでは描画できません

12.wx.canvasToTempFilePath

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

wx.canvasToTempFilePathであることが分かりました。 one オブジェクトには、wx.saveFile に似た、canvasID、success、fail、complete が含まれます。

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

以上が、皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

WeChatミニプログラムキャンバスの開発について

関連記事