Научите создавать украшения изображение | Applet Семьдесят изменить холст, чтобы нарисовать флаг Аватар

Вчера круг друзей есть « Пожалуйста , дайте мне флаг @ официальный микро-канал » скребок, хотя это неверно, но с другой точки зрения, чтобы понять, как достичь более интересных.

1, холст

Это должно было упомянуть апплета API холст , холст H5 также есть, но нет возможности , была использована ранее, это просто воспользовался возможностью , чтобы испытать воды. 

Иди домой ночью заглянула под официальными документами, онлайн поиск некоторые аналогичные функции для достижения, в конце концов написал демо, в основном в состоянии сделать предварительный рисунок флага.

Конечно, если вы хотите нарисовать другую картину позже кулон, подвеска нужно только изменить материал, чтобы назначить встречу заранее, чтобы помочь вам настроить в этом году рождественские шляпы.

 

2, код

Процесс реализации делится на следующие этапы:

1, новый холст доска для рисования

2. Нарисуйте изображение в качестве фона (демо в настоящее время загружать свои собственные аватар решений)

3. Нарисуйте флаг границы

4, сохранить телефонный альбом (авторизоваться)

Адо, непосредственно по коду:

// wxml页面
 < вид класс = "контейнер" > 
  <! - 头像绘制区域-> 
  < холст холст-ID = "myAvatar" класс = "холст" > </ холст > 

  <! - 按钮-> 
  < кнопка класса = "БТН-сохранить" bindtap = "загрузить" >上传头像</ кнопка > 
  < кнопка отключена = "{{!}} сохранить" класс = "БТН-сохранить" bindtap = "saveImg" >Сохранить в альбом </ Кнопка > 
</вид >

//部分功能JS 
//绘制头像背景
drawAvatar () { 
  вар , что это =; 
  вар р = 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',  
    успеха (Рез) {
      wx.saveImageToPhotosAlbum ({ 
        Filepath: res.tempFilePath, 
        успех (Рез) { 
          wx.showToast ({ 
            название: 'Пожеланий成功' 
          }) 
        }, 
        терпят неудачу (разрешение) { 
          wx.showToast ({ 
            название: "取消Пожеланий ... , 
            значок: 'Нет' 
          }) 
        } 
      }) 
    } 
  }) 
}

 

3, окончательный

демо закончена, моча небольшая программа, как бы это не столкнуть его? Узнайте правду о мои слезы почти падать, но это не обычная яма яма, я не получил долго ждал, чтобы решить.

Что такое конкретное сообщение апплета область ямы были объявлены, заинтересованы можете обсудить, как обращаться сообщение с датой еще гигантская яма.

Ни один государственный, «Я Джиу Ци» кулисы ответить «Аватар», чтобы получить  демо исходный код , не забудьте заполнить отверстие рытье, я тоже на юге.

 

 

 

 

Рекомендуемая литература:

Перейти апплет Hong восемьдесят-одна яма массового участия