欢迎光临
我的个人博客网站

dotnet OpenXML 转换 PathFillModeValues 为颜色特效

在 OpenXml 预设形状,有一些形状设置了 PathFillModeValues 枚举,此枚举提供了亮暗的蒙层特效。具体的特效是让形状选择一个画刷,在画刷上加上特效。如立体几何 Cube 形状,在 Cube 不同的面有不同的颜色,颜色的亮度不同

接下来通过 OpenXML SDK 实现读取 PPTX 文件,解析 Cube 预设形状,在界面绘制,让填充和 PowerPoint 的相同。如下图,下图没有绘制线条,因此看起来和 PowerPoint 显示的有一点不同

dotnet OpenXML 转换 PathFillModeValues 为颜色特效

通过 ECMA 376 文档可以了解到 Cube 由 4 个 Path 组成,公式代码如下

    <pathLst xmlns="http://schemas.openxmlformats.org/drawingml/2006/main">       <path stroke="false" extrusionOk="false">         <moveTo>           <pt x="l" y="y1" />         </moveTo>         <lnTo>           <pt x="x4" y="y1" />         </lnTo>         <lnTo>           <pt x="x4" y="b" />         </lnTo>         <lnTo>           <pt x="l" y="b" />         </lnTo>         <close />       </path>       <path stroke="false" fill="darkenLess" extrusionOk="false">         <moveTo>           <pt x="x4" y="y1" />         </moveTo>         <lnTo>           <pt x="r" y="t" />         </lnTo>         <lnTo>           <pt x="r" y="y4" />         </lnTo>         <lnTo>           <pt x="x4" y="b" />         </lnTo>         <close />       </path>       <path stroke="false" fill="lightenLess" extrusionOk="false">         <moveTo>           <pt x="l" y="y1" />         </moveTo>         <lnTo>           <pt x="y1" y="t" />         </lnTo>         <lnTo>           <pt x="r" y="t" />         </lnTo>         <lnTo>           <pt x="x4" y="y1" />         </lnTo>         <close />       </path>       <path fill="none" extrusionOk="false">         <moveTo>           <pt x="l" y="y1" />         </moveTo>         <lnTo>           <pt x="y1" y="t" />         </lnTo>         <lnTo>           <pt x="r" y="t" />         </lnTo>         <lnTo>           <pt x="r" y="y4" />         </lnTo>         <lnTo>           <pt x="x4" y="b" />         </lnTo>         <lnTo>           <pt x="l" y="b" />         </lnTo>         <close />         <moveTo>           <pt x="l" y="y1" />         </moveTo>         <lnTo>           <pt x="x4" y="y1" />         </lnTo>         <lnTo>           <pt x="r" y="t" />         </lnTo>         <moveTo>           <pt x="x4" y="y1" />         </moveTo>         <lnTo>           <pt x="x4" y="b" />         </lnTo>       </path>     </pathLst> 

可以看到在 Path 元素上,有 Fill 属性,分别设置了 darkenLess 和 lightenLess 的值,对应到 OpenXML SDK 的 PathFillModeValues 类型

    public enum PathFillModeValues     {         [EnumString("none")]         None,          [EnumString("norm")]         Norm,          [EnumString("lighten")]         Lighten,          [EnumString("lightenLess")]         LightenLess,          [EnumString("darken")]         Darken,          [EnumString("darkenLess")]         DarkenLess     } 

在 WPF 里面绘制的逻辑是先获取所有的 Path 内容,接着将所有的 Path 绘制作为底色。底色绘制采用填充,接着按照 PathFillModeValues 的值,再次画上 Geometry 覆盖底色

通过 WPF 多媒体提供的默认的颜色混合功能,通过颜色的 Alpha 通道让覆盖底色的部分修改亮度

新建一个空的 WPF 应用,在应用里面放入一个创建了默认的 Cube 形状的 PPTX 文件,在窗口 Loaded 事件里面读取这份测试的文件

        public MainWindow()         {             InitializeComponent();              Loaded += MainWindow_Loaded;         }          private void MainWindow_Loaded(object sender, RoutedEventArgs e)         {             OpenPptxFile(new FileInfo("Test.pptx"));         } 

以上的 Test.pptx 可以通过本文末尾拿到下载地址

