Merge pull request #53 from ZhuangWeiMian/master

图片支持九宫格&平铺展示

Author: yuanzm

CHANGELOG.md

@@ -1,3 +1,6 @@
+#### 2025.7.14
+1. `A` 支持图片九宫格拉伸、平铺渲染模式
+
 #### 2024.11.11
 1. `A` 新增insertElement;
 2. `U` 优化ts声明协议；

dist/index.d.ts

@@ -72,13 +72,35 @@ interface IStyle {
     borderColor?: string;
     borderTopColor?: string;
     backgroundImage?: string;
+    /**
+     * 背景图片的渲染模式
+     * simple: 简单拉伸（默认）
+     * sliced: 九宫格拉伸
+     * tiled: 平铺模式
+     */
+    backgroundImageType?: 'simple' | 'sliced' | 'tiled';
+    /**
+     * 背景图片的九宫格参数，格式为 "left top right bottom"
+     */
+    backgroundImageInset?: string;
     borderBottomColor?: string;
     borderLeftColor?: string;
     borderRightColor?: string;
     opacity?: number;
     fontWeight?: string;
     fontFamily?: string;
     transform?: string;
+    /**
+     * 图片渲染模式（用于Image组件）
+     * simple: 简单拉伸（默认）
+     * sliced: 九宫格拉伸
+     * tiled: 平铺模式
+     */
+    imageType?: 'simple' | 'sliced' | 'tiled';
+    /**
+     * 图片的九宫格参数，格式为 "left top right bottom"
+     */
+    imageInset?: string;
     textStrokeWidth?: number;
     textStrokeColor?: string;
     /**
@@ -169,11 +191,26 @@ interface IElementOptions {
     dataset?: IDataset;
 }
 
+interface IInsetParams {
+    /** 左边界距离 */
+    left: number;
+    /** 上边界距离 */
+    top: number;
+    /** 右边界距离 */
+    right: number;
+    /** 下边界距离 */
+    bottom: number;
+}
+type ImageRenderMode = 'simple' | 'sliced' | 'tiled';
 interface IRenderForLayout {
     rotate?: number;
     scaleX?: number;
     scaleY?: number;
     backgroundImage?: HTMLImageElement;
+    backgroundImageType?: ImageRenderMode;
+    backgroundImageInset?: IInsetParams;
+    imageType?: ImageRenderMode;
+    imageInset?: IInsetParams;
 }
 interface ITextShadow {
     offsetX: number;
@@ -370,6 +407,10 @@ declare class Element {
         width: number;
         height: number;
     };
+    /**
+     * 渲染背景图片，支持三种模式：simple、sliced、tiled
+     */
+    private renderBackgroundImage;
 }
 
 declare enum STATE {
@@ -773,4 +814,5 @@ declare class Layout extends Element {
 }
 declare const layout: Layout;
 
-export { BitMapText, Button, Canvas, EE, Element, type IStyle, Image, Layout, ScrollView, Text, View, layout as default, _default as env };
+export { BitMapText, Button, Canvas, EE, Element, Image, Layout, ScrollView, Text, View, layout as default, _default as env };
+export type { IStyle };