V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yanjinhua
V2EX  ›  程序员

WPF 使用 DrawingContext 绘制刻度条

  •  
  •   yanjinhua ·
    yanjinhuagood · 2022-10-13 15:53:43 +08:00 · 871 次点击
    这是一个创建于 764 天前的主题,其中的信息可能已经有所发展或是发生改变。

    WPF 使用 DrawingContext 绘制刻度条

    控件名:Ruler

    作者:WPFDevelopersOrg

    原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers

    • 框架使用大于等于.NET40
    • Visual Studio 2022;
    • 项目使用 MIT 开源许可协议;
    • 定义Interval步长、SpanInterval间隔步长、MiddleMask中间步长。
    • 当步长/ 间隔步长= 需要绘制的小刻度。
    • 循环绘制小刻度,判断当前j并取中间步长的模,如果模!=零就绘制中高线。
    • StartValue 开始绘制刻度到EndValue 结束刻度。
    • CurrentGeometry 重新绘制当前刻度的Path值。
    • CurrentValue 当前值如果发生变化时则去重新CurrentGeometry

    1 ) 准备Ruler.cs如下:

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace WPFDevelopers.Controls
    {
        public class Ruler : Control
        {
            public static readonly DependencyProperty IntervalProperty =
                DependencyProperty.Register("Interval", typeof(double), typeof(Ruler), new UIPropertyMetadata(30.0));
    
    
            public static readonly DependencyProperty SpanIntervalProperty =
                DependencyProperty.Register("SpanInterval", typeof(double), typeof(Ruler), new UIPropertyMetadata(5.0));
    
    
            public static readonly DependencyProperty MiddleMaskProperty =
                DependencyProperty.Register("MiddleMask", typeof(int), typeof(Ruler), new UIPropertyMetadata(2));
    
            public static readonly DependencyProperty CurrentValueProperty =
                DependencyProperty.Register("CurrentValue", typeof(double), typeof(Ruler),
                    new UIPropertyMetadata(OnCurrentValueChanged));
    
            public static readonly DependencyProperty StartValueProperty =
                DependencyProperty.Register("StartValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(120.0));
    
            public static readonly DependencyProperty EndValueProperty =
                DependencyProperty.Register("EndValue", typeof(double), typeof(Ruler), new UIPropertyMetadata(240.0));
    
            public static readonly DependencyProperty CurrentGeometryProperty =
                DependencyProperty.Register("CurrentGeometry", typeof(Geometry), typeof(Ruler),
                    new PropertyMetadata(Geometry.Parse("M 257,0 257,25 264,49 250,49 257,25")));
    
            static Ruler()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(Ruler), new FrameworkPropertyMetadata(typeof(Ruler)));
            }
    
            public Ruler()
            {
                Loaded += Ruler_Loaded;
            }
    
            public double Interval
            {
                get => (double)GetValue(IntervalProperty);
    
                set => SetValue(IntervalProperty, value);
            }
    
            public double SpanInterval
            {
                get => (double)GetValue(SpanIntervalProperty);
    
                set => SetValue(SpanIntervalProperty, value);
            }
    
            public int MiddleMask
            {
                get => (int)GetValue(MiddleMaskProperty);
    
                set => SetValue(MiddleMaskProperty, value);
            }
    
            public double CurrentValue
            {
                get => (double)GetValue(CurrentValueProperty);
    
                set
                {
                    SetValue(CurrentValueProperty, value);
                    PaintPath();
                }
            }
    
            public double StartValue
            {
                get => (double)GetValue(StartValueProperty);
    
                set => SetValue(StartValueProperty, value);
            }
    
            public double EndValue
            {
                get => (double)GetValue(EndValueProperty);
    
                set => SetValue(EndValueProperty, value);
            }
    
            public Geometry CurrentGeometry
            {
                get => (Geometry)GetValue(CurrentGeometryProperty);
    
                set => SetValue(CurrentGeometryProperty, value);
            }
    
            private static void OnCurrentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
                var ruler = d as Ruler;
                ruler.CurrentValue = Convert.ToDouble(e.NewValue);
            }
    
            protected override void OnRender(DrawingContext drawingContext)
            {
                RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
                var nextLineValue = 0d;
                var one_Width = ActualWidth / ((EndValue - StartValue) / Interval);
    
                for (var i = 0; i <= (EndValue - StartValue) / Interval; i++)
                {
                    var numberText = DrawingContextHelper.GetFormattedText((StartValue + i * Interval).ToString(),
                        (Brush)DrawingContextHelper.BrushConverter.ConvertFromString("#FFFFFF"), FlowDirection.LeftToRight,
                        10);
                    drawingContext.DrawText(numberText, new Point(i * one_Width - 8, 0));
                    drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1), new Point(i * one_Width, 25),
                        new Point(i * one_Width, ActualHeight - 2));
                    var cnt = Interval / SpanInterval;
                    for (var j = 1; j <= cnt; j++)
                        if (j % MiddleMask == 0)
                            drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1),
                                new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 2),
                                new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 10));
                        else
                            drawingContext.DrawLine(new Pen(new SolidColorBrush(Colors.White), 1),
                                new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 2),
                                new Point(j * (one_Width / cnt) + nextLineValue, ActualHeight - 5));
    
                    nextLineValue = i * one_Width;
                }
            }
    
            private void Ruler_Loaded(object sender, RoutedEventArgs e)
            {
                PaintPath();
            }
    
            private void PaintPath()
            {
                var d_Value = CurrentValue - StartValue;
                var one_Value = ActualWidth / (EndValue - StartValue);
                var x_Point = one_Value * d_Value + ((double)Parent.GetValue(ActualWidthProperty) - ActualWidth) / 2d;
                CurrentGeometry =
                    Geometry.Parse($"M {x_Point},0 {x_Point},25 {x_Point + 7},49 {x_Point - 7},49 {x_Point},25");
            }
        }
    }
    

    2 ) 使用RulerControlExample.xaml.cs如下:

    <UserControl x:Class="WPFDevelopers.Samples.ExampleViews.RulerControlExample"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
                 xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800">
        <Grid>
            <Slider x:Name="PART_Slider" IsSnapToTickEnabled="True"
                    Value="40"
                    Minimum="10"
                    Maximum="210"/>
            <UniformGrid Rows="3">
                <Grid Background="{StaticResource CircularDualSolidColorBrush}" Height="51" Margin="40,0">
                    <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                      Data="{Binding ElementName=PART_Ruler, Path=CurrentGeometry,Mode=TwoWay}" />
                    <wpfdev:Ruler x:Name="PART_Ruler" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                              CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
                </Grid>
                <Grid Background="{StaticResource DangerPressedSolidColorBrush}" Height="51" Margin="40,0">
                    <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                      Data="{Binding ElementName=PART_Ruler1, Path=CurrentGeometry,Mode=TwoWay}" />
                    <wpfdev:Ruler x:Name="PART_Ruler1" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                              CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
                </Grid>
                <Grid Background="{StaticResource WarningPressedSolidColorBrush}" Height="51" Margin="40,0">
                    <Path Stroke="{StaticResource SuccessPressedSolidColorBrush}" StrokeThickness="1" Fill="{StaticResource SuccessPressedSolidColorBrush}"
                      Data="{Binding ElementName=PART_Ruler2, Path=CurrentGeometry,Mode=TwoWay}" />
                    <wpfdev:Ruler x:Name="PART_Ruler2" Margin="40,0" Interval="20" StartValue="10" EndValue="210"
                              CurrentValue="{Binding ElementName=PART_Slider,Path=Value,Mode=TwoWay}"/>
                </Grid>
            </UniformGrid>
            
            
        </Grid>
    </UserControl>
    

    鸣谢 - 帅嘉欣

    Github|RulerControlExample
    码云|RulerControlExample

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5258 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 09:14 · PVG 17:14 · LAX 01:14 · JFK 04:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.