微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News

微信IDE演示代码https://developers.weixin.qq.com/s/WCkpsTm97M7p

function findBreakPoint(text, width, context) {
var min = 0;
var max = text.length - 1;
while (min <= max) {
var middle = Math.floor((min + max) / 2);
var middleWidth = context.measureText(text.substr(0, middle)).width;
var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
return middle;
}
if (middleWidth < width) {
min = middle + 1;
} else {
max = middle - 1;
}
} return -1;
}
function breakLinesForCanvas(context, text, width, font) {
var result = [];
if (font) {
context.font = font;
}
var textArray = text.split('\r\n');
for (let i = 0; i < textArray.length; i++) {
let item = textArray[i];
var breakPoint = 0;
while ((breakPoint = findBreakPoint(item, width, context)) !== -1) {
result.push(item.substr(0, breakPoint));
item = item.substr(breakPoint);
}
if (item) {
result.push(item);
}
}
return result;
}
Page({ /**
* 页面的初始数据
*/
data: {
id: 0,
info: {}
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#010101',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
console.log(options)
let id = options.id;
let info ={
"title":"asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊asdasd啊啊啊",
"intro":"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"
};
self.setData({
info
});
self.drawInit(info);
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) { },
/**
* 绘制图片
*/
drawInit: function (info) {
var contentTitle = info.title;
var contentStr = info.intro;
var that = this
var res = wx.getSystemInfoSync();
var canvasWidth = res.windowWidth;
// 获取canvas的的宽 自适应宽(设备宽/750) px
var Rpx = (canvasWidth / 375).toFixed(2);
//画布高度 -底部按钮高度
var canvasHeight = res.windowHeight - Rpx * 59;
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('secondCanvas')
//设置行高
var lineHeight = Rpx * 30;
//左边距
var paddingLeft = Rpx * 20;
//右边距
var paddingRight = Rpx * 20;
//当前行高
var currentLineHeight = Rpx * 20;
//背景颜色默认填充
context.fillStyle = "#f8f8f8";
context.fillRect(0, 0, canvasWidth + Rpx * 2, canvasHeight);
//标题内容颜色默认
context.fillStyle = "#fff";
//高度减去 图片高度
context.fillRect(Rpx * 15, Rpx * 15, canvasWidth - Rpx * 30, canvasHeight);
//设置标题
var resultTitle = breakLinesForCanvas(context, contentTitle, canvasWidth - paddingLeft - paddingRight, `${(Rpx * 20).toFixed(0)}px PingFangSC-Regular`);
//字体颜色
context.fillStyle = '#000000';
resultTitle.forEach(function (line, index) {
currentLineHeight += Rpx * 30;
context.fillText(line, paddingLeft, currentLineHeight);
});
//画分割线
currentLineHeight += Rpx * 15;
context.setLineDash([Rpx * 6, Rpx * 3.75]);
context.moveTo(paddingLeft, currentLineHeight);
context.lineTo(canvasWidth - paddingRight, currentLineHeight);
context.strokeStyle = '#cccccc';
context.stroke();
//设置内容
var result = breakLinesForCanvas(context, contentStr || '无内容', canvasWidth - paddingLeft - paddingRight, `${(Rpx * 16).toFixed(0)}px PingFangSC-Regular`);
console.log(result);
//字体颜色
context.fillStyle = '#666666';
result.forEach(function (line, index) {
currentLineHeight += Rpx * 30;
context.fillText(line, paddingLeft, currentLineHeight);
}
context.draw();
},
saveImg: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'secondCanvas',
fileType: 'jpg',
success: function (res) {
console.log(res.tempFilePath) // 返回图片路径
wx.showLoading({
title: '保存中...',
mask: true
});
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
}, fail: function (res) {
wx.hideLoading()
console.log(res)
}
})
}
})
}
})

微信小程序 canvas 字体自动换行(支持换行符)的更多相关文章

  1. 微信小程序 canvas 文字自动换行

    Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize() ctx.setFillStyle('#9E7240') ctx.textAlign= ...

  2. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  3. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  4. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 微信小程序使用字体图标

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网 ...

  7. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  8. 微信小程序 使用字体图标 iconfont

    第一步:在阿里巴巴矢量图标库下载需要的图标 地址:https://www.iconfont.cn/ 添加至项目 第二步:打开在线代码 将在线代码复制 第三步:点击下载至本地下载图标 将下载的downl ...

  9. 微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

    微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...

随机推荐

  1. net spider(python 网络爬虫)

    # -*- coding: utf-8 -*- import urllib2,cookielib from bs4 import BeautifulSoup url="http://www. ...

  2. Long类型参数传到前端精度丢失的解决方案

        由于公司数据库表的id是利用雪花算法生成的,所以实体类里面定义的数据类型为Long.但是这个数据传到前端时,发生了精度丢失的现象.本文记录了从java后端的角度如何解决这个精度丢失的问题,便于 ...

  3. 响应式卡片抽奖插件 CardShow

    GitHub: https://github.com/nzbin/CardShow/ Demo: https://nzbin.github.io/CardShow/ 前言 这个小项目(卡片秀)是一个卡 ...

  4. Java过滤掉字符串中的html标签、style标签、script标签

    使用正则表达式 import java.util.regex.Matcher; import java.util.regex.Pattern; public class HTMLSpirit{ pub ...

  5. iOS UICollectionView 在滚动时停在某个item位置上

    方法一:实现UIScrollView的代理,然后实现下面这个方法 #pragma mark - UIScrollViewDelegate//预计出大概位置,经过精确定位获得准备位置- (void)sc ...

  6. Django之用户上传文件的参数配置

    Django之用户上传文件的参数配置 models.py文件 class Xxoo(models.Model): title = models.CharField(max_length=128) # ...

  7. 爬虫——selenium基础

    Selenium,自动化浏览器技术.主要用于web应用自动测试和自动完成web基本任务管理.官方网站:https://selenium-python.readthedocs.io/getting-st ...

  8. Column 'parent_id' specified twice

    Hibernate Column 'parent_id' specified twice问题解决--insertable = false, updatable = false的使用 - shendeg ...

  9. [转帖]关于CPU Cache -- 程序猿需要知道的那些事

    关于CPU Cache -- 程序猿需要知道的那些事 很早之前读过作者的blog 记得作者在facebook 工作.. 还写过mysql相关的内容 大拿 本文将介绍一些作为程序猿或者IT从业者应该知道 ...

  10. [转帖]AMOLED的技术和OLED有哪些联系和区别

    AMOLED的技术和OLED有哪些联系和区别 https://display.ofweek.com/2018-06/ART-11000-2300-30243226.html 硬件资料 导读: ?虽然L ...