|
@@ -45,11 +45,33 @@ export default {
|
|
|
return map[this.dimensionCode] || { main: '#F97316', dark: '#EA580C', light: '#FFF7ED' }
|
|
return map[this.dimensionCode] || { main: '#F97316', dark: '#EA580C', light: '#FFF7ED' }
|
|
|
},
|
|
},
|
|
|
drawPoster() {
|
|
drawPoster() {
|
|
|
|
|
+ var self = this
|
|
|
|
|
+ uni.createSelectorQuery().in(this)
|
|
|
|
|
+ .select('#contentPosterCanvas')
|
|
|
|
|
+ .boundingClientRect(function(rect) {
|
|
|
|
|
+ var scaleX = 1
|
|
|
|
|
+ var scaleY = 1
|
|
|
|
|
+ if (rect && rect.width && rect.height) {
|
|
|
|
|
+ scaleX = rect.width / 500
|
|
|
|
|
+ scaleY = rect.height / 800
|
|
|
|
|
+ }
|
|
|
|
|
+ self._renderPoster(scaleX, scaleY)
|
|
|
|
|
+ })
|
|
|
|
|
+ .exec()
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ _renderPoster(scaleX, scaleY) {
|
|
|
var ctx = uni.createCanvasContext('contentPosterCanvas', this)
|
|
var ctx = uni.createCanvasContext('contentPosterCanvas', this)
|
|
|
var w = 500
|
|
var w = 500
|
|
|
var h = 800
|
|
var h = 800
|
|
|
var colors = this.getColors()
|
|
var colors = this.getColors()
|
|
|
|
|
|
|
|
|
|
+ // 画布 CSS 用 rpx,实际像素随设备变化(375px 屏约 310x496),而绘制按 500x800 设计坐标;
|
|
|
|
|
+ // 不缩放坐标系时右侧/底部内容(含二维码 y≈552-702)会被裁剪出画布,导致海报显示不全。
|
|
|
|
|
+ if (scaleX !== 1 || scaleY !== 1) {
|
|
|
|
|
+ ctx.scale(scaleX, scaleY)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
|
|
var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
|
|
|
gradient.addColorStop(0, colors.main)
|
|
gradient.addColorStop(0, colors.main)
|
|
|
gradient.addColorStop(0.55, colors.dark)
|
|
gradient.addColorStop(0.55, colors.dark)
|
|
@@ -246,12 +268,7 @@ export default {
|
|
|
var lineCount = 0
|
|
var lineCount = 0
|
|
|
for (var i = 0; i < chars.length; i++) {
|
|
for (var i = 0; i < chars.length; i++) {
|
|
|
var testLine = line + chars[i]
|
|
var testLine = line + chars[i]
|
|
|
- var testWidth = 0
|
|
|
|
|
- if (ctx.measureText) {
|
|
|
|
|
- try { testWidth = ctx.measureText(testLine).width } catch (e) { testWidth = testLine.length * 18 }
|
|
|
|
|
- } else {
|
|
|
|
|
- testWidth = testLine.length * 18
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ var testWidth = this._textWidth(ctx, testLine)
|
|
|
if (testWidth > maxWidth && line.length > 0) {
|
|
if (testWidth > maxWidth && line.length > 0) {
|
|
|
ctx.fillText(line, x, y + lineCount * lineHeight)
|
|
ctx.fillText(line, x, y + lineCount * lineHeight)
|
|
|
line = chars[i]
|
|
line = chars[i]
|
|
@@ -259,10 +276,8 @@ export default {
|
|
|
if (lineCount >= maxLines - 1) {
|
|
if (lineCount >= maxLines - 1) {
|
|
|
var remaining = chars.slice(i).join('')
|
|
var remaining = chars.slice(i).join('')
|
|
|
var remainingLine = line + remaining
|
|
var remainingLine = line + remaining
|
|
|
- if (ctx.measureText) {
|
|
|
|
|
- while (ctx.measureText(remainingLine + '..').width > maxWidth && remainingLine.length > 2) {
|
|
|
|
|
- remainingLine = remainingLine.substring(0, remainingLine.length - 1)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ while (this._textWidth(ctx, remainingLine + '..') > maxWidth && remainingLine.length > 2) {
|
|
|
|
|
+ remainingLine = remainingLine.substring(0, remainingLine.length - 1)
|
|
|
}
|
|
}
|
|
|
ctx.fillText(remainingLine + '..', x, y + lineCount * lineHeight)
|
|
ctx.fillText(remainingLine + '..', x, y + lineCount * lineHeight)
|
|
|
return
|
|
return
|
|
@@ -274,6 +289,13 @@ export default {
|
|
|
ctx.fillText(line, x, y + lineCount * lineHeight)
|
|
ctx.fillText(line, x, y + lineCount * lineHeight)
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
+ _textWidth(ctx, text) {
|
|
|
|
|
+ if (ctx.measureText) {
|
|
|
|
|
+ try { return ctx.measureText(text).width } catch (e) { return (text || '').length * 18 }
|
|
|
|
|
+ }
|
|
|
|
|
+ return (text || '').length * 18
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
_drawQrPlaceholder(ctx, x, y, size) {
|
|
_drawQrPlaceholder(ctx, x, y, size) {
|
|
|
ctx.setFillStyle('#ffffff')
|
|
ctx.setFillStyle('#ffffff')
|
|
|
this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
|
|
this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
|
|
@@ -355,6 +377,8 @@ export default {
|
|
|
var self = this
|
|
var self = this
|
|
|
uni.canvasToTempFilePath({
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'contentPosterCanvas',
|
|
canvasId: 'contentPosterCanvas',
|
|
|
|
|
+ destWidth: 500,
|
|
|
|
|
+ destHeight: 800,
|
|
|
success: function(res) {
|
|
success: function(res) {
|
|
|
uni.saveImageToPhotosAlbum({
|
|
uni.saveImageToPhotosAlbum({
|
|
|
filePath: res.tempFilePath,
|
|
filePath: res.tempFilePath,
|