装飾品の画像を作成することを教える|アプレット70は、フラグアバターを描画するキャンバスを変更

友人の昨日の円は「である私の公式マイクロチャンネル@フラグ与えてくださいそれが偽であるが、別の観点から、より興味深い達成する方法を見つけ出すためにも、スクレーパーを」。

1、キャンバス

これは、アプレットAPIを言及していたキャンバスを H5もあるキャンバス、しかし、機会が以前に使用されていない、これはただの水をテストする機会を得ました。 

夜に家に帰る最後にフラグの予備的な絵を描くことができ、基本的には、デモを書かれ、達成するためにいくつかの類似の機能を検索し、オンライン、公式文書の下に見えました。

あなたはペンダントと、後で別の絵を描きたい場合はもちろん、ペンダントはあなたが今年のクリスマスの帽子をカスタマイズ支援するために、事前にアポイントを作るために材料を変更する必要があります。

 

図2に示すように、コード

実装プロセスは、以下のステップに分かれています。

1、新しいキャンバスの描画ボード

2.背景として絵を描く(デモは現在、自分のアバター作りをアップロードしています)

3.ボーダーフラグを描きます

図4は、(認可される)電話アルバムに保存します

直接コードでADO、:

// wxml页面
 < ビュークラス= "コンテナ" > 
  <! - 头像绘制区域- > 
  < キャンバスキャンバス-ID = "myAvatar" クラス= "キャンバス" > </ キャンバス> 

  <! - 按钮- > 
  < ボタンクラス= "保存BTN" bindtap = "アップロード" >上传头像</ ボタン> 
  < ボタンを無効化"{{!}}保存" = クラスは= "BTN-保存" bindtap = "saveImg" >アルバムに保存</ ボタン> 
</ビュー>
//部分功能JS 
//绘制头像背景
drawAvatar(){ 
  この= VAR。
  VARのP = that.data。
  コンテキスト= wx.createCanvasContext(この'myAvatar')。
  context.drawImage(p.src、0、0、256、256)。
  (真)context.draw 
  context.save(); 
  context.translate(p.hat.x、p.hat.y)
  context.scale(p.hat.b、p.hat.b)
  context.rotate(p.hat.rotate *にMath.PI / 180)
  コンテキスト。 drawImage(p.hat.url、0、0、p.hat.w、p.hat.h)
  context.draw(真)
  this.setData({ 
    保存:真
  })
} 

//保存图片
saveImg(){ 
  wx.canvasToTempFilePath({ 
    canvasId: 'myAvatar'、
    成功(RES){ 
      wx.saveImageToPhotosAlbum({
        filePathに:res.tempFilePath、
        成功(RES){ 
          wx.showToast({ 
            タイトル: '正常に保存' 
          })
        }、
        失敗(RES){ 
          wx.showToast({ 
            タイトル: 'キャンセル保存...'、
            アイコン:「なし' 
          })
        } 
      })
    } 
  })
}

 

3、最終

完成デモ、尿の小さなプログラムは、どのようにそれを戦わせることができませんでしたか?私の涙はほとんど落ちるの真実を発見するが、これは通常のピットピットではないですが、私は解決するのに長い時間を待っていませんでした。

発表された特定のメッセージアプレットのピットエリアとは何ですか、興味を持って歓迎は転記日付にメッセージに対処する方法を議論するために、まだ巨大なピットです。

いいえ公共、取得するための舞台裏の返信「アバター」「私は柔術チーだ」  デモのソースコードは、穴掘り、あまりにも私の南を埋めることを忘れませんでした。

 

 

 

 

推奨読書:

質量参加のジャンプアプレット香港八十から一ピット

おすすめ

転載: www.cnblogs.com/msunh/p/11587120.html