Avalonia11如何优雅的中使用 svg

背景：

官网介绍使用Image控件可以渲染Svg,需设置svg属性

但是如何动态渲染未做过多的介绍。

本文介绍如何在Avalonia应用中使用Svg和动态创建组件渲染Svg.

官方介绍：

安装依赖：

Avalonia.Svg.Skia

使用方法：

1. 使用Svg Control（此控件来自Avalonia.Svg.Skia）

<Svg Path="/Assets/__AJ_Digital_Camera.svg"/>

1. 使用Image Control

<Image Source="{SvgImage /Assets/__AJ_Digital_Camera.svg}"/>

1. 控件添加background渲染

1. 1. 背景为Svg时，使用VisualBrush，下例：

<StackPanel.Background>
	<VisualBrush Visual="{SvgImage /Assets/svg/work_mode_rectangle.svg}"/>
</StackPanel.Background>

1. 1. 背景为png时，使用ImageBrush，下例：

<StackPanel.Background>
	<ImageBrush Source="/Assets/work_mode_rectangle.png" Stretch="Uniform"/>
</StackPanel.Background>

4、动态渲染，借助Image Control,下例：

动态设置Image的Source属性，Source使用SvgImage实现(skia.svg扩展Avalonia实现)

var svg = new Image
{
    Source = new SvgImage
    {
        Source = svgSource,
    },
    Width = svgWidth,
    Height = svgHeight,
    Name = mirror.code,
    RenderTransform = new TransformGroup
    {
        Children =
        {
            new TranslateTransform(canvasLeft - (svgWidth / 2), canvasTop - (svgHeight / 2)),
            //new ScaleTransform{ScaleX = 1.8, ScaleY = 1.8}
            new RotateTransform
            {
                // 设置定日镜以中心点旋转的角度，角度为变量
                Angle = mirror.rotateAngle,
                CenterX = canvasLeft - (svgWidth / 2),
                CenterY = canvasTop - (svgHeight / 2)
            }
        }
    }
};

深潜

假如需要在Canvas画布控件动态的添加Svg显示，示例图片均为Svg格式。

实现思路如下：

1、添加Canvas画布，通过Canvas.Children.Add(Control)方法添加；

2、svg借助Image控件渲染，参考使用方法：4.

主要代码：

 // 动态绘制
 foreach (var mockPoint in gisAndPixelData)
 {
     controls.Add(AddSvgToCanvas(_dingRiJingSvg, mirrorSvgWidth, mirrorSvgHeight, mockPoint));
 }
 
 CanvasChildrenControls.Add(controls);
private Control AddSvgToCanvas(SvgSource svgSource,double svgWidth, double svgHeight, MirrorObj mirror)
{
    var canvasLeft = mirror.pixelPoint.left;
    var canvasTop = mirror.pixelPoint.top;
    
    var svg = new Image
    {
        Source = new SvgImage
        {
            Source = svgSource,
        },
        Width = svgWidth,
        Height = svgHeight,
        Name = mirror.code,
        RenderTransform = new TransformGroup
        {
            Children =
            {
                new TranslateTransform(canvasLeft - (svgWidth / 2), canvasTop - (svgHeight / 2)),
                new RotateTransform
                {
                    // 设置旋转的角度，角度为变量
                    Angle = mirror.rotateAngle,
                    CenterX = canvasLeft - (svgWidth / 2),
                    CenterY = canvasTop - (svgHeight / 2)
                }
            }
        }
    };
    return svg;
}

//页面渲染代码
<Canvas Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}" x:Name="canvas"
        >
    <ItemsControl ItemsSource="{Binding CanvasChildrenControls}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Control DataContext="{Binding }" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

效果图如下：

总结：

1. 使用Svg.Skia可以很容易的优雅的使用Svg;
2. 控件添加背景svg，使用VisualBrush实现；
3. 控件添加背景png，使用ImageBrush实现。
4. 关于Avalonia开发，是在使用中探索，加之网上开发相关资料并不丰富，特此分享，欢迎指正！！！

附Svg.Skia github地址：GitHub - wieslawsoltes/Svg.Skia: An SVG rendering library.

本文完。