Skip to content

组合元素

Group

用来渲染组合内容,具体格式如下所示:

ts
type Group = {
  type: 'group';
  x: number;
  y: number;
  w: number;
  h: number;
  angle: number;
  detail: {
    children: Element;
    background: string;
    borderRadius?: string;
    borderWidth?: number;
    borderColor?: number;
  };
};

Group.detail 详解

元素的基本属性详情可以看 元素介绍-数据基本格式

Group.detail 数据格式

Rect 元素的detail属性

ts
type GroupDetail = {
  children: Array<Element>;
  background?: string;
  background?: string;
  borderWidth?: number;
  borderColor?: string;
};

Group.detail 数据属性内容

属性说明类型默认值是否必填备注
children组合子元素Array<Element>-true例如 #000000
background组合矩形颜色string-false例如 #000000
borderRadius组合边框角圆形半径number0false-
borderWidth组合边框宽度number0false-
borderColor组合边框颜色string-false例如 #000000

完整数据示例

js
const elementGroup = {
  name: 'group',
  x: 160,
  y: 120,
  w: 200,
  h: 100,
  angle: 30,
  type: 'group',
  detail: {
    children: []
  }
};

效果预览

Demo完整预览 Playground >>