zoukankan      html  css  js  c++  java
  • 微信小程序 | canvas绘图

    1、新的尺寸单位 rpx

      rpx(responsive pixel): 可以根据屏幕宽度进行自适应。

      规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

      设备 rpx换算px (屏幕宽度/750); px换算rpx (750/屏幕宽度)

    2、小程序canvas总结

      小程序绘制的单位是px, 基础知识点请参考文档 ;

      canvas中存在一个坐标系,二维的,左上角坐标系(0,0);

      小程序 canvas 层级在视图中是最高的,高于一般的<view></view>, 覆盖 canvas 的层级用 cover-view

      canvas 绘制在线图片链接,需要匹配合法域名;且需要先使用 wx.downloadFile({}) 下载,生成图片的临时路径之后再绘制;

      下边是封装的 导出高清图,并且显示预览图片的使用场景,  

      1 const qr = require('../qrcode')
      2 
      3 /**
      4  * system.windowWidth 可使用窗口宽度
      5  * system.windowHeight 可使用窗口高度
      6  */
      7 const system = wx.getSystemInfoSync()
      8 const w = 562
      9 const h = 1000
     10 
     11 function rpx(n, sizeType) {
     12   if (sizeType === 'save') {
     13     return n
     14   } else {
     15     return n * system.windowWidth / 750
     16   }
     17 }
     18 
     19 function downloadImg (link) {
     20   return new Promise((resolve, reject) => {
     21     wx.downloadFile({
     22       url: link,
     23       success: res => {
     24         if (res.statusCode === 200) {
     25           resolve(res.tempFilePath)
     26         }
     27       }
     28     })
     29   })
     30 }
     31 
     32 module.exports = {
     33   /**
     34    * @param data
     35    *   data.title
     36    *   data.price
     37    *   data.unit
     38    *   data.url
     39    * @param option.sizeType 显示: display, 保存: save
     40    */
     41   draw (ctx, data, option = {}) {
     42     var sizeType = option.sizeType === 'save' ? 'save' : 'display'
     43     return new Promise((resolve, reject) => {
     44       
     45       var bg_url = 'https://static001-test.geekbang.org/resource/image/c5/63/c54a6fde89dd9897a321a070a0555363.jpg'
     46       var avatar_url = 'https://static001-test.geekbang.org/resource/image/35/65/35012b5a4b7576faaa1e565da142a565.png'
     47       var column_url = 'https://static001-test.geekbang.org/resource/image/35/65/35012b5a4b7576faaa1e565da142a565.png'
     48       var code_url ='https://static001-test.geekbang.org/resource/image/e6/07/e618015af89d6ffcf37a6d148dff0b07.png'
     49 
     50       var bg_path = ''
     51       var avarar_path = ''
     52       var col_path = ''
     53       var code_path = ''
     54 
     55       downloadImg(bg_url) // 下载背景
     56       .then((path)=> {
     57         bg_path = path
     58         downloadImg(avatar_url) // 下载头像
     59         .then((path) => {
     60           avarar_path = path
     61           downloadImg(column_url) // 下载专栏图片
     62           .then((path) => {
     63             col_path = path
     64             downloadImg(code_url) // 下载小程序菊花图
     65             .then((path) => {
     66               code_path = path
     67               ctx.beginPath()
     68               ctx.drawImage(bg_path, 0, 0, rpx(w, sizeType), rpx(h, sizeType)) // 画 背景
     69               ctx.save()
     70               ctx.arc( rpx(35 + 75/2,sizeType), rpx(44 +75/2, sizeType), rpx(75/2, sizeType), 0, 2 * Math.PI)
     71               ctx.clip()
     72               ctx.drawImage(avarar_path, rpx(35,sizeType), rpx(44, sizeType), rpx(75, sizeType), rpx(75, sizeType)) // 画 头像
     73               ctx.restore()
     74               ctx.drawImage(col_path, rpx(58,sizeType), rpx(305, sizeType), rpx(152, sizeType), rpx(152, sizeType)) // 画 专栏封面
     75               ctx.drawImage(code_path, rpx(219,sizeType), rpx(710, sizeType), rpx(129, sizeType), rpx(129, sizeType)) // 画 菊花码
     76               // 基础
     77               ctx.setTextAlign('left')
     78               ctx.setTextBaseline('normal')
     79               // 昵称 |<--
     80               ctx.setFillStyle('#Af7628')
     81               ctx.setFontSize(rpx(22, sizeType))
     82               ctx.fillText('小原-极客时间', rpx(118,sizeType), rpx(81, sizeType)) // 微信bug 参数分别是 ‘string’ 左下角x坐标 左下y坐标
     83               // 专栏名称 |<--
     84               ctx.setFontSize(rpx(28, sizeType))
     85               ctx.setFillStyle('#916a34')
     86               ctx.fillText('左耳听风', rpx(227,sizeType), rpx(332, sizeType))
     87               // 作者信息 |<--
     88               ctx.setFontSize(rpx(19, sizeType))
     89               ctx.setFillStyle('#ad936f')
     90               ctx.fillText('陈皓 网名“左耳朵耗子”,资深...', rpx(227,sizeType), rpx(363, sizeType), rpx(296, sizeType))
     91               // 学习人数 |<--
     92               ctx.setFontSize(rpx(18, sizeType))
     93               ctx.setFillStyle('#ad936f')
     94               ctx.fillText('204人已参加学习', rpx(227,sizeType), rpx(390, sizeType), rpx(263, sizeType))
     95               // 还差 2 人 |<--
     96               ctx.setFontSize(rpx(32, sizeType))
     97               ctx.setFillStyle('#B67e34')
     98               ctx.fillText('2', rpx(207,sizeType), rpx(599, sizeType), rpx(31, sizeType))
     99               // 原价  -->|
    100               ctx.setTextBaseline('bottom')
    101               ctx.setTextAlign('right')
    102               ctx.setFontSize(rpx(17,sizeType))
    103               ctx.setFillStyle('#cd9e5e')
    104               ctx.fillText('原价 ¥299', rpx(489, sizeType), rpx(422, sizeType), rpx(115, sizeType))
    105               // 现价  -->|
    106               ctx.setFontSize(rpx(32,sizeType))
    107               ctx.setFillStyle('#cd9e5e')
    108               ctx.setTextBaseline('bottom')
    109               ctx.fillText('¥199', rpx(489,sizeType), rpx(459, sizeType), rpx(118, sizeType))
    110               // 状态 -->|<--
    111               ctx.setTextAlign('center')
    112               ctx.setFontSize(rpx(35,sizeType))
    113               ctx.setFillStyle('#9d5c00')
    114               ctx.fillText('拼团进行中', rpx(w,sizeType) / 2, rpx(239, sizeType))
    115               
    116               ctx.draw()
    117               resolve()
    118             })
    119           })
    120         })
    121       })
    122       
    123     })
    124   },
    125   /**
    126    * @param option.sizeType 显示: display, 保存: save
    127    */
    128   getSize (data, option = {}) {
    129     var sizeType = option.sizeType === 'save' ? 'save' : 'display'
    130     return { rpx(w, sizeType), height: rpx(h, sizeType)}
    131   },
    132   getInfo () {
    133     return {
    134       btnName: '保存分享海报'
    135     }
    136   }
    137 }
    View Code
  • 相关阅读:
    POJ 2923 Relocation (状态压缩,01背包)
    HDU 2126 Buy the souvenirs (01背包,输出方案数)
    hdu 2639 Bone Collector II (01背包,求第k优解)
    UVA 562 Dividing coins (01背包)
    POJ 3437 Tree Grafting
    Light OJ 1095 Arrange the Numbers(容斥)
    BZOJ 1560 火星藏宝图(DP)
    POJ 3675 Telescope
    POJ 2986 A Triangle and a Circle
    BZOJ 1040 骑士
  • 原文地址:https://www.cnblogs.com/wuhaoquan/p/9090335.html
Copyright © 2011-2022 走看看