PPTX
效果与填充
为形状应用阴影、发光、3D 效果和各种填充类型
通过视觉效果（阴影、发光、3D）和填充（纯色、渐变、图片、透明）增强形状。
#纯色填充
import { generatePresentation } from "@office-open/pptx";
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "6.6cm",
"properties": {
"fill": {
"type": "solid",
"color": "2E74B5"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "6.6cm",
properties: {
fill: { type: "solid", color: "2E74B5" },
},
},
},
],
}
简写形式 -- 直接传入颜色字符串：
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "6.6cm",
"properties": {
"fill": "2E74B5"
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "6.6cm",
properties: {
fill: "2E74B5",
},
},
},
],
}
#渐变填充
#线性渐变（带角度）
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "6.6cm",
"properties": {
"fill": {
"type": "gradient",
"stops": [
{
"position": 0,
"color": "0D47A1"
},
{
"position": 100,
"color": "42A5F5"
}
],
"angle": 45
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "6.6cm",
properties: {
fill: {
type: "gradient",
stops: [
{ position: 0, color: "0D47A1" },
{ position: 100, color: "42A5F5" },
],
angle: 45,
},
},
},
},
],
}
#径向渐变（带路径）
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "10.6cm",
"properties": {
"geometry": "ellipse",
"fill": {
"type": "gradient",
"stops": [
{
"position": 0,
"color": "FFFFFF"
},
{
"position": 100,
"color": "1565C0"
}
],
"path": "circle"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "10.6cm",
properties: {
geometry: "ellipse",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "FFFFFF" },
{ position: 100, color: "1565C0" },
],
path: "circle",
},
},
},
},
],
}
#多色标渐变
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "6.6cm",
"properties": {
"fill": {
"type": "gradient",
"stops": [
{
"position": 0,
"color": "E53935"
},
{
"position": 50,
"color": "FF9800"
},
{
"position": 100,
"color": "FFEB3B"
}
],
"angle": 90
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "6.6cm",
properties: {
fill: {
type: "gradient",
stops: [
{ position: 0, color: "E53935" },
{ position: 50, color: "FF9800" },
{ position: 100, color: "FFEB3B" },
],
angle: 90,
},
},
},
},
],
}
#图片填充（Blip Fill）
data 字段接受原始字节（Uint8Array、ArrayBuffer、Buffer），也支持 base64 data URL（如 data:image/png;base64,...）。
import * as fs from "node:fs";
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "9.3cm",
"properties": {
"fill": {
"type": "blip",
"data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
"imageType": "png"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "9.3cm",
properties: {
fill: {
type: "blip",
data: new Uint8Array(fs.readFileSync("texture.png")),
imageType: "png",
},
},
},
},
],
}
#无填充（透明）
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "13.2cm",
"height": "6.6cm",
"properties": {
"fill": {
"type": "none"
},
"outline": {
"color": "2E74B5",
"width": 2
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "13.2cm",
height: "6.6cm",
properties: {
fill: { type: "none" },
outline: { color: "2E74B5", width: 12700 },
},
},
},
],
}
#轮廓
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "13.2cm",
"height": "6.6cm",
"properties": {
"fill": {
"type": "solid",
"color": "E3F2FD"
},
"outline": {
"color": "1565C0",
"width": "0.1cm",
"dash": "solid"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "13.2cm",
height: "6.6cm",
properties: {
fill: { type: "solid", color: "E3F2FD" },
outline: {
color: "1565C0",
width: "1pt", // number = EMU，或 UniversalMeasure 字符串（"1pt"、"0.1cm"）；12700 = 1pt
dash: "solid", // "solid" | "dot" | "dash" | "lgDash" | "dashDot" | "lgDashDot" | "lgDashDotDot" | "sysDash" | "sysDot" | "sysDashDot" | "sysDashDotDash"
},
},
},
},
],
}
#效果
使用 effects 属性控制阴影、发光、倒影、柔化边缘和 3D 效果：
#外部阴影
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "ED7D31",
"effects": {
"outerShadow": {
"blurRadius": 50800,
"distance": 38100,
"direction": 90,
"color": {
"value": "000000",
"transforms": {
"alpha": 50
}
}
}
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "ED7D31",
effects: {
outerShadow: {
blurRadius: 50800, // 模糊半径（EMU 或 UniversalMeasure）
distance: 38100, // 偏移距离（EMU 或 UniversalMeasure）
direction: 90, // 角度（度）
color: { value: "000000", transforms: { alpha: 50 } }, // alpha = 不透明度百分比
},
},
},
},
},
],
}
#内部阴影
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "5B9BD5",
"effects": {
"innerShadow": {
"blurRadius": 40000,
"distance": 30000,
"direction": 90,
"color": {
"value": "000000",
"transforms": {
"alpha": 40
}
}
}
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "5B9BD5",
effects: {
innerShadow: {
blurRadius: 40000,
distance: 30000,
direction: 90, // 角度（度）
color: { value: "000000", transforms: { alpha: 40 } }, // alpha = 不透明度百分比
},
},
},
},
},
],
}
#发光
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "70AD47",
"effects": {
"glow": {
"radius": 152400,
"color": {
"value": "92D050",
"transforms": {
"alpha": 60
}
}
}
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "70AD47",
effects: {
glow: {
radius: 152400, // 发光半径（EMU 或 UniversalMeasure）
color: { value: "92D050", transforms: { alpha: 60 } }, // alpha = 不透明度百分比
},
},
},
},
},
],
}
#倒影
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "FFC000",
"effects": {
"reflection": {
"blurRadius": 6350,
"distance": 38100,
"direction": 90,
"startAlpha": 90,
"endAlpha": 0
}
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "FFC000",
effects: {
reflection: {
blurRadius: 6350,
distance: 38100,
direction: 90, // 角度（度）
startAlpha: 90, // 起始不透明度百分比
endAlpha: 0, // 结束不透明度百分比
},
},
},
},
},
],
}
#柔化边缘
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "BF8F00",
"effects": {
"softEdge": 50800
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "BF8F00",
effects: {
softEdge: 50800, // 柔化边缘半径（EMU 或 UniversalMeasure）—— 标量，非对象
},
},
},
},
],
}
#3D 旋转和斜面
3D 拆成两个形状属性 —— 不在 effects 下：
scene3d（a:scene3d）—— 3D 场景：camera与lightRig（可选backdrop）。相机旋转是球坐标{ lat, lon, rev }，单位为度；lightRig携带rig与direction。shape3d（a:sp3d）—— 3D 形状本体：bevelT/bevelB（顶/底斜面）、extrusionH、contourW、z与prstMaterial。
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "4.0cm",
"properties": {
"fill": "FFC000",
"scene3d": {
"camera": {
"preset": "perspectiveFront",
"fov": 30,
"rotation": {
"lat": 0,
"lon": 0,
"rev": 10
}
},
"lightRig": {
"rig": "threePt",
"direction": "top"
}
},
"shape3d": {
"bevelT": {
"w": 76200,
"h": 76200,
"prst": "circle"
},
"extrusionH": 50000,
"prstMaterial": "plastic"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "4.0cm",
properties: {
fill: "FFC000",
scene3d: {
camera: {
preset: "perspectiveFront",
fov: 30, // 视场角（度）
rotation: { lat: 0, lon: 0, rev: 10 }, // 球坐标，单位度
},
lightRig: { rig: "threePt", direction: "top" },
},
shape3d: {
bevelT: { w: 76200, h: 76200, prst: "circle" }, // EMU
extrusionH: 50000, // 挤出高度（EMU）
prstMaterial: "plastic", // "plastic" | "metal" | "matte" | "flat" | …
},
},
},
},
],
}
#组合效果
可以同时应用多种效果：
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"properties": {
"fill": "7030A0",
"effects": {
"outerShadow": {
"blurRadius": 40000,
"distance": 30000,
"direction": 45,
"color": {
"value": "000000",
"transforms": {
"alpha": 40
}
}
},
"glow": {
"radius": 101600,
"color": {
"value": "B381E7",
"transforms": {
"alpha": 35
}
}
}
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
properties: {
fill: "7030A0",
effects: {
outerShadow: {
blurRadius: 40000,
distance: 30000,
direction: 45, // 角度（度）
color: { value: "000000", transforms: { alpha: 40 } },
},
glow: { radius: 101600, color: { value: "B381E7", transforms: { alpha: 35 } } },
},
},
},
},
],
}
#Effects 选项
effects 只承载扁平的 2D 效果（EffectListOptions）。3D 直接位于形状上，分属
scene3d 与 shape3d。
| 属性 | 类型 | 说明 |
|---|---|---|
effects.blur | BlurEffectOptions | 模糊效果 |
effects.glow | GlowEffectOptions | 发光效果（radius + color） |
effects.innerShadow | InnerShadowEffectOptions | 内部阴影（blurRadius、distance、direction 单位为度、color） |
effects.outerShadow | OuterShadowEffectOptions | 外部阴影（blurRadius、distance、direction 单位为度、color） |
effects.reflection | ReflectionEffectOptions | true | 倒影（blurRadius、distance、direction 单位为度、startAlpha、endAlpha） |
effects.softEdge | number | UniversalMeasure | 柔化边缘半径 —— 标量（EMU 或 UniversalMeasure） |
scene3d | Scene3DOptions | 3D 场景 —— camera 与 lightRig（角度单位为度） |
shape3d | Shape3DOptions | 3D 形状本体 —— bevelT/bevelB、extrusionH、contourW、z、prstMaterial |
阴影与发光的 color 是 SolidFillOptions（{ value, transforms }）；不透明度
通过 color.transforms.alpha（整数百分比）传入，而非顶层 alpha。