小規模プログラム開発におけるwxcanvasの詳しい解説

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

WeChatアプレットのキャンバス非h5キャンバスには多くの違いがあります。以下、WeChatアプレットのキャンバスはwxcanvasと呼ばれます

以下。小さなテストからの有益な情報を見てください:

1.wxcanvas は、h5canvas とは異なり、width 属性と height 属性、および幅と高さのスタイルを持ちません。ボックスとして理解できるのはスタイルだけです。

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 は、ページなしの CanvasTouch イベント オブジェクトを返します。 context.getActions() によって返される配列は、出力すると非常に便利です。配列を直接変更して描画アクションを変更できることがわかりました

11. wx.drawCanvas、context.drawImage が携帯電話で描画できるようになったとき、私はそれを描画できませんでした。コンピューター開発ツール 12.wx.canvasToTempFilePath

公式ドキュメントには 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>

【関連する推奨事項】

1.

WeChat ミニ プログラムについての意見を共有します

2. HTML5 キャンバスと JavaScript を使用して描画プログラムのサンプル コードを作成します

3. WeChat ミニプログラム プログラムの将来と開発

4. ミニプログラム開発におけるタブの簡単な実装例

以上が小規模プログラム開発におけるwxcanvasの詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。