Просмотр исходного кода

chore: auto bump version and changelog [skip ci]

iwt 3 месяцев назад
Родитель
Сommit
8fc353378b
2 измененных файлов с 35 добавлено и 11 удалено
  1. 34 10
      cfc-frontend/components/ContentSharePoster.vue
  2. 1 1
      cfc-web/.last_build_commit

+ 34 - 10
cfc-frontend/components/ContentSharePoster.vue

@@ -45,11 +45,33 @@ export default {
       return map[this.dimensionCode] || { main: '#F97316', dark: '#EA580C', light: '#FFF7ED' }
     },
     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 w = 500
       var h = 800
       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)
       gradient.addColorStop(0, colors.main)
       gradient.addColorStop(0.55, colors.dark)
@@ -246,12 +268,7 @@ export default {
       var lineCount = 0
       for (var i = 0; i < chars.length; 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) {
           ctx.fillText(line, x, y + lineCount * lineHeight)
           line = chars[i]
@@ -259,10 +276,8 @@ export default {
           if (lineCount >= maxLines - 1) {
             var remaining = chars.slice(i).join('')
             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)
             return
@@ -274,6 +289,13 @@ export default {
       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) {
       ctx.setFillStyle('#ffffff')
       this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
@@ -355,6 +377,8 @@ export default {
       var self = this
       uni.canvasToTempFilePath({
         canvasId: 'contentPosterCanvas',
+        destWidth: 500,
+        destHeight: 800,
         success: function(res) {
           uni.saveImageToPhotosAlbum({
             filePath: res.tempFilePath,

+ 1 - 1
cfc-web/.last_build_commit

@@ -1 +1 @@
-b682db86ce2b66c15621d817c2e5aa54ad50d71c
+47d05d6509c46c6be2cfc9ba0c1c950874b8facc