天天看點

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

本文将介紹如何将OpenXml的actTo轉為Svg的弧線(a)

首先下面是一段OpenXml的arcTo弧線

假設我們目前的點是(0,0),這時候我們已知的資訊如下:

目前點坐标:(x1,y1)=(0,0)

橢圓的半徑:半長軸 rx=wR=152403,半短軸 ry=hR=152403

起始角到結束角的夾角:起始角θ1=stAng=cd4,夾角Δθ=swAng,結束角θ2=θ1+Δθ

是否優(大)弧:fA=|Δθ|>Π(180°)

順逆時針:fS=|Δθ|>0°

目前Svg的橢圓弧線參數字元串為以下:

其中涉及到的參數:

參數

說明

備注

rx

橢圓半長軸

已知:rx=wR=152403

ry

橢圓半短軸

已知:ry=hR=152403

x-axis-rotation

橢圓相對于坐标系的旋轉角度,角度數而非弧度數

已知:0

large-arc-flag

是否優(大)弧:0否,1是

已知:fA=|Δθ|>Π(180°)

sweep-flag

繪制方向:0逆時針,1順時針

已知:fS=|Δθ|>0°

x

圓弧終點的x坐标

未知

y

圓弧終點的y坐标

是以實際上,我們需要求出的則是圓弧終點坐标就能夠完成最終換算到Svg橢圓弧線字元串了

以下是我從W3C的SVG官方文檔中擷取到的關于橢圓任意一點的二維矩陣方程式:

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

是以的存在以下兩個(開始點和終點)橢圓任意一點的二維矩陣方程式:

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

(x1,y1)

目前坐标

已知:(0,0)

(x2,y2)

終點坐标

φ

橢圓相對于坐标系的旋轉角度

已知:0°

θ1

起始角

已知:stAng

Δθ

起始角到結束角的夾角

已知:swAng

(cx,cy)

橢圓中心坐标點

fA

是否優(大)弧

fS

繪制方向

已知:fS=Δθ>0°

是以推導公式如下:

步驟1:

因為開始點的橢圓任意一點的二維矩陣方程式為

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

是以能夠得出兩行一列矩陣CxCy為:

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

步驟2:

因為終點的橢圓任意一點的二維矩陣方程式為

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

是以将矩陣CxCy帶入到終點點的橢圓任意一點的二維矩陣方程式:

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

在寫代碼之前,我們需要安裝一些所需要用到的庫,Openxml機關換算為Pixel的庫和矩陣運算用到的庫:

通過nuget包的控制台執行以下指令:

Openxml機關換算庫

矩陣運算庫

然後正式開始我們的代碼,我們通過WPF應用窗體來展示效果:

前端xaml代碼:

後端cs代碼:

效果如下:

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

可以看到,我們成功的繪制出我們的一條橢圓弧線,雖然很簡單,但是其實這條弧線是我取ppt形狀缺角矩形當中的一條弧線,在繪制其形狀時候,上述方法會自動根據arcTo的資料來自動判斷弧線的大小弧、順逆時針等情況的繪制

【Openxml】将Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線

BlogCodeSample/OpenxmlActToSvgSample at main · ZhengDaoWang/BlogCodeSample

Implementation Notes — SVG 2

【OpenXml】Pptx的形狀轉為WPF的Geometry - RyzenAdorer - 部落格園

dotnet OpenXML SDK 形狀幾何 Geometry 的計算公式含義

繼續閱讀