WeChatミニプログラムキャンバスの開発例と注意点

WeChat アプレット wxcanvas

テスト電話は 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: 'target',
　　actions: context.getActions()
});

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

上記の記述方法では、両方の ccvsMove がトリガーされます。

ccvsMove は、pageX、clientX などを含む通常のタッチ イベント オブジェクトを返します。

cvsMove 返される CanvasTouch イベント オブジェクトにはページがありません。最後の状態から継続されます

10。 ) を印刷すると、配列を直接変更して描画アクションを変更できることがわかります

11.wx。携帯電話では描画できませんが、

12.canvasToTempFilePath

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

wx.canvasToTempFilePath パラメータは、canvasID、success を含むオブジェクトであることがわかります。 、失敗、完了、wx.saveFile に似ています。

その他の WeChat ミニ プログラム キャンバスの開発例と関連記事については、PHP 中国語 Web サイトに注目してください。