testbookLayout.git

			@@ -1,6 +1,6 @@
			<!-- 涂色连线题控件 -->
			<template>
			<div class="page">
			<div class="page" :style="{height:imgHeight + 120 + 'px'}">
			<div class="main">
			<div id="canvas_panel">
			<canvas
			@@ -13,7 +13,7 @@
			>
			</div>
			</div>
			<div class="footer">
			<div class="footer" :style="{backgroundColor:bcColor}">
			<BrushSize :size="brushSize" @change-size="onChangeSize" @change-color="onChangeColor" />
			<ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
			</div>
			@@ -32,6 +32,16 @@
			},
			bcImg:{
			type:String
			},
			imgWidth:{
			type:Number
			},
			imgHeight:{
			type:Number
			},
			bcColor:{
			type:String,
			default:'#fff'
			}
			},
			data() {
			@@ -53,12 +63,14 @@
			},
			mounted() {
			this.backgroundImage = this.bcImg
			this.canvas = document.getElementById("canvas");
			this.canvas = (this.container ? this.container : document).getElementById("canvas");
			if (this.canvas.getContext) {
			this.context = this.canvas.getContext("2d", { willReadFrequently: true });
			this.initCanvas();
			// window.addEventListener('resize', updateCanvasPosition);
			window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
			(
			this.container ? this.container : document
			).addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
			this.getCanvasOffset();
			this.context.lineGap = "round";
			this.context.lineJoin = "round";
			@@ -101,7 +113,9 @@
			initCanvas() {
			const that = this
			const resetCanvas = () => {
			const elPanel = document.getElementById("canvas_panel");
			const elPanel = (
			this.container ? this.container : document
			).getElementById("canvas_panel");
			that.canvas.width = elPanel.clientWidth;
			that.canvas.height = elPanel.clientHeight;
			that.context = that.canvas.getContext("2d", {
			@@ -122,7 +136,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 +232,7 @@
			imgData.setAttribute('crossOrigin', '');
			}
			imgData.onload = () => {
			this.context.drawImage(imgData,0,0)
			this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
			}
			},
			// 保存画布背景和划线到本地方法
			@@ -228,7 +242,9 @@
			},
			// 保存为一张图片并下载的方法
			saveImgData() {
			var link = document.createElement("a");
			var link = (
			this.container ? this.container : document
			).createElement("a");
			var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
			var strDataURI = imgData.substr(22, imgData.length);
			var blob = dataURLtoBlob(imgData);
			@@ -263,7 +279,6 @@
			saveData(data) {
			this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
			this.historyData.push(data);
			console.log('数据',this.historyData);
			},
			// 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
			resetToolActive() {
			@@ -280,7 +295,6 @@
			display: flex;
			flex-direction: column;
			width:100%;
			height: 866px;
			}

			.main {
			@@ -292,7 +306,6 @@
			justify-content: space-around;
			align-items: center;
			height: 88px;
			background-color: #fff;
			}

			#canvas_panel {