ScifiRectangle 切角矩形

⚡WASM 驱动

👑首创

TechUI Scifi Geometry 系列中的通用基础组件。

ScifiRectangle 提供了一个带有物理切角（Chamfer）的矩形容器。在科幻界面设计中，为了避免直角的枯燥和圆角的柔弱，通常会采用“切角”设计来体现工业感和硬朗感。

该组件通过数学公式动态计算四个角的坐标，支持标准切角与复杂的机械切角变体，非常适合作为通用信息卡片、弹窗背景或文本容器。

基础用法

默认形态

默认情况下，ScifiRectangle 渲染为一个四个角都被切掉的矩形。 切角的大小是经过算法优化的，会根据容器尺寸自动调整，保证视觉平衡。

<template>
  <div class="card-group">
    <ScifiRectangle />
    
    <ScifiRectangle :width="400" :height="300" />
  </div>
</template>

视觉特性与变体

ScifiRectangle 提供了丰富的角部处理和装饰选项，使其能适应从简约到复杂的各种场景。

机械切角 (Corner Alt)

这是 ScifiRectangle 最显著的变体功能。

• 默认 (False): 标准切角。四个角是简单的直线切割。
• True: 机械切角。角部会变得更复杂，呈现出类似“括号”或“加固件”的形态，视觉上更具防御感和厚重感。

<template>
  <ScifiRectangle :cornerAlt="true" :borderWidth="2" />
</template>

双层幻影 (Decoration Alt)

开启 decorationAlt 后，会在主边框下方生成一个半透明的“幽灵层”。 配合 cornerAlt 使用时，双层结构会产生非常精密的机械咬合感。

• decoAltScale: 缩放比例 (如 1.04)。
• decoAltTransX/Y: 微调位移。

<template>
  <ScifiRectangle 
    :cornerAlt="true"
    :decorationAlt="true"
    :decoAltScale="1.03"
    :decoAltTransX="5"
    :decoAltTransY="5"
  />
</template>

渐变背景

支持线性渐变填充，常用于制作全息投影风格的面板背景。

<template>
  <ScifiRectangle 
    :gradientBackground="true" 
    :borderd="false"
  />
</template>

尺寸与动态计算

ScifiRectangle 的切角尺寸并非固定像素，而是基于数学公式的动态切角。 这意味着无论您将矩形设置得多大或多小，切角的比例始终保持协调，不会出现“巨型矩形配微型切角”的不协调感。

• Width/Height: 定义矩形的整体边界。
• BorderWidth: 边框线条的粗细。

CSS变量

通过 CSS 变量，您可以定义矩形的颜色风格。

案例：深空数据板 (Deep Space Pad)

此案例定义了一个深蓝色调、低透明度的信息板风格。

<template>
  <ScifiRectangle 
    className="geom-pad" 
    :width="350" 
    :height="200"
    :cornerAlt="true"
  />
</template>

<style lang="less">
.geom-pad {
  /* 边框与高亮 */
  --sf-geom-bd: #1e3a8a;     /*以此深蓝边框 */
  --sf-geom-hlite: #3b82f6;  /* 亮蓝装饰 */
  
  /* 背景 */
  --sf-geom-bg: rgba(15, 23, 42, 0.8); /* 深色实底 */
  
  /* 发光 */
  --sf-geom-glow: #60a5fa;
  --sf-geom-glowop: 0.5;
}
</style>

变量字典

以下是 ScifiRectangle 支持的主要 CSS 变量：

变量名	说明	默认值
--sf-geom-bg	主背景色	var(--scifi-bg)
--sf-geom-bg_alt	辅助背景色 (用于渐变)	var(--scifi-bg_alt)
--sf-geom-bd	边框颜色	var(--scifi-bd)
--sf-geom-hlite	装饰层/高亮颜色	var(--scifi-hlite)
--sf-geom-focus	焦点颜色	var(--scifi-focus)
--sf-geom-glow	发光颜色	var(--scifi-hlite)

API 参考

Props

属性名	说明	类型	默认值
width	宽度。容器宽度 (px)	Number	300
height	高度。容器高度 (px)	Number	150
cornerAlt	机械切角。false=标准切角, true=机械加固切角	Boolean	false
decorationAlt	双层装饰。开启幽灵层	Boolean	false
decoAltScale	装饰层缩放	Number	—
decoAltTransX	装饰层 X 轴位移	Number	—
decoAltTransY	装饰层 Y 轴位移	Number	—
gradientBackground	渐变开关	Boolean	false
borderd	是否显示边框	Boolean	true
borderWidth	边框宽度	Number	—
glow	发光开关	Boolean	true
backgroundOpacity	背景不透明度	Number	—
className	自定义类名	String	—

Slots

插槽名	说明
default	组件内容。内容会被 SVG mask 裁剪，确保内容不会超出切角矩形边界。