testbookLayout.git

			@@ -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>
			@@ -38,6 +38,10 @@
			},
			imgHeight:{
			type:Number
			},
			bcColor:{
			type:String,
			default:'#fff'
			}
			},
			data() {
			@@ -59,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";
			@@ -107,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", {
			@@ -234,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);
			@@ -269,7 +279,6 @@
			saveData(data) {
			this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
			this.historyData.push(data);
			console.log('数据',this.historyData);
			},
			// 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
			resetToolActive() {
			@@ -297,7 +306,6 @@
			justify-content: space-around;
			align-items: center;
			height: 88px;
			background-color: #fff;
			}

			#canvas_panel {