我有一個 SVG 輸入,像這樣。
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142" stroke="black" stroke-width="4.57143" stroke-linecap="round"/><path d="M23.292 16.4764L16.3063 16.4764L16.3063 23.3336" stroke="black" stroke-width="4.57143" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699" stroke="black" stroke-width="4.57143" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z" fill="black"/></svg>
然而,我們的框架需要一個 DrawingImage 作為輸入。因此,我將上面的 SVG 轉換為如下所示的幾何圖形(在某處閱讀,連接路徑將給出整個幾何圖形):
<Geometry x:Key="icon-lightningLogo">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757 M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142 M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757 M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142 M23.292 16.4764L16.3063 16.4764L16.3063 23.3336 M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699 M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>
輸入 SVG 為:

而輸出是,觀察箭頭型別的符號和拐角處的線條。

我也嘗試將 SVG 轉換如下:
<Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757</Geometry>
<Geometry x:Key="icon-lightning-2">M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142</Geometry>
<Geometry x:Key="icon-lightning-3">M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757</Geometry>
<Geometry x:Key="icon-lightning-4">M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142</Geometry>
<Geometry x:Key="icon-lightning-5">M23.292 16.4764L16.3063 16.4764L16.3063 23.3336</Geometry>
<Geometry x:Key="icon-lightning-6">M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
<Geometry x:Key="icon-lightning-7">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>
<DrawingGroup x:Key="icon-lightning">
<DrawingGroup Opacity="1">
<DrawingGroup Opacity="1">
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-1}">
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-2}">
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-3}">
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-4}">
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-5}" >
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-6}" >
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#036558" Geometry="{StaticResource icon-lightning-7}">
<GeometryDrawing.Pen>
<Pen LineJoin="Round" StartLineCap="Round" EndLineCap="Round" Thickness="4.57143"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingGroup>
</DrawingGroup>
沒有任何效果。
我轉換為 Canvas,一切正常。 但是,想知道是否有辦法轉換為 DrawingImage?
請在這里幫助我。謝謝先。
uj5u.com熱心網友回復:
應該清楚的是,將具有多個路徑(具有不同的描邊和填充值)的 SVG 轉換為單個幾何圖形是行不通的,因此您需要一個具有多個繪圖的 DrawingGroup。
但是,您確實錯誤地分配了填充和描邊畫筆。而不是分配線條圖的“填充”畫筆,您需要分配鋼筆的“筆觸”畫筆:
<Window.Resources>
<Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757</Geometry>
<Geometry x:Key="icon-lightning-2">M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142</Geometry>
<Geometry x:Key="icon-lightning-3">M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757</Geometry>
<Geometry x:Key="icon-lightning-4">M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142</Geometry>
<Geometry x:Key="icon-lightning-5">M23.292 16.4764L16.3063 16.4764L16.3063 23.3336</Geometry>
<Geometry x:Key="icon-lightning-6">M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
<Geometry x:Key="icon-lightning-7">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>
<Brush x:Key="fill">#036558</Brush>
<Pen x:Key="stroke"
Brush="{StaticResource fill}" Thickness="4.57143"
LineJoin="Round" StartLineCap="Round" EndLineCap="Round"/>
<DrawingGroup x:Key="icon-lightning">
<GeometryDrawing Geometry="{StaticResource icon-lightning-1}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-2}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-3}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-4}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-5}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-6}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-7}"
Brush="{StaticResource fill}"/>
</DrawingGroup>
</Window.Resources>
<Canvas>
<Image>
<Image.Source>
<DrawingImage Drawing="{StaticResource icon-lightning}"/>
</Image.Source>
</Image>
</Canvas>
由于六個線條圖都使用相同的 Pen,您可以將它們組合成一個 GeometryDrawing:
<DrawingGroup x:Key="icon-lightning">
<GeometryDrawing Pen="{StaticResource stroke}">
<GeometryDrawing.Geometry>
<GeometryGroup>
<StaticResource ResourceKey="icon-lightning-1"/>
<StaticResource ResourceKey="icon-lightning-2"/>
<StaticResource ResourceKey="icon-lightning-3"/>
<StaticResource ResourceKey="icon-lightning-4"/>
<StaticResource ResourceKey="icon-lightning-5"/>
<StaticResource ResourceKey="icon-lightning-6"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Geometry="{StaticResource icon-lightning-7}"
Brush="{StaticResource fill}"/>
</DrawingGroup>
icon-lightning-1或者只是連接to的路徑字串icon-lightning-6:
<Geometry x:Key="icon-lightning-1">M45.776 4.30438C47.4711 4.487 49.1511 4.68276 50.8146 4.87554C55.2009 5.38393 58.7008 8.88148 59.1936 13.2695C59.3792 14.9223 59.5662 16.5914 59.7399 18.2757 M45.776 59.6855C47.4711 59.5031 49.1511 59.307 50.8146 59.1145C55.2009 58.6062 58.7008 55.1086 59.1936 50.7204C59.3792 49.0674 59.5662 47.3984 59.7399 45.7142 M18.2858 4.30438C16.5904 4.487 14.9104 4.68276 13.2469 4.87554C8.86071 5.38393 5.36082 8.88148 4.86821 13.2695C4.68265 14.9223 4.49556 16.5914 4.32166 18.2757 M18.2858 59.6855C16.5904 59.5031 14.9104 59.307 13.2469 59.1145C8.86071 58.6062 5.36082 55.1086 4.86821 50.7204C4.68265 49.0674 4.49556 47.3984 4.32166 45.7142 M23.292 16.4764L16.3063 16.4764L16.3063 23.3336 M42.1152 48.9271L49.1008 48.9271L49.1008 42.0699</Geometry>
<Geometry x:Key="icon-lightning-2">M15.5128 33.0606L40.7128 12.268C41.8108 11.5946 42.8575 12.268 42.1872 13.4231L34.1447 28.5684H48.4872C48.4872 28.5684 50.766 28.5684 48.4872 30.3653L23.6894 51.2862C21.9468 52.6981 20.7404 51.928 21.9468 49.746L29.7213 34.9859H15.5128C15.5128 34.9859 13.234 34.9859 15.5128 33.0606Z</Geometry>
<DrawingGroup x:Key="icon-lightning">
<GeometryDrawing Geometry="{StaticResource icon-lightning-1}"
Pen="{StaticResource stroke}"/>
<GeometryDrawing Geometry="{StaticResource icon-lightning-2}"
Brush="{StaticResource fill}"/>
</DrawingGroup>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/513326.html
標籤:C#wpf
上一篇:將文本框和其他文本框wpfC#
