WeChat ミニ プログラム キャンバスの詳細な紹介

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

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="cvsMove" が同時に存在する場合にのみ回避できます。移動に従うと、catchtouchmove は機能しません

上記の記述メソッド、ccvsMove と cvsMove は両方ともトリガーされ、ccvsMove が返されます。通常の touch

イベント

object

(pageX、clientX などを含む)

cvsMove は、ページ 10 を持たずに CanvasTouch イベント オブジェクトを返します。 context.getActions() によって返される配列は、出力するときに非常に便利です。 11. wx.drawCanvas、context.drawImage が電話上にある場合、内部の内容を理解することができますが、描画することはできません。コンピューター開発ツールで描かれた

12.wx.canvasToTemp

File

Path

公式ドキュメントには 1 行しかないことが判明しました

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

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

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