在开始之前,期望大家已了解如何在 dotnet 应用里面读取 PPT 文件,如果还不了解读取方法,请参阅 C# dotnet 使用 OpenXml 解析 PPT 文件

在 OpenPptxFile 执行具体的逻辑,读取文件,获取到页面,从页面读取出形状

        private void OpenPptxFile(FileInfo file)         {             using var presentationDocument = PresentationDocument.Open(file.FullName, false);             var slide = presentationDocument.PresentationPart!.SlideParts.First().Slide;             // 这是对测试文件有要求的,要求一定传入的是立方体。请在具体的项目代码里面,替换为你需要的逻辑             var shape = slide.Descendants<Shape>().First();             var shapeProperties = shape.ShapeProperties;             var presetGeometry = shapeProperties!.GetFirstChild<PresetGeometry>();         } 

上面的代码只是作为测试使用,因此要求测试文件一定传入的是立方体。如果你想在自己的项目使用本文的方法,还请自行处理细节。在我的其他博客里面包含了详细的各个细节处理的逻辑,为了让本文清晰,这里就不加上太多细节逻辑

如获取元素的尺寸的代码,这里固定默认的大小。以下代码的 EmuSize 和 Emu 都是采用 OpenXML 单位库,详细请看 Office Open XML 的测量单位

            var elementSize = new EmuSize(new Emu(1216152), new Emu(1216152)); 

通过传入的预设形状和元素的大小,可以计算出几何信息。几何信息包含 Path 定义的内容,使用如下定义

    /// <summary>     /// 对应PPT的Shape Path     /// </summary>     public readonly struct ShapePath     {         /// <summary>         /// 创建PPT的Geometry Path         /// </summary>         /// <param name="path">OpenXml Path字符串</param>         /// <param name="fillMode">OpenXml的Path Fill Mode  </param>         /// <param name="isStroke">是否有轮廓</param>         /// <param name="isExtrusionOk">指定使用 3D 拉伸可能在此路径</param>         /// <param name="eumWidth">指定的宽度或在路径坐标系统中应在使用的最大的 x 坐标</param>         /// <param name="eumHeight">指定框架的高度或在路径坐标系统中应在使用的最大的 y 坐标</param>         public ShapePath(string path, PathFillModeValues fillMode = PathFillModeValues.Norm, bool isStroke = true, bool isExtrusionOk = false, double eumWidth = 0, double eumHeight = 0)         {             Path = path;             IsStroke = isStroke;             FillMode = fillMode;             IsFilled = fillMode is not PathFillModeValues.None;             IsExtrusionOk = isExtrusionOk;             Width = new Emu(eumWidth);             Height = new Emu(eumHeight);         }          /// <summary>         /// 创建PPT的Geometry Path         /// </summary>         /// <param name="path">OpenXml Path字符串</param>         /// <param name="eumWidth">指定的宽度或在路径坐标系统中应在使用的最大的 x 坐标</param>         /// <param name="eumHeight">指定框架的高度或在路径坐标系统中应在使用的最大的 y 坐标</param>         public ShapePath(string path, double eumWidth, double eumHeight) : this(path, PathFillModeValues.Norm, eumWidth: eumWidth, eumHeight: eumHeight)         {          }          /// <summary>         /// 是否填充         /// </summary>         public bool IsFilled { get; }          /// <summary>         /// OpenXml 的 Path Stroke, 默认true         /// </summary>         public bool IsStroke { get; }          /// <summary>         /// OpenXml的Path Fill Mode           /// </summary>         public PathFillModeValues FillMode { get; }          /// <summary>         ///OpenXml  Path字符串         /// </summary>         public string Path { get; }          /// <summary>         /// 指定使用 3D 拉伸可能在此路径,默认false或0         /// </summary>         public bool IsExtrusionOk { get; }          /// <summary>         /// 指定的宽度或在路径坐标系统中应在使用的最大的 x 坐标         /// </summary>         public Emu Width { get; }          /// <summary>         /// 指定框架的高度或在路径坐标系统中应在使用的最大的 y 坐标         /// </summary>         public Emu Height { get; }     } 

我写了预设形状公式引擎,可以从 PresetShapeDefinitions.xml 文件转换为 WPF 的 PathGeometry 可以使用的字符串,当前还没有开源此库。不过通过编写代码的形式也是可以的,详细请看 dotnet OpenXML SDK 形状几何 Geometry 的计算公式含义

为了简化代码,在 GetPresetGeometryPath 方法里面使用的是我用公式引擎计算的输出字符串

        private ShapePath[] GetPresetGeometryPath(ShapeTypeValues presetValue, EmuSize elementSize)         {             if (presetValue != ShapeTypeValues.Cube)             {                 throw new ArgumentException($"本代码仅支持立方体");             }              var shapePathList = new ShapePath[4];              // 没有想着使用 elementSize 哈,假设都是固定的大小              // M 0.000,31.920 L 95.760,31.920 L 95.760,127.680 L 0.000,127.680 z             // FillMode	Norm             shapePathList[0] = new ShapePath("M 0.000,31.920 L 95.760,31.920 L 95.760,127.680 L 0.000,127.680 z",                 isStroke: false);              // M 95.760,31.920 L 127.680,0.000 L 127.680,95.760 L 95.760,127.680 z             // FillMode	DarkenLess             shapePathList[1] = new ShapePath("M 95.760,31.920 L 127.680,0.000 L 127.680,95.760 L 95.760,127.680 z", PathFillModeValues.DarkenLess, false);              // M 0.000,31.920 L 31.920,0.000 L 127.680,0.000 L 95.760,31.920 z             // FillMode	LightenLess             shapePathList[2] = new ShapePath("M 0.000,31.920 L 31.920,0.000 L 127.680,0.000 L 95.760,31.920 z", PathFillModeValues.LightenLess, false);              // M 0.000,31.920 L 31.920,0.000 L 127.680,0.000 L 127.680,95.760 L 95.760,127.680 L 0.000,127.680 z M 0.000,31.920 L 95.760,31.920 L 127.680,0.000 M 95.760,31.920 L 95.760,127.680             // FillMode	None             shapePathList[3] = new ShapePath("M 0.000,31.920 L 31.920,0.000 L 127.680,0.000 L 127.680,95.760 L 95.760,127.680 L 0.000,127.680 z M 0.000,31.920 L 95.760,31.920 L 127.680,0.000 M 95.760,31.920 L 95.760,127.680", PathFillModeValues.None);             return shapePathList;         } 

通过以下代码获取 ShapePath 列表

            var shapePathList = GetPresetGeometryPath(presetGeometry!.Preset!.Value, elementSize); 

接下来是本文的核心逻辑,准备绘制不同的亮度的颜色。在开始之前,新建 DrawingGroup 用于拿到 DrawingContext 进行绘制

            var drawingVisual = new DrawingGroup();             var drawingContext = drawingVisual.Open(); 

默认的 Cube 填充色是 #FF4472C4 可以通过主题的以下代码拿到

  <!-- Slide1.xml -->           <a:fillRef idx="1">             <a:schemeClr val="accent1" />           </a:fillRef>    <!-- Theme1.xml -->   <a:themeElements>     <a:clrScheme name="Office">       <a:accent1>         <a:srgbClr val="4472C4" />       </a:accent1>     </a:clrScheme>   </a:themeElements> 

本文这里就写固定的值,如果大家想测试不同的课件的颜色效果,还请自己更改

            var fillBrush = new SolidColorBrush((Color) ColorConverter.ConvertFromString("#4472C4")); 

通过此画刷绘制几何底色。绘制之前需要拿到底色绘制用的 PathGeometry 对象,如下面代码

            // 创建底色几何             var pathGeometry = BuildShapePathGeometry(shapePathList);          private PathGeometry BuildShapePathGeometry(ShapePath[] shapePathList)         {             PathGeometry? result = null;             foreach (var shapePath in shapePathList)             {                 if (shapePath.FillMode is PathFillModeValues.None && !shapePath.IsStroke)                 {                     // 不是可填充的,而且不是线条的,啥都不做                     continue;                 }                  var geometry = Geometry.Parse(shapePath.Path);                 if (result is null)                 {                     result = PathGeometry.CreateFromGeometry(geometry);                 }                 else                 {                     result = Geometry.Combine(result, geometry, GeometryCombineMode.Union, Transform.Identity);                 }             }              return result!;         }      

有很多形状不是多路径的,只有如 Cube 这样有多个 Path 的多路径的才需要绘制底色,绘制底色的代码如下

            // 只有多路径下才先绘制底色             drawingContext.DrawGeometry(fillBrush, null, pathGeometry); 

接下来就是将各个 Path 进行绘制,代码如下

            foreach (var shapePath in shapePathList)             {                 if (!shapePath.IsFilled && !shapePath.IsStroke) continue;                  var geometry = GetPathGeometry(shapePath);                 if (geometry == null)                 {                     continue;                 }                  var brush = GetShapeFillBrush(shapePath, fillBrush);                 // 忽略线条                 Pen? pen = null;                 drawingContext.DrawGeometry(brush, pen, geometry);             } 

从 ShapePath 转换为 Geometry 的代码如下,需要考虑在一个 ShapePath 的字符串里面包含多个 M 起点

        private PathGeometry? GetPathGeometry(ShapePath shapePath)         {             var pathGeometry = new PathGeometry();             var pathFigureCollection = new PathFigureCollection();             var path = shapePath.Path;             if (!string.IsNullOrEmpty(path))             {                 var pathFigures = PathFigureCollection.Parse(path);                 if (!pathFigures.Any())                 {                     return null;                 }                 foreach (var pathFigure in pathFigures)                 {                     pathFigure.IsFilled = shapePath.IsFilled;                     pathFigureCollection.Add(pathFigure);                 }             }             pathGeometry.Figures = pathFigureCollection;             return pathGeometry;         } 

获取各段的 Geometry 的画刷,通过 GetShapeFillBrush 方法,此方法是本文的核心逻辑,代码如下

        private SolidColorBrush? GetShapeFillBrush(ShapePath shapePath, SolidColorBrush fillBrush, bool isMultiPath = true)         {             if (shapePath.IsFilled is false)             {                 return null;             }              switch (shapePath.FillMode)             {                 case PathFillModeValues.Norm:                 {                     if (isMultiPath)                     {                         // 多路径下,不需要重复绘制,绘制内容和底色相同。但是底色已绘制,因此啥都不用做                         return null;                     }                     else                     {                         return fillBrush;                     }                 }                 case PathFillModeValues.None:                     return null;                 case PathFillModeValues.Darken:                     return GetOrCreate("#64000000");                 case PathFillModeValues.DarkenLess:                     return GetOrCreate("#32000000");                 case PathFillModeValues.Lighten:                     return GetOrCreate("#64FFFFFF");                 case PathFillModeValues.LightenLess:                     return GetOrCreate("#32FFFFFF");                 default:                     throw new ArgumentOutOfRangeException();             }              static SolidColorBrush GetOrCreate(string color)             {                 return new SolidColorBrush((Color) ColorConverter.ConvertFromString(color));             }         } 

通过覆盖几何加上半透明的画刷,可以让 WPF 自动给底色修改亮度。感谢 晓嗔戈 提供的算法

接着就是将上面画的放在界面上

            var element = new Border()             {                 Width = elementSize.Width.ToPixel().Value,                 Height = elementSize.Height.ToPixel().Value,                  Margin = new Thickness(10, 10, 10, 10),                 Background = new DrawingBrush(drawingVisual)             };             AddElement(element);          private void AddElement(UIElement element)         {             Grid.Children.Clear();             Grid.Background = null;             Grid.Children.Add(element);         } 

以上就是本文的代码,运行代码可以看到上图的效果

本文所有代码和测试文件放在 githubgitee 欢迎访问

可以通过如下方式获取本文代码

先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码

git init git remote add origin https://gitee.com/lindexi/lindexi_gd.git git pull origin ae81fba8dca44fcdd944e75a3ff04e913d451ed3 

以上使用的是 gitee 的源,如果 gitee 不能访问,请替换为 github 的源

git remote remove origin git remote add origin https://github.com/lindexi/lindexi_gd.git 

获取代码之后,打开 Pptx.sln 文件

本文的属性是依靠 dotnet OpenXML 解压缩文档为文件夹工具 工具协助测试的,这个工具是开源免费的工具,欢迎小伙伴使用

更多请看 Office 使用 OpenXML SDK 解析文档博客目录

后续解析引擎也许会开源,欢迎关注我所在团队的开源组织 https://github.com/dotnet-campus 里面有很多开源项目

赞(0) 打赏
未经允许不得转载:张拓的天空 » dotnet OpenXML 转换 PathFillModeValues 为颜色特效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