feat: 修改 renderTiled

Author: anewzhuang

docs/components/overview.md

@@ -127,7 +127,7 @@ Layout 通过 xml 组织布局，Layout 支持的标签列表如下。
 
 #### 图像渲染模式
 
-> v1.0.29 支持三种图像渲染模式，这些模式既适用于 Image 组件（通过 `imageType` 属性），也适用于所有支持背景图片的容器（通过 `backgroundImageType` 属性）。
+> v1.0.16 支持三种图像渲染模式，这些模式既适用于 Image 组件（通过 `imageType` 属性），也适用于所有支持背景图片的容器（通过 `backgroundImageType` 属性）。
 
 | 渲染模式 | 描述 | 适用场景 | 参数要求 | 性能 |
 |---------|------|----------|----------|------|

src/common/imageRenderer.ts

@@ -39,11 +39,11 @@ export class ImageRenderer {
    * 简单拉伸渲染
    */
   private static renderSimple(
-    ctx: CanvasRenderingContext2D, 
-    img: HTMLImageElement, 
-    x: number, 
-    y: number, 
-    width: number, 
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    x: number,
+    y: number,
+    width: number,
     height: number
   ): void {
     ctx.drawImage(img, x, y, width, height);
@@ -53,12 +53,12 @@ export class ImageRenderer {
    * 九宫格渲染
    */
   private static renderSliced(
-    ctx: CanvasRenderingContext2D, 
-    img: HTMLImageElement, 
-    x: number, 
-    y: number, 
-    width: number, 
-    height: number, 
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
     inset?: IInsetParams
   ): void {
     if (!inset) {
@@ -71,139 +71,200 @@ export class ImageRenderer {
     const imgWidth = img.width;
     const imgHeight = img.height;
 
+    // 先检查原始inset值是否合法
+    if (left < 0 || top < 0 || right < 0 || bottom < 0) {
+      console.warn('[Layout] inset values cannot be negative, fallback to simple render');
+      ImageRenderer.renderSimple(ctx, img, x, y, width, height);
+      return;
+    }
+
+    if (left + right >= imgWidth || top + bottom >= imgHeight) {
+      console.warn(`[Layout] inset values too large for image size (${imgWidth}x${imgHeight}), fallback to simple render`);
+      ImageRenderer.renderSimple(ctx, img, x, y, width, height);
+      return;
+    }
+
+    // 确保inset值不超过图片尺寸（此时已经验证过合法性）
+    const safeLeft = Math.min(left, imgWidth);
+    const safeTop = Math.min(top, imgHeight);
+    const safeRight = Math.min(right, imgWidth);
+    const safeBottom = Math.min(bottom, imgHeight);
+
     // 计算源区域尺寸
-    const centerSrcWidth = imgWidth - left - right;
-    const centerSrcHeight = imgHeight - top - bottom;
+    const centerSrcWidth = imgWidth - safeLeft - safeRight;
+    const centerSrcHeight = imgHeight - safeTop - safeBottom;
 
     // 计算目标区域尺寸
-    const targetCenterWidth = Math.max(0, width - left - right);
-    const targetCenterHeight = Math.max(0, height - top - bottom);
+    const targetCenterWidth = Math.max(0, width - safeLeft - safeRight);
+    const targetCenterHeight = Math.max(0, height - safeTop - safeBottom);
 
     // 1. 渲染四个角（保持原样）
-    ImageRenderer.renderCorners(ctx, img, x, y, width, height, imgWidth, imgHeight, left, top, right, bottom);
+    ImageRenderer.renderCorners(ctx, img, x, y, width, height, imgWidth, imgHeight, safeLeft, safeTop, safeRight, safeBottom);
 
     // 2. 渲染四条边（拉伸）
-    ImageRenderer.renderEdges(ctx, img, x, y, width, height, imgWidth, imgHeight, left, top, right, bottom, centerSrcWidth, centerSrcHeight, targetCenterWidth, targetCenterHeight);
+    ImageRenderer.renderEdges(ctx, img, x, y, width, height, imgWidth, imgHeight, safeLeft, safeTop, safeRight, safeBottom, centerSrcWidth, centerSrcHeight, targetCenterWidth, targetCenterHeight);
 
     // 3. 渲染中心区域（拉伸）
     if (targetCenterWidth > 0 && targetCenterHeight > 0 && centerSrcWidth > 0 && centerSrcHeight > 0) {
-      ctx.drawImage(img, left, top, centerSrcWidth, centerSrcHeight,
-                    x + left, y + top, targetCenterWidth, targetCenterHeight);
+      ctx.drawImage(img, safeLeft, safeTop, centerSrcWidth, centerSrcHeight,
+        x + safeLeft, y + safeTop, targetCenterWidth, targetCenterHeight);
     }
   }
 
   /**
    * 平铺渲染
    */
   private static renderTiled(
-    ctx: CanvasRenderingContext2D, 
-    img: HTMLImageElement, 
-    x: number, 
-    y: number, 
-    width: number, 
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    x: number,
+    y: number,
+    width: number,
     height: number
   ): void {
-    const pattern = ctx.createPattern(img, 'repeat');
-    if (!pattern) return;
+    const imgWidth = img.width;
+    const imgHeight = img.height;
 
     ctx.save();
-    
+
     // 设置裁剪区域
     ctx.beginPath();
     ctx.rect(x, y, width, height);
     ctx.clip();
-    
-    // 设置pattern并填充
-    ctx.fillStyle = pattern;
-    ctx.fillRect(x, y, width, height);
-    
+
+    // 预计算完整块和边界块的数量，避免重复计算
+    const fullCols = Math.floor(width / imgWidth);
+    const fullRows = Math.floor(height / imgHeight);
+    const hasPartialCol = width % imgWidth > 0;
+    const hasPartialRow = height % imgHeight > 0;
+
+    // 1. 优先绘制所有完整的块（最常见的情况，无需边界计算）
+    for (let row = 0; row < fullRows; row++) {
+      const drawY = y + row * imgHeight;
+      for (let col = 0; col < fullCols; col++) {
+        const drawX = x + col * imgWidth;
+        ctx.drawImage(img, drawX, drawY);
+      }
+    }
+
+    // 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();
   }
 
   /**
    * 渲染九宫格的四个角
    */
   private static renderCorners(
-    ctx: CanvasRenderingContext2D, 
-    img: HTMLImageElement, 
-    x: number, 
-    y: number, 
-    width: number, 
-    height: number, 
-    imgWidth: number, 
-    imgHeight: number, 
-    left: number, 
-    top: number, 
-    right: number, 
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    imgWidth: number,
+    imgHeight: number,
+    left: number,
+    top: number,
+    right: number,
     bottom: number
   ): void {
     // 左上角
     if (left > 0 && top > 0) {
       ctx.drawImage(img, 0, 0, left, top, x, y, left, top);
     }
-    
+
     // 右上角
     if (right > 0 && top > 0) {
-      ctx.drawImage(img, imgWidth - right, 0, right, top, 
-                    x + width - right, y, right, top);
+      ctx.drawImage(img, imgWidth - right, 0, right, top,
+        x + width - right, y, right, top);
     }
-    
+
     // 左下角
     if (left > 0 && bottom > 0) {
-      ctx.drawImage(img, 0, imgHeight - bottom, left, bottom, 
-                    x, y + height - bottom, left, bottom);
+      ctx.drawImage(img, 0, imgHeight - bottom, left, bottom,
+        x, y + height - bottom, left, bottom);
     }
-    
+
     // 右下角
     if (right > 0 && bottom > 0) {
       ctx.drawImage(img, imgWidth - right, imgHeight - bottom, right, bottom,
-                    x + width - right, y + height - bottom, right, bottom);
+        x + width - right, y + height - bottom, right, bottom);
     }
   }
 
   /**
    * 渲染九宫格的四条边
    */
   private static renderEdges(
-    ctx: CanvasRenderingContext2D, 
-    img: HTMLImageElement, 
-    x: number, 
-    y: number, 
-    width: number, 
-    height: number, 
-    imgWidth: number, 
-    imgHeight: number, 
-    left: number, 
-    top: number, 
-    right: number, 
-    bottom: number, 
-    centerSrcWidth: number, 
-    centerSrcHeight: number, 
-    targetCenterWidth: number, 
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    imgWidth: number,
+    imgHeight: number,
+    left: number,
+    top: number,
+    right: number,
+    bottom: number,
+    centerSrcWidth: number,
+    centerSrcHeight: number,
+    targetCenterWidth: number,
     targetCenterHeight: number
   ): void {
     // 上边 - 水平拉伸
     if (top > 0 && targetCenterWidth > 0) {
       ctx.drawImage(img, left, 0, centerSrcWidth, top,
-                    x + left, y, targetCenterWidth, top);
+        x + left, y, targetCenterWidth, top);
     }
-    
+
     // 下边 - 水平拉伸  
     if (bottom > 0 && targetCenterWidth > 0) {
       ctx.drawImage(img, left, imgHeight - bottom, centerSrcWidth, bottom,
-                    x + left, y + height - bottom, targetCenterWidth, bottom);
+        x + left, y + height - bottom, targetCenterWidth, bottom);
     }
-    
+
     // 左边 - 垂直拉伸
     if (left > 0 && targetCenterHeight > 0) {
       ctx.drawImage(img, 0, top, left, centerSrcHeight,
-                    x, y + top, left, targetCenterHeight);
+        x, y + top, left, targetCenterHeight);
     }
-    
+
     // 右边 - 垂直拉伸
     if (right > 0 && targetCenterHeight > 0) {
       ctx.drawImage(img, imgWidth - right, top, right, centerSrcHeight,
-                    x + width - right, y + top, right, targetCenterHeight);
+        x + width - right, y + top, right, targetCenterHeight);
     }
   }
 } 

src/index.ts

@@ -66,7 +66,7 @@ class Layout extends Element {
   /**
    * 当前 Layout 版本，一般跟小游戏插件版本对齐
    */
-  public version = '1.0.15';
+  public version = '1.0.16';
 
   env = env;