PPTX
效果与填充
为形状应用阴影、发光、3D 效果和各种填充类型
通过视觉效果（阴影、发光、3D）和填充（纯色、渐变、图片、透明）增强形状。
纯色填充
import { Shape } from "@office-open/pptx";
new Shape({
x: 1,
y: 1,
width: 4,
height: 3,
fill: { type: "solid", color: "2E74B5" },
});
简写形式 — 直接传入颜色字符串：
new Shape({
x: 1,
y: 1,
width: 4,
height: 3,
fill: "2E74B5",
});
渐变填充
线性渐变（带角度）
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "0D47A1" },
{ position: 100, color: "42A5F5" },
],
angle: 45,
},
});
径向渐变（带路径）
new Shape({
x: 1,
y: 1,
width: 5,
height: 5,
geometry: "ellipse",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "FFFFFF" },
{ position: 100, color: "1565C0" },
],
path: "circle",
},
});
多色标渐变
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "E53935" },
{ position: 50, color: "FF9800" },
{ position: 100, color: "FFEB3B" },
],
angle: 90,
},
});
图片填充（Blip Fill）
import fs from "node:fs";
new Shape({
x: 1,
y: 1,
width: 6,
height: 4,
fill: {
type: "blip",
data: fs.readFileSync("texture.png"),
imageType: "png",
},
});
无填充（透明）
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "noFill" },
outline: { color: "2E74B5", width: 2 },
});
轮廓
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "E3F2FD" },
outline: {
color: "1565C0",
width: 2, // 宽度（磅）
dashStyle: "solid", // "solid" | "dash" | "dashDot" | "dot" | "lgDash"
},
});
阴影
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
shadow: {
type: "outer",
blur: 6, // 模糊半径（磅）
distance: 3, // 偏移距离（磅）
direction: 2700000, // 角度（60000分之一度，45° = 2700000）
color: "000000",
opacity: 40, // 不透明度百分比（0-100）
},
});
发光
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
effects: {
glow: {
color: "42A5F5",
radius: 10, // 发光半径（磅）
opacity: 60,
},
},
});
3D 效果
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
effects: {
threeD: {
rotation: 30,
depth: 20,
color: "1A237E",
},
},
});
组合效果
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "1565C0" },
{ position: 100, color: "42A5F5" },
],
angle: 135,
},
outline: { color: "0D47A1", width: 1 },
shadow: {
type: "outer",
blur: 8,
distance: 4,
direction: 2700000,
color: "000000",
opacity: 30,
},
text: "Styled Shape",
});
高级效果 API
使用 effects 属性精细控制阴影、发光、倒影和 3D 效果：
外部阴影
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "ED7D31",
effects: {
outerShadow: {
blur: 50800, // 模糊半径（EMU）
distance: 38100, // 偏移距离（EMU）
direction: 5400000, // 角度（60000分之一度）
color: "000000",
alpha: 50, // 不透明度百分比
},
},
});
内部阴影
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "5B9BD5",
effects: {
innerShadow: {
blur: 40000,
distance: 30000,
direction: 5400000,
color: "000000",
alpha: 40,
},
},
});
发光
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "70AD47",
effects: {
glow: {
radius: 152400, // 发光半径（EMU）
color: "92D050",
alpha: 60,
},
},
});
倒影
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "FFC000",
effects: {
reflection: {
blurRadius: 6350,
distance: 38100,
direction: 5400000,
startAlpha: 90, // 起始不透明度百分比
endAlpha: 0, // 结束不透明度百分比
},
},
});
柔化边缘
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "BF8F00",
effects: {
softEdge: { radius: 50800 },
},
});
3D 旋转
new Shape({
x: 1,
y: 1,
width: 200,
height: 200,
fill: "4472C4",
effects: {
rotation3D: {
x: 20, // X 轴旋转（度）
y: 30, // Y 轴旋转（度）
z: 10, // Z 轴旋转（度）
perspective: 500, // 透视值
},
},
});
挤出和斜面
new Shape({
x: 1,
y: 1,
width: 200,
height: 150,
fill: "FFC000",
effects: {
rotation3D: { x: 25, y: 15 },
extrusionH: 50000, // 挤出高度（EMU）
material: "plastic", // "plastic" | "metal" | "matte" | "flat"
bevelTop: { width: 8, height: 8 },
},
});
组合效果
可以同时应用多种效果：
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "7030A0",
effects: {
outerShadow: {
blur: 40000,
distance: 30000,
direction: 2700000,
color: "000000",
alpha: 40,
},
glow: { radius: 101600, color: "B381E7", alpha: 35 },
},
});