Question

我试图在鼠标中间点击标记时突出显示椭圆点标记。我想在使用点标记选择图表修改器（PointMarkerSelectionModifier）缩放或平移图形时重绘标记。如何在缩放或平移图表时翻译点，或者有更好的方法来执行此操作。

<sciChart:SciChartSurface x:Name="sciChartDetail">    <sciChart:SciChartSurface x:Name="sciChartDetail">
    <sciChart:SciChartSurface.Annotations>
        <sciChart:HorizontalLineAnnotation HorizontalAlignment="Stretch" LabelPlacement="Axis" LabelTextFormatting="0.00" Stroke="Blue" StrokeThickness="2" Y1="{Binding DataContext.DetailData.Mean, RelativeSource={RelativeSource AncestorType=UserControl}}" IsHidden="{Binding DataContext.DetailData.DisplayOptions.IsMeanHidden, RelativeSource={RelativeSource AncestorType=UserControl}}" ShowLabel="True" />
        <sciChart:HorizontalLineAnnotation HorizontalAlignment="Stretch" LabelPlacement="Axis" LabelTextFormatting="0.00" Stroke="Brown" StrokeThickness="2" Y1="{Binding DataContext.DetailData.SigmaPlusThree, RelativeSource={RelativeSource AncestorType=UserControl}}" IsHidden="{Binding DataContext.DetailData.DisplayOptions.IsSigmaLineHidden, RelativeSource={RelativeSource AncestorType=UserControl}}" ShowLabel="True" />
        <sciChart:HorizontalLineAnnotation HorizontalAlignment="Stretch" LabelPlacement="Axis" LabelTextFormatting="0.00" Stroke="Brown" StrokeThickness="2" Y1="{Binding DataContext.DetailData.SigmaMinusThree, RelativeSource={RelativeSource AncestorType=UserControl}}" IsHidden="{Binding DataContext.DetailData.DisplayOptions.IsSigmaLineHidden, RelativeSource={RelativeSource AncestorType=UserControl}}" ShowLabel="True" />
        <sciChart:BoxAnnotation HorizontalAlignment="Stretch" Background="#3349E20E" BorderBrush="#7749E20E" BorderThickness="1" CornerRadius="3" IsEditable="False" X1="{Binding DataContext.DetailData.DateStart, RelativeSource={RelativeSource AncestorType=UserControl}}" X2="{Binding DataContext.DetailData.DateStop, RelativeSource={RelativeSource AncestorType=UserControl}}" Y1="{Binding DataContext.DetailData.LSL, RelativeSource={RelativeSource AncestorType=UserControl}}" Y2="{Binding DataContext.DetailData.USL, RelativeSource={RelativeSource AncestorType=UserControl}}" IsHidden="{Binding DataContext.DetailData.DisplayOptions.IsSpecLimitsHiddden, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
    </sciChart:SciChartSurface.Annotations>

    <sciChart:SciChartSurface.RenderableSeries>
        <sciChart:XyScatterRenderableSeries  DataSeries="{Binding DataContext.DetailData.DataSeries, RelativeSource={RelativeSource AncestorType=UserControl}}" IsVisible="{Binding DataContext.DetailData.DisplayOptions.LineScatter, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource enumBooleanConverter}, ConverterParameter= {x:Static local:LineScatterRender.Scatter}}">
            <sciChart:XyScatterRenderableSeries.PointMarker>
                <sciChart:EllipsePointMarker Width="5" Height="5" Stroke="Blue" Fill="Green" StrokeThickness="3">
                </sciChart:EllipsePointMarker>
            </sciChart:XyScatterRenderableSeries.PointMarker>
        </sciChart:XyScatterRenderableSeries>
    </sciChart:SciChartSurface.RenderableSeries>

    <sciChart:SciChartSurface.XAxes>
        <sciChart:DateTimeAxis AutoRange="Once"  GrowBy="0.01, 0.01" AxisTitle="{Binding DataContext.DetailData.DateRangeAxisLabel, RelativeSource={RelativeSource AncestorType=UserControl}}" VisibleRangeChanged="OnDateTimeAxisVisibleRangeChanged">
        </sciChart:DateTimeAxis>
    </sciChart:SciChartSurface.XAxes>

    <sciChart:SciChartSurface.YAxes>
        <sciChart:NumericAxis VisibleRange="{Binding DataContext.DetailData.SharedYVisibleRange, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}" GrowBy="0.05, 0.05" Visibility="Hidden" AutoRange="Once" AxisAlignment="Left" AxisTitle="WF:Y" Style="{ets:ETStyleRef ResourceKey=AxisStyle}"/>
    </sciChart:SciChartSurface.YAxes>

    <sciChart:SciChartSurface.ChartModifier>
        <sciChart:ModifierGroup>
            <sciChart:RubberBandXyZoomModifier IsEnabled="True" IsXAxisOnly="False" ZoomExtentsY="False" IsAnimated="True" ExecuteOn="MouseRightButton"/>
            <sciChart:MouseWheelZoomModifier ActionType="Zoom" Tag="SecondYAxis" ReceiveHandledEvents="True"/>
            <sciChart:ZoomExtentsModifier XyDirection="XYDirection"/>
            <sciChart:ZoomPanModifier Tag="SecondYAxis" IsEnabled="True" ExecuteOn="MouseLeftButton" XyDirection="XYDirection" ReceiveHandledEvents="True" ZoomExtentsY="True"/>
            <util:PointMarkerSelectionModifier/>
        </sciChart:ModifierGroup>
    </sciChart:SciChartSurface.ChartModifier>
