AvaloniaUI

Question

在 GDI+ 中，可以直接在 canvas 上绘图（创建一个内存位图并在那里做任何需要做的事情）。

我需要同样的 Avalonia 用于 'custom controls'，我被告知这是可能的，因为 SkiaSharp.Canvas 可以访问。谁能提供一些有关如何执行此操作的线索？

一个例子是连续变化的曲线，例如语音频率。如果你不直接在 canvas（或在 Xaml-world 中命名的任何东西）上执行此操作，它会太慢并且占用太多资源，特别是如果你需要其中的 10 到 20 个在一个屏幕上。

我有 GDI+、JavaFX、QML 的背景，但我在 Xaml 领域还是个新手。我已经阅读了完整的 Avalonia 文档，但在这方面没有任何内容。我了解在 Avalonia 项目的现阶段还有其他优先事项。

Answer 1

我从评论中提到的 'RenderDemo' frankenapps 中提取了 'LineBoundsDemoControl' 作为我问题的答案。

实际绘图发生在 'drawingContext' 的 'Render' 方法中。用笔和画笔看起来很像GDI+。

如果您像我一样是 Avalonia/xaml 的新手，那么其中带有 'AffectsRender' 的静态构造函数可能是最奇怪的。根据 Avalonia 源代码，此方法指示属性更改应导致控件失效（重绘）。一直在学习...

This method should be called in a control's static constructor with each property on the control which when changed should cause a redraw. This is similar to WPF's FrameworkPropertyMetadata.AffectsRender flag.

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));
        }
    }
}

AvaloniaUI - 如何直接在 canvas 上绘制

AvaloniaUI - How to draw directly on the canvas

c#

xaml

canvas