AvaloniaUI - 如何直接在画布上绘制

Question

在GDI+中，可以直接在画布上绘制（创建内存位图并在那里进行必要的操作）。

我需要同样的Avalonia“自定义控件”功能，并且有人告诉我由于可以访问SkiaSharp.Canvas，因此这是可能的。有人可以给出如何实现的一些线索吗？

一个例子是连续变化的曲线，例如声音频率。如果不直接在画布上执行此操作（或者在Xaml-world中命名为其他名称），则速度太慢且占用太多资源，特别是如果您需要在一个屏幕上显示10到20个这样的线条。

我有GDI+、JavaFX和QML方面的背景，但是我在Xaml领域还相当新。我已经阅读了完整的Avalonia文档，但没有找到相关内容。我理解此阶段Avalonia项目存在其他优先事项。

- Geertie

---

https://github.com/AvaloniaUI/Avalonia/tree/master/samples/RenderDemo 展示了如何实现此功能。 - frankenapps

好的，谢谢 frankenapps！我会看一下的。我可以问你一下，你是这个项目的贡献者吗？你似乎对 Avalonia 很了解！ - Geertie

Answer 1

我从评论中提到的“RenderDemo” Frankenapps 中获取了“LineBoundsDemoControl”，作为回答我的问题的答案。

实际绘制发生在“drawingContext”的“Render”方法中。它看起来非常像带有笔和刷子的 GDI+。

如果您像我一样是 Avalonia/xaml 的新手，则具有“AffectsRender”的静态构造函数可能会让人感到奇怪。根据 Avalonia 源代码，此方法表示属性更改应导致控件失效（重新绘制）。不断学习...

此方法应在控件的静态构造函数中调用，其中包含每个在更改时应导致重新绘制的控件属性。这类似于 WPF 的 FrameworkPropertyMetadata.AffectsRender 标志。

using System;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using Avalonia.Rendering.SceneGraph;
using Avalonia.Threading;

namespace RenderDemo.Controls
{
    public class LineBoundsDemoControl : Control
    {
        static LineBoundsDemoControl()
        {
            AffectsRender<LineBoundsDemoControl>(AngleProperty);
        }

        public LineBoundsDemoControl()
        {
            var timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(1 / 60.0);
            timer.Tick += (sender, e) => Angle += Math.PI / 360;
            timer.Start();
        }

        public static readonly StyledProperty<double> AngleProperty =
            AvaloniaProperty.Register<LineBoundsDemoControl, double>(nameof(Angle));        

        public double Angle
        {
            get => GetValue(AngleProperty);
            set => SetValue(AngleProperty, value);
        }

        public override void Render(DrawingContext drawingContext)
        {
            var lineLength = Math.Sqrt((100 * 100) + (100 * 100));

            var diffX = LineBoundsHelper.CalculateAdjSide(Angle, lineLength);
            var diffY = LineBoundsHelper.CalculateOppSide(Angle, lineLength);


            var p1 = new Point(200, 200);
            var p2 = new Point(p1.X + diffX, p1.Y + diffY);

            var pen = new Pen(Brushes.Green, 20, lineCap: PenLineCap.Square);
            var boundPen = new Pen(Brushes.Black);

            drawingContext.DrawLine(pen, p1, p2);

            drawingContext.DrawRectangle(boundPen, LineBoundsHelper.CalculateBounds(p1, p2, pen));
        }
    }
}

- Geertie