如何将位图图像更改为矢量路径

在我的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

如何将位图图像更改为矢量路径

回答

相关问题