找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序canvas,每日分享

[复制链接]
查看: 1356|回复: 76
最佳答案
0 

4

主题

4

帖子

100

积分

新人求带

积分
100
 楼主| 发表于 2018-11-27 10:28:03 | 显示全部楼层 |阅读模式
微信小程序目前仅支持分享给好友,暂不支持直接分享到朋友圈。针对分享到朋友圈这个问题,通常的做法是生成一张海报图片然后把图片分享到朋友圈。朋友圈到我们的小程序,通过长按图片识别图中小程序码实现。

1. 基本介绍

本代码库是微信小程序的一个每日分享案例。每天会中英文美句,推荐给大家,可以点击保存图片到本地,然后分享到朋友圈(小程序暂不支持直接分享到朋友圈)。主要用到的技术点就是 canvas 画图。

gh_4d67d640e67d_430.jpg

欢迎微信扫码体验,有任何问题可以提意见反馈。谢谢!

效果图如下:小程序预览图

preview20181117.jpeg

2. 遇到的问题

本小程序开发中,逻辑并不复杂。相对难处理一点就是中英文换行的问题。针对中英文换行的问题,我实现了一下换行逻辑,代码如下:
  1.   /**
  2.    * 文本转换为数组,数组里面分别是每行的文本内容,支持英文分行
  3.    *
  4.    * ctx Context
  5.    * txt 待换行的文本
  6.    * width 需要显示文本的最大宽度
  7.    * isEng 是否是英文
  8.    */
  9.   txt2arr: function (ctx, txt, width, isEng) {
  10.     var chr = txt.split(isEng ? " " : "");
  11.     var temp = "";
  12.     var row = [];

  13.     for (var i = 0; i < chr.length; i++) {
  14.       var cur = chr[i];
  15.       var tempWidth = ctx.measureText(temp).width;
  16.       var curWidth = ctx.measureText(cur).width;
  17.       // 需要考虑英文换行问题
  18.       if (tempWidth + curWidth < width) {
  19.         temp += cur;
  20.         temp += (isEng ? " " : "");
  21.       } else {
  22.         row.push(temp);
  23.         temp = "";
  24.         temp += cur;
  25.         temp += (isEng ? " " : "");
  26.       }
  27.     }

  28.     row.push(temp);
  29.     return row;
  30.   }
复制代码

上面方法是把字符串处理为字符串数组,数组每个值代表一行,这里是换行核心逻辑,但不是全部逻辑,全部逻辑见核心代码调用。

3. 核心代码

