排版幻灯片时，形状的旋转角度、位置和前后层次往往要反复调整：倾斜的标签更有动感，元素偏在一角会让版面失衡，多个形状重叠时，后添加的图形还可能遮住需要突出的内容。手工拖动虽然直观，却难以精确复现同一角度和坐标，批量修改时更费时。

Spire.Presentation for JavaScript 通过旋转角度、左上角坐标和叠放次序控制形状的朝向、位置与遮挡关系。整个处理过程基于 WebAssembly 在浏览器本地完成，无需安装 Office，也不依赖后端服务，演示文稿不必离开用户设备。

本文介绍三个核心功能点：

• 旋转 PowerPoint 形状
• 移动 PowerPoint 形状
• 调整 PowerPoint 形状的叠放次序

有关安装和项目配置，请参考 React 项目中集成 Spire.Presentation for JavaScript。以下示例默认 Spire.Presentation for JavaScript 已安装、WebAssembly 模块已初始化。

旋转 PowerPoint 形状

在强调某个元素或营造动感时，常常需要把图形倾斜一个角度。手工旋转难以精确复现同一角度，逐个调整也更费时。Rotation 属性以度为单位设置旋转角度，正值按顺时针方向旋转，形状围绕自身中心转动，形状中的文字也会随之倾斜。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件与演示文稿载入 VFS。
2. 创建 Presentation 对象并调用 LoadFromFile() 加载演示文稿，再用 Slides.get_Item(0) 取得第一张幻灯片。
3. 用 Shapes.get_Item(index) 取得要旋转的形状，索引从 0 开始。
4. 将旋转角度赋给 shape.Rotation，以度为单位，正值表示顺时针方向；旋转围绕形状中心进行，Left、Top、Width、Height 保持不变。
5. 调用 SaveToFile() 保存演示文稿，再调用 Presentation.Dispose() 释放资源，随后从 VFS 读出文件并触发下载。

旋转 PowerPoint 形状的代码如下：

function App() {
  const rotateShape = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 将字体与演示文稿载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ShapeLayout.pptx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载演示文稿并取得第一张幻灯片
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile(inputFileName);
    const slide = ppt.Slides.get_Item(0);

    // 取得要旋转的形状
    const shape = slide.Shapes.get_Item(1);

    // 顺时针旋转 30 度
    shape.Rotation = 30;

    // 保存演示文稿
    const outputFileName = 'RotateShape_result.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });

    // 释放演示文稿
    ppt.Dispose();

    // 从 VFS 读取结果文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>旋转形状</h1>
      <button onClick={rotateShape}>
        开始旋转
      </button>
    </div>
  );
}

export default App;

顺时针旋转形状后的演示文稿：

移动 PowerPoint 形状

形状的位置由左上角坐标决定，单位为点，原点位于幻灯片左上角。与手工拖动相比，直接设置坐标可以精确对齐，也便于按幻灯片尺寸计算居中、贴边等位置，不会因为画布缩放而产生偏差。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件与演示文稿载入 VFS。
2. 创建 Presentation 对象并调用 LoadFromFile() 加载演示文稿，再用 Slides.get_Item(0) 取得第一张幻灯片。
3. 用 Shapes.get_Item(index) 取得要移动的形状。
4. 通过 ppt.SlideSize.Size.Width 与 ppt.SlideSize.Size.Height 读取幻灯片尺寸，再结合形状自身的 Width、Height 计算水平居中与底部留白的坐标。
5. 将计算结果分别赋给 shape.Left 与 shape.Top，保存演示文稿后释放资源并下载结果。

移动 PowerPoint 形状的代码如下：

function App() {
  const moveShape = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 将字体与演示文稿载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ShapeLayout.pptx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载演示文稿并取得第一张幻灯片
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile(inputFileName);
    const slide = ppt.Slides.get_Item(0);

    // 取得要移动的形状
    const shape = slide.Shapes.get_Item(2);

    // 按幻灯片尺寸计算水平居中、距底部 40 点的位置
    const margin = 40;
    shape.Left = (ppt.SlideSize.Size.Width - shape.Width) / 2;
    shape.Top = ppt.SlideSize.Size.Height - shape.Height - margin;

    // 保存演示文稿
    const outputFileName = 'MoveShape_result.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });

    // 释放演示文稿
    ppt.Dispose();

    // 从 VFS 读取结果文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>移动形状</h1>
      <button onClick={moveShape}>
        开始移动
      </button>
    </div>
  );
}

export default App;

把形状移到页面底部居中位置后的演示文稿：

调整 PowerPoint 形状的叠放次序

幻灯片中的形状按添加顺序叠放，后添加的形状会盖住先添加的形状。多个元素重叠时，需要突出的内容可能被压在下面，背景色块也可能挡住文字。SetShapeArrange() 提供上移一层、下移一层、置于顶层、置于底层四种调整方式，适合逐层微调。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件与演示文稿载入 VFS。
2. 创建 Presentation 对象并调用 LoadFromFile() 加载演示文稿，再用 Slides.get_Item(0) 取得第一张幻灯片。
3. 用 Shapes.get_Item(index) 取得需要调整的形状，再调用 SetShapeArrange() 并传入所需的 ShapeArrange 枚举值。
4. 调用 SaveToFile() 保存演示文稿，再调用 Presentation.Dispose() 释放资源，随后从 VFS 读出文件并触发下载。

将形状置于顶层的代码如下：

function App() {
  const bringShapeToFront = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 将字体与演示文稿载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ShapeLayout.pptx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载演示文稿并取得第一张幻灯片
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile(inputFileName);
    const slide = ppt.Slides.get_Item(0);

    // 取得需要调整叠放次序的形状，并置于顶层
    const shape = slide.Shapes.get_Item(0);
    shape.SetShapeArrange(pptModule.ShapeArrange.BringToFront);

    // 保存演示文稿
    const outputFileName = 'BringToFront_result.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });

    // 释放演示文稿
    ppt.Dispose();

    // 从 VFS 读取结果文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>调整叠放次序</h1>
      <button onClick={bringShapeToFront}>
        置于顶层
      </button>
    </div>
  );
}

export default App;

将形状置于顶层后的演示文稿：

常见问题

旋转后形状的坐标会变化吗

原因：Rotation 只改变形状的旋转角度，不会修改 Left、Top、Width、Height。旋转围绕形状中心进行，因此旋转后的外接范围可能超出原来的矩形。

解决：需要为旋转后的形状预留空间时，按旋转后的外接范围估算边距，不要只看原始的宽高。

旋转角度超过 360 度会怎样

原因：Rotation 会按 360 度归一化。设置 390 后读回 30，设置 360 后读回 0，保存到演示文稿中的也是归一化后的角度。

解决：直接按 0–360 度设置需要的角度即可，不必通过叠加整圈来表达。

文字会跟着形状一起旋转吗

原因：Rotation 作用于整个形状，形状内的文字属于形状的一部分，因此会随形状一起倾斜。

解决：排版时按倾斜后的文字范围预留空间；如果文字必须保持水平，不要把文字放进需要旋转的形状，改用独立文本框并与图形分开处理。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。