1、定制项画布展示

src/components/canvas-preview/index.vue

@@ -1,6 +1,5 @@
 <template>
   <el-dialog
-    :close-on-click-modal="false"
     :visible.sync="visible"
     :append-to-body="visible"
     :modal="false"
@@ -10,7 +9,7 @@
     @close="closeDialog"
     style="display: flex; align-items: center;justify-content: center;"
     v-if="visible">
-    <!--<div>
+    <div>
       <div v-if="prodType === '小卡'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0465 + 'px'}">
       </div>
       <div v-if="prodType === '拍立得'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0465 + 'px'}">
@@ -30,14 +29,14 @@
       <div v-if="prodType === '手幅'" class="previewClass" :style="{width: previewWidth + 'px', height: previewHeight + 'px', borderWidth: previewWidth * 0.0255 + 'px'}">
       </div>
       <el-image ref="previewImageRef" :src="previewPicUrl" alt="" @load="previewLoad" style="width: 100%; height: 100%"/>
-    </div>-->
-    <div class="parent">
+    </div>
+    <!--<div class="parent">
       <canvas ref="canvas" :width="clientWidth" :height="clientHeight" id="myCanvas"></canvas>
-      <div class="blood" :style="{border: bloodWidth + 'px solid rgba(225,0,0, 0.3)', width: clientWidth +'px', height: clientHeight + 'px'}"></div>
+      <div class="blood" :style="{border: bloodWidth + 'px solid rgba(225,0,0, 0.3)' , width: clientWidth +'px', height: clientHeight + 'px', borderRadius: bloodRadius + '%'}"></div>
     </div>
     <div style="text-align: center;">
       <el-button @click="cropImage">保存画布</el-button>
-    </div>
+    </div>-->
 
   </el-dialog>
 
@@ -45,9 +44,9 @@
 
 <script>
   const statusConfig = {IDLE:0, DRAG_START:1, DRAGGING:2};
-  const prodSize = {'小卡': {width: 709, height: 1087, clientScale:0.5}, '方卡':{width: 1252, height: 1252, clientScale:0.5}, '拍立得':{width: 709, height: 1087, clientScale:0.5},
-                    '直拍封面':{width: 709, height: 1217, clientScale:0.5}, '书签': {width: 638, height: 1819, clientScale:0.4},'明信片':{width: 1252, height: 1819, clientScale:0.4},
-                    '徽章':{width: 839, height: 839, clientScale:0.5},'票根':{width: 709, height: 1489, clientScale:0.5},'手幅':{width: 1252, height: 3614, clientScale:0.25}}
+  const prodSize = {'小卡': {width: 709, height: 1087, clientScale:0.5, bloodRadio: 0.0242}, '方卡':{width: 1252, height: 1252, clientScale:0.5}, '拍立得':{width: 709, height: 1087, clientScale:0.5, bloodRadio: 0.0242},
+                    '直拍封面':{width: 709, height: 1217, clientScale:0.5, bloodRadio: 0.02325}, '书签': {width: 638, height: 1819, clientScale:0.4, bloodRadio: 0.0264},'明信片':{width: 1252, height: 1819, clientScale:0.4, bloodRadio: 0.0261},
+                    '徽章':{width: 839, height: 839, clientScale:0.5, bloodRadio: 0.0813, bloodRadius:100},'票根':{width: 709, height: 1489, clientScale:0.5, bloodRadio: 0.0465},'手幅':{width: 1252, height: 3614, clientScale:0.25, bloodRadio: 0.0255}}
   export default {
     name: "CanvasPreview",
     data() {
@@ -64,6 +63,7 @@
         cardItem: null,
         canvasParam:null,
         bloodWidth: 20,
+        bloodRadius: 0,
         canvasInfo:{
           status: statusConfig.IDLE,
           dragTarget: {x:0,y:0,w:0,h:0},
@@ -102,6 +102,8 @@
         let prod = prodSize[prodType];
         this.clientWidth = prod.width * prod.clientScale;
         this.clientHeight = prod.height * prod.clientScale;
+        this.bloodRadius = prod.bloodRadius ? prod.bloodRadius : this.bloodRadius;
+        this.bloodWidth = prod.width * prod.bloodRadio;
       },
       previewLoad(event){
         this.previewWidth = event.srcElement.clientWidth;