feat: 修改 imageRender，减少多余的绘制

Author: anewzhuang

docs/components/overview.md

@@ -113,7 +113,7 @@ Layout 通过 xml 组织布局，Layout 支持的标签列表如下。
 | backgroundColor | string | | 背景的颜色，支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色 |
 | backgroundImage | string | | 背景图，格式为 'url(https:/www.foo.com/xxx.png)'  |
 | backgroundImageType | string | simple | 背景图片的渲染类型，详见下方"图像渲染模式"说明 |
-| backgroundImageInset | string | | 背景图片九宫格设置的区域，格式为 'left top right bottom'，如'10 20 30 10' |
+| backgroundImageInset | string | | 背景图片九宫格设置的区域，backgroundImageType为 sliced生效，格式为 'left top right bottom'，如'10 20 30 10' |
 | opacity | number | 1 | 透明度，范围[0, 1]，0表示透明，1表示不透明 |
 | transform | string | | transform 属性允许你旋转和缩放给定元素，目前支持的格式 `rotate(360deg)` |
 
@@ -123,7 +123,7 @@ Layout 通过 xml 组织布局，Layout 支持的标签列表如下。
 | 属性 | 类型 | 默认值 | 说明 |
 |---------------|--------|--------|--------------------------|
 | imageType | string | simple | 图像的渲染类型，详见下方"图像渲染模式"说明 |
-| imageInset | string | | 图像九宫格设置的区域，格式为 'left top right bottom'，如'15 15 15 15' |
+| imageInset | string | | 图像九宫格设置的区域，imageType值为sliced生效，格式为 'left top right bottom'，如'15 15 15 15' |
 
 #### 图像渲染模式
 

src/common/imageRenderer.ts

@@ -133,12 +133,10 @@ export class ImageRenderer {
     ctx.clip();
 
     // 预计算完整块和边界块的数量，避免重复计算
-    const fullCols = Math.floor(width / imgWidth);
-    const fullRows = Math.floor(height / imgHeight);
-    const hasPartialCol = width % imgWidth > 0;
-    const hasPartialRow = height % imgHeight > 0;
+    const fullCols = Math.ceil(width / imgWidth);
+    const fullRows = Math.ceil(height / imgHeight);
 
-    // 1. 优先绘制所有完整的块（最常见的情况，无需边界计算）
+    // 绘制所有的块，无需考虑边界
     for (let row = 0; row < fullRows; row++) {
       const drawY = y + row * imgHeight;
       for (let col = 0; col < fullCols; col++) {
@@ -147,37 +145,6 @@ export class ImageRenderer {
       }
     }
 
-    // 2. 处理右边界的部分列（如果存在）
-    if (hasPartialCol) {
-      const partialWidth = width - fullCols * imgWidth;
-      const partialColX = x + fullCols * imgWidth;
-
-      // 完整行的部分列
-      for (let row = 0; row < fullRows; row++) {
-        const drawY = y + row * imgHeight;
-        ctx.drawImage(img, 0, 0, partialWidth, imgHeight, partialColX, drawY, partialWidth, imgHeight);
-      }
-
-      // 右下角的部分块（如果底边界也是部分的）
-      if (hasPartialRow) {
-        const partialHeight = height - fullRows * imgHeight;
-        const partialRowY = y + fullRows * imgHeight;
-        ctx.drawImage(img, 0, 0, partialWidth, partialHeight, partialColX, partialRowY, partialWidth, partialHeight);
-      }
-    }
-
-    // 3. 处理底边界的部分行（如果存在）
-    if (hasPartialRow) {
-      const partialHeight = height - fullRows * imgHeight;
-      const partialRowY = y + fullRows * imgHeight;
-
-      // 完整列的部分行
-      for (let col = 0; col < fullCols; col++) {
-        const drawX = x + col * imgWidth;
-        ctx.drawImage(img, 0, 0, imgWidth, partialHeight, drawX, partialRowY, imgWidth, partialHeight);
-      }
-    }
-
     ctx.restore();
   }