Skip to content

Commit

Permalink
canvas文本 自动换行 自适应
Browse files Browse the repository at this point in the history
  • Loading branch information
@richard1015
richard1015 committed May 14, 2018
1 parent 71f8132 commit 7452e9b
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 46 deletions.
117 changes: 74 additions & 43 deletions pages/contentShare/contentShare.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// pages/contentShare/contentShare.js
var apiHelper = require("../../utils/api.js");
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;
Expand All @@ -19,8 +19,7 @@ function findBreakPoint(text, width, context) {

return -1;
}
function breakLinesForCanvas(text, width, font) {
var context = wx.createCanvasContext('secondCanvas')
function breakLinesForCanvas(context, text, width, font) {
var result = [];
var breakPoint = 0;

Expand Down Expand Up @@ -69,76 +68,108 @@ Page({
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) {
var contentTitle = "2018年QS排名最新出炉，悉尼大学的毕业生就业能力在全澳大利亚排名第1";
var contentStr = "2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。";
this.drawInit({
title: contentTitle,
intro: contentStr
});
},
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)
}
})
}
})
},
/**
* 绘制图片
*/
drawInit: function (info) {
var contentTitle = info.title;
var contentStr = info.intro;
var that = this
var res = wx.getSystemInfoSync();
var canvasHeight = res.windowHeight;
var canvasWidth = res.windowWidth;


// 获取canvas的的宽 自适应宽（设备宽/750) px
var Rpx = canvasWidth / 375;
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('secondCanvas')

//设置行高
var lineHeight = 30;
var lineHeight = Rpx * 30;
//左边距
var paddingLeft = 20;
var paddingLeft = Rpx * 20;
//右边距
var padingRight = 20;
var padingRight = Rpx * 20;
//当前行高
var currentLineHeight = 0;
var currentLineHeight = Rpx * 20;

//设置标题
var resultTitle = breakLinesForCanvas('2018年QS排名最新出炉，悉尼大学的毕业生就业能力在全澳大利亚排名第1', canvasWidth - paddingLeft - padingRight, '20px PingFangSC-Regular');
context.font = "20px PingFangSC-Regular";
var resultTitle = breakLinesForCanvas(context, contentTitle, canvasWidth - paddingLeft - padingRight, `${(Rpx * 20).toFixed(0)}px PingFangSC-Regular`);
resultTitle.forEach(function (line, index) {
currentLineHeight = lineHeight * index + 30;
currentLineHeight += Rpx * 30;
context.fillText(line, paddingLeft, currentLineHeight);
});
//画分割线
currentLineHeight += 30;
context.setLineDash([6, 3.75]);
currentLineHeight += Rpx * 30;
context.setLineDash([Rpx * 6, Rpx * 3.75]);
context.moveTo(paddingLeft, currentLineHeight);
context.lineTo(canvasWidth - padingRight, currentLineHeight);
context.strokeStyle = '#cccccc';
context.stroke();
//设置内容
var result = breakLinesForCanvas('2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中。', canvasWidth - paddingLeft - padingRight, '16px PingFangSC-Regular');
//字体大小
context.font = "16px PingFangSC-Regular";
var result = breakLinesForCanvas(context, contentStr || '无内容', canvasWidth - paddingLeft - padingRight, `${(Rpx * 16).toFixed(0)}px PingFangSC-Regular`);
//字体颜色
context.fillStyle = '#666666';
result.forEach(function (line, index) {
context.fillText(line, paddingLeft, lineHeight * index + currentLineHeight + 30);
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,
//查看是否 有广告位 需绘制
apiHelper.paramData.cmd = "studyAbroadNews/getNewsAdvertising"; //cmd
apiHelper.paramData.param = {
pageCode: "introPage"
};
apiHelper.post((res) => {
if (res.State == 0 && res.Value) {
let imgUrl = res.Value.img;
wx.downloadFile({
url: imgUrl, //仅为示例，并非真实的资源
success: function (res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
}, fail: function (res) {
wx.hideLoading()
console.log(res)
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
context.drawImage(res.tempFilePath, paddingLeft, currentLineHeight + Rpx * 30, canvasWidth - paddingLeft - padingRight, Rpx * 200);
context.draw();
}
}
})
} else {
context.draw();
}
})
});
},
/**
* 生命周期函数--监听页面显示
Expand Down
2 changes: 1 addition & 1 deletion pages/contentShare/contentShare.wxss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

canvas {
border: 1px solid red;
/* border: 1px solid red; */
box-sizing: border-box;
}

Expand Down
2 changes: 1 addition & 1 deletion project.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"compileType": "miniprogram",
"libVersion": "1.9.94",
"appid": "wx1df3848032df8f34",
"projectname": "StudyNews",
"projectname": "GitHubNews",
"isGameTourist": false,
"condition": {
"search": {
Expand Down
9 changes: 8 additions & 1 deletion utils/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ const formatNumber = n => {
return n[1] ? n : '0' + n
}

function getLocalTime(days = 0, date = new Date()) {
var d = new Date(date);
d.setDate(d.getDate() + days);
var m = d.getMonth() + 1;
return d.getFullYear() + '-' + m + '-' + d.getDate();
}
module.exports = {
formatTime: formatTime
formatTime: formatTime,
getLocalTime: getLocalTime
}

0 comments on commit 7452e9b

Please sign in to comment.