戏剧添加涂色题

闫增涛

2024-07-01 8522ef2481b45f7b0d854679eaedb2a4c5271261

 src/components/graffiti/index.vue

@@ -1,6 +1,6 @@
<!-- 涂色连线题控件 -->
<template>
  <div class="page">
  <div class="page" :style="{height:imgHeight + 120 + 'px'}">
    <div class="main">
      <div id="canvas_panel">
        <canvas
@@ -32,6 +32,12 @@
    },
    bcImg:{
      type:String
    },
    imgWidth:{
      type:Number
    },
    imgHeight:{
      type:Number
    }
  },
  data() {
@@ -122,7 +128,7 @@
          imgData.setAttribute('crossOrigin', '');
        }
        imgData.onload = () => {
          this.context.drawImage(imgData,0,0)
          this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
        }
      }
      resetCanvas();
@@ -218,7 +224,7 @@
        imgData.setAttribute('crossOrigin', '');
      }
      imgData.onload = () => {
        this.context.drawImage(imgData,0,0)
        this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
      }
    },
    // 保存画布背景和划线到本地方法
@@ -280,7 +286,6 @@
  display: flex;
  flex-direction: column;
  width:100%;
  height: 866px;
}

.main {