fix

src/component/Detail/editFrontBack.vue

@@ -125,6 +125,28 @@ export default defineComponent({
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.maskUrl
+					canvas.on('mouse:wheel', opt => {
+						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+						let zoom = canvas.getZoom() // 获取画布当前缩放值
+						zoom *= 0.999 ** delta
+						if (zoom > 20) zoom = 20
+						if (zoom < 0.01) zoom = 0.01
+
+						// 以左上角为原点
+						// this.canvas.setZoom(zoom)
+
+						// 以鼠标所在位置为原点缩放
+						console.log(zoom);
+						canvas.zoomToPoint(
+							{ // 关键点
+							x: opt.e.offsetX,
+							y: opt.e.offsetY
+							},
+							zoom
+						)
+						opt.e.preventDefault()
+						opt.e.stopPropagation()
+					})
 					await new Promise((resolve, reject) => {
 						fabric.Image.fromURL(data.maskUrl, function(img) {
 							// 设置背景图对象的宽度和高度与 canvas 相同
@@ -473,7 +495,7 @@ export default defineComponent({
 			}
 		}
 		.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen,.editFrontBack_center_btn_colorWhite{
-			width: 10rem;
+			width: 9rem;
 			line-height: 3rem;
 			text-align: center;
 			height: 3rem;