如何將位圖圖像更改爲矢量路徑

在我的Windows Phone 8應用程序中，我使用了一組圖標。這些圖標多次使用不同的尺寸和顏色。現在我只有同一個圖標上的多個PNG文件來涵蓋所有這些變體。如何將位圖圖像更改爲矢量路徑

這是怎麼處理矢量圖像？我的最終目標是將矢量路徑存儲到資源文件並將其用作「圖像源」，在我的視圖中設置圖像大小和顏色，而不是在資源文件中。

可以說我有Canvar這樣的：

<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0"> 
    <Path Width="23.75" Height="49.4791" Canvas.Left="26.9167" Canvas.Top="13.8542" Stretch="Fill" Fill="#FF000000" Data="F1 M 26.9167,13.8542L 50.6666,13.8542L 50.6667,39.5833L 26.9167,63.3333L 26.9167,13.8542 Z "/> 
</Canvas>

我如何保存這個資源，並將其作爲圖像源？

歡迎所有建議和想法如何處理。

UPDATE

基於克里斯W¯¯答案，我來到了這個解決方案：

<Style x:Key="Marker" TargetType="ContentControl"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ContentControl"> 
       <Canvas Width="76" Height="76"> 
        <Path Fill="{TemplateBinding Foreground}" Data="m 26.9167 13.8542 23.7499 0 10e-5 25.7291 -23.75 23.75 0 -49.4791 z"></Path> 
       </Canvas> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 


<ContentControl Style="{StaticResource Marker}" Foreground="Red" />

該工程確定，我可以重用Mrker風格和設置填充顏色。這裏缺少的一塊是，我應該如何調整canvas/contetnControl的大小？

現在畫布尺寸是76 * 76，即使我改變輸出圖像仍然是相同的大小。我應該如何調整畫布大小？

來源

2014-02-15 devha

我不認爲WPF/Silverlight支持SVG（請參閱http://stackoverflow.com/questions/15191536/using-svg-files-like-png-files-in-windows-phone和http：// stackoverflow .COM /問題/ 12092522 /處理-SVG-在窗口，電話應用程序）。 SVG是一種常用的矢量文件格式。但是，你可以轉換和SVG到XAML –

這正是我試圖做的，將矢量圖像轉換爲XAML（畫布）並使用它。但是，最好的做法是什麼。我如何將資源中定義的畫布分配給實際的UI元素（圖像？）。 – devha

您的問題的第一部分將是duplicate，我認爲Illustrator或其他套件可以做同樣的事情，但要回答第二個問題，您可以將其放入ContentControl模板中;

<Style x:Key="ReUsableResource" TargetType="ContentControl"> 
     <Setter Property="Height" Value="49.4791"/> 
     <Setter Property="Width" Value="23.75"/> 
     <Setter Property="Template">  
      <Setter.Value> 
      <ControlTemplate TargetType="ContentControl"> 
       <Canvas> 
         <Path Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Stretch="Fill" Fill="#FF000000" Data="F1 M 26.9167,13.8542L 50.6666,13.8542L 50.6667,39.5833L 26.9167,63.3333L 26.9167,13.8542 Z "/> 
       </Canvas> 
      </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

然後像這樣調用它;

<ContentControl Width="100" Height="50" Style="{StaticResource ReUsableResource}"/>

哦，剛纔讀的意見，從向量得到它的XAML另一個非常方便的資源是Mike Swanson's XAML exporter plugin for Illustrator。

希望這會有所幫助。

來源

2014-02-16 00:52:41

謝謝，這工作正常，但如何調整畫布？更新問題。 – devha

@devha請參閱編輯答案，從畫布上剝去高度/寬度並將其應用到您調用contentcontrol的位置 –

更改ContentControl大小不會更改畫布大小（即使我從畫布中刪除高度/寬度）:( – devha

如何將位圖圖像更改爲矢量路徑

回答

相關問題