如何解决控制渲染SVG图形?
| 我需要一个用于渲染SVG图形的控件。数据以“ 0”对象的形式传入。渲染此类图像的最简单方法是什么? 目前,我正在使用PNG: 但是我想要更高的分辨率。 SVG对此非常适合。 样本SVG:<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"
\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
-->
<!-- Title: G Pages: 1 -->
<svg width=\"262pt\" height=\"216pt\"
viewBox=\"0.00 0.00 262.00 216.00\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
<g id=\"graph1\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 212)\">
<title>G</title>
<polygon fill=\"white\" stroke=\"white\" points=\"-4,5 -4,-212 259,5\"/>
<!-- a -->
<g id=\"node1\" class=\"node\"><title>a</title>
<polygon fill=\"purple\" stroke=\"purple\" points=\"159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523\"/>
<polygon fill=\"none\" stroke=\"purple\" points=\"165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397\"/>
<polygon fill=\"none\" stroke=\"purple\" points=\"170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272\"/>
<text text-anchor=\"middle\" x=\"133\" y=\"-177.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">a</text>
</g>
<!-- b -->
<g id=\"node3\" class=\"node\"><title>b</title>
<ellipse fill=\"none\" stroke=\"black\" cx=\"133\" cy=\"-100\" rx=\"27\" ry=\"18\"/>
<text text-anchor=\"middle\" x=\"133\" y=\"-96.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">b</text>
</g>
<!-- a->b -->
<g id=\"edge2\" class=\"edge\"><title>a->b</title>
<path fill=\"none\" stroke=\"black\" d=\"M133,-158.413C133,-149.086 133,-138.069 133,-128.192\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057\"/>
</g>
<!-- c -->
<g id=\"node4\" class=\"node\"><title>c</title>
<polygon fill=\"none\" stroke=\"black\" points=\"144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41\"/>
<text text-anchor=\"middle\" x=\"72\" y=\"-19.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">hello world</text>
</g>
<!-- b->c -->
<g id=\"edge3\" class=\"edge\"><title>b->c</title>
<path fill=\"none\" stroke=\"black\" d=\"M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031\"/>
</g>
<!-- d -->
<g id=\"node6\" class=\"node\"><title>d</title>
<polygon fill=\"none\" stroke=\"black\" points=\"194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015\"/>
<text text-anchor=\"middle\" x=\"194\" y=\"-19.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">d</text>
</g>
<!-- b->d -->
<g id=\"edge5\" class=\"edge\"><title>b->d</title>
<path fill=\"none\" stroke=\"black\" d=\"M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757\"/>
</g>
<!-- e -->
<g id=\"node7\" class=\"node\"><title>e</title>
<polygon fill=\"none\" stroke=\"black\" points=\"254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199\"/>
<text text-anchor=\"middle\" x=\"222\" y=\"-177.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">e</text>
</g>
</g>
</svg>
解决方法
当我研究过在WPF应用程序中使用SVG时,发现可以添加一些软件包来提供此功能,但是最后还是使用了转换为XAML的SVG,它们可以进行扩展。 WPF应用程序与SVG图像可以在浏览器等上缩放的方式相同。如果您可以访问SVG代码(看起来像您一样),那么这可能是一个不错的解决方案。
这些是我用来实现此目的的步骤:
将SVG转换为XAML
我更喜欢将Inkscape用于以下步骤。
在图像编辑器(例如Inkscape)中打开SVG。编辑器必须支持打开SVG并将SVG保存为XAML文件。
在编辑器中,将文件另存为XAML。如果可以选择的话,文件应该保存为Silverlight兼容。关闭图像编辑器。
如果需要任何颜色更改,请在文本编辑器(例如Notepad ++,Visual Studio)中打开文件,并找到具有颜色值的任何路径(查找类似\'fill =“#000000” \'的东西)并将其更改为所需的十六进制颜色值。保存文件,完成后关闭文本编辑器。
在WPF项目中使用XAML图像
右键单击应保留图像的资源文件夹(例如\\ Resources \\ Images),然后选择添加现有文件的选项。
确保文件选择类型包括XAML文件。导航到要使用的文件并添加它。
在Visual Studio中打开“属性”窗格(右键单击该文件,然后单击“属性”选项)。在“属性”窗格的“高级”部分下,将“生成操作”设置为“资源”,将“复制到输出目录”设置为“请勿复制”。
现在可以通过设置项目的来源来使用图像,以将图像(例如框架)显示到资源路径(例如“ /resources/images/.xaml”)。可以直接设置或通过绑定设置。
用于显示XAML图像的示例WPF / XAML代码
以下代码显示了如何显示使用上述步骤添加的XAML图像的示例。此代码将缩放图像以填充其添加到的容器。图像的来源是通过用于Frame元素的来源的绑定提供的。可以用图像路径的字符串替换(这是通过绑定值提供的)。
<Viewbox Stretch=\"Uniform\"
Margin=\"4,4\"
VerticalAlignment=\"Center\">
<Frame Source=\"{Binding ImageSource}\"
NavigationUIVisibility=\"Hidden\"/>
</Viewbox>
路径字符串的示例是:
/resources/images/<file-name>.xaml
如果映像位于DLL中并且在同一DLL中使用,则路径字符串将需要使用以下格式包含更多信息:
/<AssemblyName>;component/resources/images/<file-name>.xaml
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。