Wpf InkCanvas 将斯托克斯保存为 svg

May*_*ank 4 c# wpf svg inkcanvas

是否可以将 InkCanvas 笔触集合保存到 svg 图像?我唯一能找到的是,我可以将笔画保存为带有嵌入式 ISF(墨水序列化格式)的 GIF,或者将它们呈现为位图。我想以可以与其他平台(如 Web)互操作的矢量格式保存笔画。

May*_*ank 6

我想到了。

以下是步骤

  1. 迭代 StrokeCollection
  2. 获得PathGeometry每个Stroke调用GetGeometry函数,然后调用GetOutlinedPathGeometry
  3. Figures出去Geometry。我通过将 保存PathGeometry到 XAML 然后Figures通过XElement.Parse.
  4. 然后我可以创建一个 svg 文档并添加每个路径(见下面的代码)。

我正在使用SVG 渲染库来创建 SVG 文档。

var svg = new SvgDocument();
var colorServer = new SvgColourServer(System.Drawing.Color.Black);

var group = new SvgGroup {Fill = colorServer, Stroke = colorServer};
svg.Children.Add(group);

  foreach (var stroke in InkCanvas.Strokes)
  {
      var geometry = stroke.GetGeometry(stroke.DrawingAttributes).GetOutlinedPath??Geometry();

      var s = XamlWriter.Save(geometry);

      if (s.IsNotNullOrEmpty())
      {
          var element = XElement.Parse(s);

          var data = element.Attribute("Figures")?.Value;

          if (data.IsNotNullOrEmpty())
          {
              group.Children.Add(new SvgPath
              {
                  PathData = SvgPathBuilder.Parse(data),
                  Fill = colorServer,
                  Stroke = colorServer
               });
           }
       }
}
Run Code Online (Sandbox Code Playgroud)