| src/books/mathBook/view/components/chapter003.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/mathBook/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/paint/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/books/mathBook/view/components/chapter003.vue
@@ -1540,23 +1540,17 @@ </p> <p class="img fl fl-cn ju-cn"> <span>图3-15</span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectImg ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="collectResourceList.findIndex(item => item.id == '722FE833') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('img')" /> </el-tooltip> </p> <video :src="videoPath" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="video-border w100"></video> <p class="img fl fl-cn ju-cn"> <span>视频：判数函数奇偶性的方法和步骤 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="collectResourceList.findIndex(item => item.id == 'a28cd862d61b5df2201406b76e9f01b0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> <p class="fl"> <span> @@ -1799,6 +1793,12 @@ this.config.activeBook.resourceUrl + '/images/0103-2.jpg' " /> <!-- <graffiti :page="99" :bcImg="this.config.activeBook.resourceUrl + '/images/0103-2.jpg'" :imgWidth="400" :imgHeight="380" /> --> </div> </div> </div> @@ -2899,6 +2899,7 @@ <script> import paint from '@/components/paint/index.vue' import graffiti from '@/components/graffiti/index.vue' import examinations from '@/components/examinations/index.vue' import { getResourcePath } from "@/assets/methods/resources"; import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; @@ -2921,7 +2922,7 @@ type: Object, }, }, components: {examinations,paint}, components: {examinations,paint,graffiti}, data() { return { ...showObj, @@ -3017,7 +3018,6 @@ }, //资源收藏事件 handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) { console.log(this.collectResourceList); let list = this.collectResourceList if (list.findIndex(item => item.id == id) > -1) { list = list.filter(item => item.id != id) src/books/mathBook/view/components/index.vue
@@ -188,8 +188,8 @@ }, 500); // 测试页面跳转 // setTimeout(() => { // this.gotoPage(3,51); setTimeout(() => { this.gotoPage(4,99); // // setTimeout(() => { // // this.renderSign("Highlight", { // // id: "2ACA9359", @@ -217,7 +217,7 @@ // // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // // txtIndex: 57 // // }); // }, 500); }, 500); // 获取题目id列表 this.getQuestionId(); src/components/paint/index.vue
@@ -13,8 +13,7 @@ </button> <button @click="saveImgData">保存</button> </li> <li> </li> <li></li> <li> <label>画笔：</label> <select name="" id="" @change="changeBrush" v-model="brush"> @@ -121,10 +120,10 @@ type: Number, default: 1, }, canvasHeight:{ type:Number, default:380 } canvasHeight: { type: Number, default: 380, }, }, mounted() { this.init(); @@ -132,14 +131,17 @@ methods: { // 初始化画布 init() { this.canvas = new fabric.Canvas("canvas", { isDrawingMode: true, }); this.canvas = new fabric.Canvas( (this.container ? this.container : document).querySelector("#canvas"), { isDrawingMode: true, } ); // 设置背景 this.setBackgroundImage() this.setBackgroundImage(); // fabric.Object.prototype.transparentCorners = false; this.setBrush() this.setBrush(); }, // 创建各种笔刷 setBrush() { @@ -147,7 +149,10 @@ // 画笔样式 this.vLinePatternBrush = new fabric.PatternBrush(this.canvas); this.vLinePatternBrush.getPatternSrc = () => { let patternCanvas = fabric.document.createElement("canvas"); let patternCanvas = fabric[this.container ? this.container : document].createElement( "canvas" ); patternCanvas.width = patternCanvas.height = 10; let ctx = patternCanvas.getContext("2d"); ctx.strokeStyle = this.lineColor; @@ -161,7 +166,10 @@ }; this.hLinePatternBrush = new fabric.PatternBrush(this.canvas); this.hLinePatternBrush.getPatternSrc = function () { let patternCanvas = fabric.document.createElement("canvas"); let patternCanvas = fabric[this.container ? this.container : document].createElement( "canvas" ); patternCanvas.width = patternCanvas.height = 10; let ctx = patternCanvas.getContext("2d"); ctx.strokeStyle = this.lineColor; @@ -177,7 +185,10 @@ this.squarePatternBrush.getPatternSrc = function () { const squareWidth = 10; const squareDistance = 2; const patternCanvas = fabric.document.createElement("canvas"); const patternCanvas = fabric[this.container ? this.container : document].createElement( "canvas" ); patternCanvas.width = patternCanvas.height = squareWidth + squareDistance; const ctx = patternCanvas.getContext("2d"); @@ -189,7 +200,10 @@ this.diamondPatternBrush.getPatternSrc = function () { const squareWidth = 10; const squareDistance = 5; const patternCanvas = fabric.document.createElement("canvas"); const patternCanvas = fabric[this.container ? this.container : document].createElement( "canvas" ); const rect = new fabric.Rect({ width: squareWidth, height: squareWidth, @@ -257,7 +271,7 @@ // 清空画布 clearCanvas() { this.canvas.clear(); this.setBackgroundImage() this.setBackgroundImage(); }, // 修改画笔颜色 changeLineColor(e) { @@ -367,15 +381,15 @@ } .paint-btn { width: 96%; margin-top:40px; padding:20px; border:1px solid #ededed; margin-top: 40px; padding: 20px; border: 1px solid #ededed; li { margin-bottom:6px; margin-bottom: 6px; } } .paint-btn-box { display:flex; justify-content:space-evenly; display: flex; justify-content: space-evenly; } </style>
