From 8522ef2481b45f7b0d854679eaedb2a4c5271261 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 01 七月 2024 11:17:24 +0800
Subject: [PATCH] 戏剧添加涂色题
---
src/books/artAndDrama/view/components/chapter004.vue | 3 +++
src/components/graffiti/index.vue | 13 +++++++++----
src/books/artAndDrama/view/components/index.vue | 2 +-
3 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 4696f8a..8b4faed 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -66,6 +66,7 @@
class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
<!-- 鍥剧墖缂哄け -->
<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
+ <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="800" />
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -207,6 +208,7 @@
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
+import graffiti from '@/components/graffiti/index.vue'
export default {
name: "chapterFour",
props: {
@@ -214,6 +216,7 @@
type: Array,
},
},
+ components:{graffiti},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
this.getVidoePath();
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 5f82a27..a8fa299 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -160,7 +160,7 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(6,38);
+ // this.gotoPage(4,32);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 11c1519..0b0b54a 100644
--- a/src/components/graffiti/index.vue
+++ b/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 {
--
Gitblit v1.9.1