核心的 canvas 画图逻辑代码如下:
  1.   drawShare: function (imgPath, sRes) {
  2.     var ctx = wx.createContext()
  3.     var screenWidth = wx.getSystemInfoSync().windowWidth
  4.     var screenHeight = wx.getSystemInfoSync().screenHeight
  5.     // 小程序码宽度
  6.     var qrWidth = 80
  7.     // 小程序码边距
  8.     var qrMargin = screenHeight * 0.02
  9.     // 小程序码路径
  10.     var qrPath = '../../img/ic_wx_mini.jpg'

  11.     // 画背景图
  12.     // ctx.drawImage(this.data.background, 0, 0, screenWidth, screenHeight - 30)
  13.     // ctx.save()

  14.     // 画白色背景
  15.     ctx.setFillStyle("#FFFFFF")
  16.     ctx.fillRect(0, 0, screenWidth, screenHeight)
  17.     ctx.save()

  18.     // 画右上角几何图形
  19.     ctx.setLineWidth(1)
  20.     ctx.setStrokeStyle("#079dd8")
  21.     ctx.setFillStyle("#079dd8")
  22.     ctx.beginPath()
  23.     ctx.moveTo(screenWidth * 100 / 640, 0)
  24.     ctx.lineTo(screenWidth - screenWidth * 100 / 640, screenHeight * 140 / 1000)
  25.     ctx.lineTo(screenWidth, screenHeight * 110 / 1000)
  26.     ctx.lineTo(screenWidth, 0)
  27.     ctx.fill()
  28.     ctx.stroke()
  29.     ctx.closePath()
  30.     ctx.save()

  31.     // 画日期
  32.     var date = new Date()
  33.     ctx.setFontSize(40)
  34.     ctx.setFillStyle("#FF8700")
  35.     ctx.fillText('' + date.getDate(), 15, 65)
  36.     ctx.setFontSize(20)
  37.     ctx.fillText('' + (date.getMonth() + 1) + '.' + date.getFullYear(), 70, 65)
  38.     ctx.save()

  39.     // 画每日一句-英文
  40.     ctx.setFontSize(22)
  41.     ctx.setFillStyle("#BBBBBB")
  42.     console.log("shareRes : " + sRes);
  43.     var arr = this.txt2arr(ctx, sRes.content, screenWidth * 0.9, true)
  44.     // console.log(arr)
  45.     for (var i = 0; i < arr.length; i++) {
  46.       ctx.fillText('' + arr[i], 15, screenHeight * 145 / 1000 + (i + 1) * 24)
  47.     }
  48.     ctx.save()

  49.     // 画每日一句-中文
  50.     ctx.setFontSize(14)
  51.     ctx.setFillStyle("#7D7D7D")
  52.     // ctx.fillText(sRes.note, 15, screenHeight * 375 / 1000)
  53.     var arrZH = this.txt2arr(ctx, sRes.note, screenWidth * 0.9, false)
  54.     // console.log(arrCH)
  55.     for (var k = 0; k < arrZH.length; k++) {
  56.       ctx.fillText('' + arrZH[k], 15, screenHeight * 345 / 1000 + (k + 1) * 16)
  57.     }
  58.     ctx.save()

  59.     // 画配图
  60.     var picY = screenHeight * 0.4
  61.     var picHeight = screenWidth * 580 / 938
  62.     ctx.drawImage(this.data.background, 0, picY, screenWidth, picHeight)
  63.     ctx.save()

  64.     // 画渐变
  65.     var grd = ctx.createLinearGradient(screenWidth / 2, picY - 2, screenWidth / 2, picY * 1.3);
  66.     grd.addColorStop(0, 'rgba(255, 255, 255, 1)')
  67.     grd.addColorStop(1, 'rgba(255, 255, 255, 0)')
  68.     ctx.setFillStyle(grd)
  69.     ctx.fillRect(0, picY - 2, screenWidth, picHeight / 3)
  70.     ctx.save()

  71.     // 画底部梯形
  72.     var blueHeight = picY + picHeight;
  73.     ctx.setLineWidth(5)
  74.     ctx.setStrokeStyle("#079dd8")
  75.     ctx.setFillStyle("#079dd8")
  76.     ctx.beginPath()
  77.     ctx.moveTo(0, blueHeight - screenWidth * 70 / 640)
  78.     ctx.lineTo(screenWidth, blueHeight)
  79.     ctx.lineTo(screenWidth, screenHeight)
  80.     ctx.lineTo(0, screenHeight)
  81.     ctx.lineTo(0, blueHeight - screenWidth * 70 / 640)
  82.     ctx.fill()
  83.     ctx.stroke()
  84.     ctx.closePath()
  85.     ctx.save()

  86.     // 画小编的话
  87.     ctx.setFontSize(12)
  88.     ctx.setFillStyle("#FFFFFF")
  89.     var arr2 = this.txt2arr(ctx, sRes.translation, screenWidth * 0.6)
  90.     console.log(arr)
  91.     var startHeight = blueHeight * 1.04
  92.     for (var j = 0; j < arr2.length; j++) {
  93.       ctx.fillText('' + arr2[j], 15, startHeight + j * 18)
  94.     }
  95.     ctx.save()

  96.     // 画小程序码
  97.     ctx.setLineWidth(1)
  98.     ctx.beginPath()
  99.     ctx.arc(screenWidth - qrWidth / 2 - qrMargin, screenHeight - qrWidth / 2 - qrMargin, qrWidth / 2, 0, 2 * Math.PI)
  100.     ctx.setStrokeStyle("#ffff00")
  101.     ctx.stroke()
  102.     ctx.clip()
  103.     ctx.drawImage(qrPath, screenWidth - qrWidth - qrMargin, screenHeight - qrWidth - qrMargin, qrWidth, qrWidth)
  104.     ctx.save()

  105.     wx.drawCanvas({
  106.       canvasId: 'canvas',
  107.       actions: ctx.getActions()
  108.     })
  109.   }
复制代码
回复

使用道具 举报

最佳答案
0 

0

主题

21

帖子

224

积分

等待验证会员

积分
224
发表于 2018-11-27 14:31:42 | 显示全部楼层
微信小程序canvas,每日分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

21

帖子

224

积分

等待验证会员

积分
224
发表于 2018-11-27 14:31:50 | 显示全部楼层
微信小程序canvas,每日分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

102

积分

新人求带

积分
102
发表于 2018-11-27 15:04:42 | 显示全部楼层

很好,很喜欢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

701

帖子

1万

积分

S2

积分
11456
发表于 2018-11-27 17:21:47 | 显示全部楼层
谢谢分享,程序不错
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

397

帖子

1562

积分

专家路上

积分
1562
发表于 2018-11-27 19:22:52 | 显示全部楼层
4544444444444464
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

397

帖子

1562

积分

专家路上

积分
1562
发表于 2018-11-27 19:22:57 | 显示全部楼层
3224444444442
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

397

帖子

1562

积分

专家路上

积分
1562
发表于 2018-11-27 19:23:01 | 显示全部楼层
5222222222244444444444
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

397

帖子

1562

积分

专家路上

积分
1562
发表于 2018-11-27 19:23:05 | 显示全部楼层
225555555552
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

397

帖子

1562

积分

专家路上

积分
1562
发表于 2018-11-27 19:23:10 | 显示全部楼层
1333333333333341
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com