</sciChart:SciChartSurface>

public class PointMarkerSelectionModifier : ChartModifierBase
{
    private Point? selectedPoint;
    private Point _lastMousePoint;
    public static readonly DependencyProperty LineBrushProperty = DependencyProperty.Register("LineBrush", typeof(Brush), typeof(PointMarkerSelectionModifier), new PropertyMetadata(new SolidColorBrush(Colors.LimeGreen), OnLineBrushChanged));
    public static readonly DependencyProperty TextForegroundProperty = DependencyProperty.Register("TextForeground", typeof(Brush), typeof(PointMarkerSelectionModifier), new PropertyMetadata(new SolidColorBrush(Colors.White)));

    public Brush TextForeground
    {
        get { return (Brush)GetValue(TextForegroundProperty); }
        set { SetValue(TextForegroundProperty, value); }
    }

    public Brush LineBrush
    {
        get { return (Brush)GetValue(LineBrushProperty); }
        set { SetValue(LineBrushProperty, value); }
    }

    public override void OnParentSurfaceRendered(SciChartRenderedMessage e)
    {
        base.OnParentSurfaceRendered(e);
    }

    public override void OnModifierMouseDown(ModifierMouseArgs e)
    {
        base.OnModifierMouseDown(e);
        var allSeries = this.ParentSurface.RenderableSeries;

        // Translates the mouse point to chart area, e.g. when you have left axis
        selectedPoint = GetPointRelativeTo(e.MousePoint, this.ModifierSurface);

        ClearModifierSurface();

        // Add the rollover points to the surface
        var hitTestResults = allSeries.Select(x => x.HitTest(selectedPoint.Value)).ToArray();

        foreach (var hitTestResult in hitTestResults)
        {
            const int markerSize = 10;

            // Create one ellipse per HitTestResult and position on the canvas
            var ellipse = new Ellipse()
            {
                Width = markerSize,
                Height = markerSize,
                Stroke = Brushes.Red,
                StrokeThickness = 2,
                IsHitTestVisible = false,
                Tag = typeof(PointMarkerSelectionModifier)
            };

            Canvas.SetLeft(ellipse, hitTestResult.HitTestPoint.X - markerSize * 0.5);
            Canvas.SetTop(ellipse, hitTestResult.HitTestPoint.Y - markerSize * 0.5);
            this.ModifierSurface.Children.Add(ellipse);
        }
    }

    public override void OnModifierMouseMove(ModifierMouseArgs e)
    {
        // TODO : how to translate the selected point when the graph is zoomed or panned
    }

    private void ClearModifierSurface()
    {
        for (int i = ParentSurface.ModifierSurface.Children.Count - 1; i >= 0; --i)
        {

            if (((FrameworkElement)ParentSurface.ModifierSurface.Children[i]).Tag == typeof(PointMarkerSelectionModifier))
            {

                ParentSurface.ModifierSurface.Children.RemoveAt(i);

            }
        }
    }
}

Answer 1

披露：我是SciChart WPF Chart团队的首席开发人员

你好！

您需要做的是重写OnParentSurfaceRendered，重新定位标记。

我们为SciChart中的所有核心修饰符做的是我们在MouseDown，MouseMove事件中设置一些条件（例如记录最近的鼠标移动），然后在OnParentSurfaceRendered中重新定位标记或叠加。

这允许我们更新UI，例如工具提示和标记，如果底层图形发生变化（例如数据更改，或图形调整大小，或缩放或平移），那么我们将重新运行HitTest或将放置的点重新转换为新的位置。

一些有用的API /文章

Converting Pixel to Data Coordinates，反之亦然
我们关于Custom Chart Modifiers
Hit Test API
Selecting and Dragging a data-point
Drag-Selecting multiple points

希望这有帮助！

如何用圆圈标记椭圆点标记

1 个答案: