fix

business/pages/classservice/classreviewshare.json

 {
   "navigationBarTitleText": "分享卡片",
+  "enablePullDownRefresh": false,
+  "disableScroll": true,
   "usingComponents": {
     "canvasdrawer": "/components/canvasdrawer/canvasdrawer",
     "canvas-drag": "/components/canvas-drag/index"

business/pages/classservice/classreviewshare.wxml

 <wxs src="./../../../filter/index.wxs" module="filter" />
 <view class="container">
     <view class="swiperwrap">
-        <view class="card carda" data-posterindex="1" bindtap="generatePoster" >
-            <image class="cardbg" src="{{currentImgUrl}}" wx:if="{{hasReviewImg.length>0}}"></image>
-            <image class="cardbg" src="{{imageRoot}}2b/classreviewshare/carda_s.png?{{imageVersion}}" wx:else></image>
+        <view class="card {{hasReviewImg.length==0?'card-s':''}} {{selectCardLong?'card-hide':''}}">
+            <image class="cardbg" src="{{currentImgUrl}}"></image>
             <view class="cardcontent">
-                <image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}"></image>
+                <image class="avatar" src="{{filter.imagify(userInfo.avatar, 'image/resize,w_320/format,jpg/quality,q_50')}}" wx:if="{{userInfo.avatar}}"></image>
+                <image class="avatar" src="{{imageRoot}}common/empty/avatar_user.png?{{imageVersion}}" wx:else></image>
                 <view class="nickname">{{userInfo.nickname}}</view>
                 <view class="imgbox" wx:if="{{hasReviewImg.length>0}}">
-                    <canvas-drag id="canvas-drag" graph="{{graph}}" width="520" height="440" enableUndo="{{true}}"></canvas-drag>
-                    <image class="icon-angle icon-angle-lt" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
-                    <image class="icon-angle icon-angle-rt" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
-                    <image class="icon-angle icon-angle-rb" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></image>
-                    <image class="icon-angle icon-angle-lb" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></image>
-                    <!-- <image class="review-img" src="{{filter.imagify(hasReviewImg[0].src, 'image/resize,w_320/format,jpg/quality,q_50')}}" mode="aspectFill"></image> -->
+                    <canvas-drag id="canvas-drag" graph="{{graph2}}" width="520" height="440" enableUndo="{{true}}"></canvas-drag>
+                    <cover-image class="icon-angle icon-angle-lt" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></cover-image>
+                    <cover-image class="icon-angle icon-angle-rt" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></cover-image>
+                    <cover-image class="icon-angle icon-angle-rb" src="{{imageRoot}}2b/classreviewshare/icon_angle_lr.png?{{imageVersion}}"></cover-image>
+                    <cover-image class="icon-angle icon-angle-lb" src="{{imageRoot}}2b/classreviewshare/icon_angle_rl.png?{{imageVersion}}"></cover-image>
                 </view>
                 <view class="reviewtext">{{reviewDetailContent.content}}</view>
-                <image class="icon-audio" src="{{imageRoot}}2b/classreviewshare/icon_audio.png?{{imageVersion}}" wx:if="{{hasReviewAudio.length>0}}"></image>
+                <image class="icon-audio" src="{{imageRoot}}2b/classreviewshare/icon_audio.png?{{imageVersion}}" wx:if="{{hasReviewAudio}}"></image>
             </view>
             <form report-submit="true" bindsubmit="formIdCreate" class="createidform">
                 <button form-type="submit" class="createidbutton">生成form</button>
             </form>
         </view>
+        <view class="{{!selectCardLong?'card-hide':''}}">长图</view>
     </view>
     <view class="scroll-box">
         <view class="tab-box">
@@ -48,14 +48,18 @@
             scroll-left = "{{scrollLeft}}"
             wx:if="{{bigType==2}}"
         >   
-            <view class="cardbox {{bigType==2 && currentIndex == index ? 'selected' : ''}}" data-item="{{item}}" bindtap="selectCard" wx:for="{{tempImgArr2}}" wx:key="">
+            <view class="cardbox {{bigType==2 && currentIndex == index ? 'selected' : ''}}" data-item="{{item}}" data-islong="1" bindtap="selectCard" wx:for="{{tempImgArr2}}" wx:key="">
                 <view class="card">
                     <image class="cardbg" src="{{item.icon_src}}"></image>
                 </view>
             </view>
         </scroll-view>
 
-        <view class="button-boxfix">生成卡片</view> 
+        <view class="button-boxfix">
+            <view class="btn btn-l" wx:if="{{hasReviewImg.length>0 && !selectCardLong}}" bindtap="changeCover">换封面 （{{coverindex+1}}/{{hasReviewImg.length}}）</view>
+            <view class="btn btn-r" bindtap="saveAndGenerate">生成卡片</view> 
+        </view>
+
     </view>
     <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
 </view>

business/pages/classservice/classreviewshare.wxss

@@ -26,6 +26,14 @@ page{
     width: 647rpx;
     height: 826rpx;
 }
+.card-s {
+    position: relative;
+    width: 647rpx;
+    height: 522rpx;
+}
+.card-hide{
+    display: none;
+}
 .cardbg {
     width: 100%;
     height: 100%;
@@ -44,7 +52,7 @@ page{
     top: 0;
     padding: 17rpx 52rpx 0;
 }
-.carda .cardcontent .avatar {
+.card .cardcontent .avatar {
     width: 80rpx;
     height: 80rpx;
     margin: 0 auto;
@@ -53,7 +61,7 @@ page{
     border: 3rpx solid rgba(255,255,255,1);
     display: block;
 }
-.carda .cardcontent .nickname {
+.card .cardcontent .nickname {
     color: #000;
     font-size: 24rpx;
     text-align: center;
@@ -63,7 +71,7 @@ page{
     line-height: 1;
     padding-top: 17rpx;
 }
-.carda .cardcontent .imgbox{
+.card .cardcontent .imgbox{
     width: 542rpx;
     height: 463rpx;
     background: rgba(255,255,255,1);
@@ -73,34 +81,34 @@ page{
     padding: 10rpx;
     overflow: hidden;
 }
-.carda .cardcontent .imgbox .icon-angle{
+.card .cardcontent .imgbox .icon-angle{
     width: 44rpx;
     height: 44rpx;
     background: rgba(101,184,244,1);
     border-radius: 50%;
     position: absolute;
 }
-.carda .cardcontent .imgbox .icon-angle-lt{
+.card .cardcontent .imgbox .icon-angle-lt{
     top: 12rpx;
     left: 12rpx;
 }
-.carda .cardcontent .imgbox .icon-angle-rt{
+.card .cardcontent .imgbox .icon-angle-rt{
     top: 12rpx;
     right: 12rpx;
 }
-.carda .cardcontent .imgbox .icon-angle-rb{
+.card .cardcontent .imgbox .icon-angle-rb{
     bottom: 12rpx;
     right: 12rpx;
 }
-.carda .cardcontent .imgbox .icon-angle-lb{
+.card .cardcontent .imgbox .icon-angle-lb{
     bottom: 12rpx;
     left: 12rpx;
 }
-.carda .cardcontent .imgbox .review-img{
+.card .cardcontent .imgbox .review-img{
     width: 100%;
     max-height: 440rpx;
 }
-.carda .reviewtext {
+.card .reviewtext {
     font-size: 20rpx;
     line-height: 28rpx;
     color: #000;
@@ -112,6 +120,9 @@ page{
     padding-top: 13rpx;
     font-weight: 500;
 }
+.card.card-s .reviewtext{
+    -webkit-line-clamp: 4;
+}
 .icon-audio{
     width: 124rpx;
     height: 34rpx;
@@ -198,10 +209,46 @@ page{
     width: 100%;
     height: 100rpx;
     background: #65B8F4;
-    font-size: 30rpx;
-    color: #fff;
-    font-weight: 500;
+    display: flex;
+}
+.button-boxfix .btn{
+    height: 100%;
+    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 30rpx;
+    color: #fff;
+    font-weight: 500;
+    position: relative;
+}
+.button-boxfix .btn::after{
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: #fff;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: scaleX(.5);
+}
+.button-boxfix .btn:last-of-type::after{
+    display: none;
+}
+.button-boxfix .btn-l{
+    background: #fff;
+    color: #666;
+}
+.button-boxfix .btn-l::before{
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: rgba(0,0,0,.05);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: scaleY(.5);
+}
+.button-boxfix .btn-l{
+
 }
\ No newline at end of file

components/canvas-drag/canvas-drag.js

@@ -7,13 +7,10 @@ function CanvasDrag(options = {}) {
         ...defaultOptions,
         ...options,
     };
-
     const pages = getCurrentPages();
     const ctx = pages[pages.length - 1];
-
-  const canvasDrag = ctx.selectComponent(options.selector);
+    const canvasDrag = ctx.selectComponent(options.selector);
     delete options.selector;
-
   return canvasDrag;
 }
 
@@ -25,67 +22,12 @@ CanvasDrag.export = () => {
     return CanvasDrag().export();
     }
 };
-
-CanvasDrag.initByArr = (arr) => {
-    const canvasDrag = CanvasDrag();
-    if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
-    } else {
-        return CanvasDrag().initByArr(arr);
-    }
-};
-
-CanvasDrag.exportJson = () => {
-    const canvasDrag = CanvasDrag();
-    if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
-    } else {
-        return CanvasDrag().exportJson();
-    }
-};
-
-CanvasDrag.changFontColor = (color) => {
-    const canvasDrag = CanvasDrag();
-    if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
-    } else {
-        return CanvasDrag().changColor(color);
-    }
-};
-
-CanvasDrag.changeBgColor = (color) => {
-    const canvasDrag = CanvasDrag();
-    if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
-    } else {
-        return CanvasDrag().changeBgColor(color);
-    }
-};
-
-CanvasDrag.changeBgImage = (bgImage) => {
-    const canvasDrag = CanvasDrag();
-    if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
-    } else {
-        return CanvasDrag().changeBgImage(bgImage);
-    }
-};
-
 CanvasDrag.clearCanvas = () => {
-  const canvasDrag = CanvasDrag();
-  if (!canvasDrag) {
-    console.error('请设置组件的id="canvas-drag"!!!');
-  } else {
-    return CanvasDrag().clearCanvas();
-  }
-};
-
-CanvasDrag.undo = () => {
     const canvasDrag = CanvasDrag();
     if (!canvasDrag) {
-        console.error('请设置组件的id="canvas-drag"!!!');
+      console.error('请设置组件的id="canvas-drag"!!!');
     } else {
-        return CanvasDrag().undo();
+      return CanvasDrag().clearCanvas();
     }
-};
+  };
 export default CanvasDrag;
\ No newline at end of file

components/canvas-drag/index.js

 // components/canvas-drag/index.js
-const DRAG_ICON = '../../images/2b/classreviewshare/icon_angle_lr.png'; // 缩放按钮
-const STROKE_COLOR = 'red';
+const DRAG_ICON = './icon_angle_rl.png'; // 缩放按钮
 const ROTATE_ENABLED = true;
 let isMove = false; // 标识触摸后是否有移动，用来判断是否需要增加操作历史
 
 const DEBUG_MODE = false; // 打开调试后会渲染操作区域边框（无背景时有效）
 const dragGraph = function ({x = 30, y = 30, w, h, type, text, fontSize = 20, color = 'red', url = null, rotate = 0, sourceId = null, selected = true}, canvas, factor) {
-    if (type === 'text') {
-        canvas.setFontSize(fontSize);
-        const textWidth = canvas.measureText(text).width;
-        const textHeight = fontSize + 10;
-        this.centerX = x + textWidth / 2;
-        this.centerY = y + textHeight / 2;
-        this.w = textWidth;
-        this.h = textHeight;
-    } else {
-        this.centerX = x + w / 2;
-        this.centerY = y + h / 2;
-        this.w = w;
-        this.h = h;
-    }
-
+    this.centerX = x + w / 2;
+    this.centerY = y + h / 2;
+    this.w = w;
+    this.h = h;
     this.x = x;
     this.y = y;
 
@@ -52,41 +40,18 @@ dragGraph.prototype = {
      */
     paint() {
         this.ctx.save();
-        // 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
-        let textWidth = 0;
-        let textHeight = 0;
-        if (this.type === 'text') {
-            this.ctx.setFontSize(this.fontSize);
-            this.ctx.setTextBaseline('middle');
-            this.ctx.setTextAlign('center');
-            this.ctx.setFillStyle(this.color);
-            textWidth = this.ctx.measureText(this.text).width;
-            textHeight = this.fontSize + 10;
-            // 字体区域中心点不变，左上角位移
-            this.x = this.centerX - textWidth / 2;
-            this.y = this.centerY - textHeight / 2;
-        }
 
         // 旋转元素
         this.ctx.translate(this.centerX, this.centerY);
         this.ctx.rotate(this.rotate * Math.PI / 180);
         this.ctx.translate(-this.centerX, -this.centerY);
         // 渲染元素
-        if (this.type === 'text') {
-            this.ctx.fillText(this.text, this.centerX, this.centerY);
-        } else if (this.type === 'image') {
+        if (this.type === 'image') {
             this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
         }
-        // 如果是选中状态，绘制选择虚线框，和缩放图标
+        // 如果是选中状态，绘制缩放图标
         if (this.selected) {
-            this.ctx.setLineDash([2, 5]);
-            this.ctx.setLineWidth(2);
-            this.ctx.setStrokeStyle(STROKE_COLOR);
-            this.ctx.lineDashOffset = 6;
-
-            this.ctx.strokeRect(this.x, this.y, this.w, this.h);
             this.ctx.drawImage(DRAG_ICON, this.x + this.w - 15, this.y + this.h - 15, 22, 22);
-            
         }
         this.ctx.restore();
     },
@@ -225,19 +190,9 @@ dragGraph.prototype = {
      */
     transform(px, py, x, y, currentGraph) {
         // 获取选择区域的宽度高度
-        if (this.type === 'text') {
-            this.ctx.setFontSize(this.fontSize);
-            const textWidth = this.ctx.measureText(this.text).width;
-            const textHeight = this.fontSize + 10;
-            this.w = textWidth;
-            this.h = textHeight;
-            // 字体区域中心点不变，左上角位移
-            this.x = this.centerX - textWidth / 2;
-            this.y = this.centerY - textHeight / 2;
-        } else {
-            this.centerX = this.x + this.w / 2;
-            this.centerY = this.y + this.h / 2;
-        }
+
+        this.centerX = this.x + this.w / 2;
+        this.centerY = this.y + this.h / 2;
 
         const diffXBefore = px - this.centerX;
         const diffYBefore = py - this.centerY;
@@ -385,6 +340,7 @@ Component({
             }
         },
         onGraphChange(n, o) {
+            console.log(n,o,222222)
             if (JSON.stringify(n) === '{}') return;
             if(!this.ctx) return;
             this.drawArr.push(new dragGraph(Object.assign({