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

时间:2014-02-15 22:00:48

标签: xaml windows-phone-8 vector

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

我如何将其存储到资源并将其用作图像源?

欢迎所有建议和想法如何处理。

更新

根据Chris 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,即使我改变输出图像仍然是相同的大小。我应该如何调整画布大小?

1 个答案:

答案 0 :(得分:2)

你问题的第一部分是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}"/>

哦,只是阅读评论,从Vector到XAML,另一个非常方便的资源是Mike Swanson's XAML exporter plugin for Illustrator

希望这有帮助。