更新canvas

src/views/home/index.vue

@@ -1338,7 +1338,12 @@ const showInPaintDialog = (type: string, item: any) => {
       let mask_ctx = mask_canvas.getContext('2d') as CanvasRenderingContext2D;
       mask_ctx.clearRect(0, 0, mask_canvas.width, mask_canvas.height);
 
-      // mask_ctx.globalAlpha = 0.5; // 可自定义透明度
+      mask_ctx.lineWidth = 40; // 设置线条粗细
+      mask_ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; // 设置线条颜色
+      mask_ctx.lineCap = 'round';  // 线头尾为圆形
+      mask_ctx.lineJoin = 'round'; // 拐点为圆形，默认是尖角
+      // mask_ctx.globalCompositeOperation = 'destination-atop';  //避免线条重叠的时候透明度也重叠
+
 
       let isDrawing = false;
       // 鼠标或触摸事件开始绘制
@@ -1354,7 +1359,6 @@ const showInPaintDialog = (type: string, item: any) => {
       mask_canvas.addEventListener('touchend', stopDrawing);
       mask_canvas.addEventListener('mouseout', stopDrawing);
 
-
       // 清除按钮点击事件
       const clearButton = document.getElementById('clearButton') as HTMLButtonElement;
       clearButton.addEventListener('click', clearCanvas);
@@ -1362,13 +1366,10 @@ const showInPaintDialog = (type: string, item: any) => {
       // 开始绘制
       function startDrawing(e: any) {
           isDrawing = true;
-          const { offsetX, offsetY } = getOffset(e);
-          mask_ctx.lineWidth = 40; // 设置线条粗细
-          // mask_ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; // 设置线条颜色
-          mask_ctx.strokeStyle = 'white'; // 设置线条颜色
-          mask_ctx.lineCap = "round";  // 线头尾为圆形
           mask_ctx.beginPath();
+          const { offsetX, offsetY } = getOffset(e);
           mask_ctx.moveTo(offsetX, offsetY);
+          draw(e);
       }
 
       // 绘制中
@@ -2272,7 +2273,7 @@ const onSubmitInPaint = async () => {
     <el-dialog
       v-model="inPaintVisible"
       title="局部重绘"
-      :fullscreen="true"
+      :width="parseInt(form.img_size.width) + 40"
       :close-on-click-modal="false"
       :close-on-press-escape="true"
       :show-close="true"
@@ -2286,7 +2287,7 @@ const onSubmitInPaint = async () => {
           form.img_size.width +
           'px; height: ' +
           form.img_size.height +
-          'px'
+          'px; margin: 10px auto;'
         "
       >
         <canvas