ChartPanel作用域问题

收藏

你好，我需要在chart控件上画两条竖直的线，并添加拖动事件，下面是我的代码。我的问题是怎么控制chartpanel的大小，bdr的width只能控制显示的大小，我发现chartpanel占满了整个chart。这样的画，我只能控制最新添加的线，老的被覆盖了。
var obj = new ChartPanelObject()
            {
                  Action = ChartPanelAction.LeftMouseButtonDrag,
                  HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
                  VerticalAlignment = VerticalAlignment.Stretch
            };

            var bdr = new Border()

            {
//                   Background = new SolidColorBrush(Colors.Red) { Opacity = 0.4 },
                  BorderBrush = new SolidColorBrush(Colors.Red),
                  Width = 40,
                  BorderThickness = new Thickness(1, 1, 1, 1),
            };

            obj.Content = bdr;
            obj.DataPoint = new System.Windows.Point(0.3, double.NaN);
            obj.Action = ChartPanelAction.LeftMouseButtonDrag;

            var obj1 = new ChartPanelObject()
            {
                  Action = ChartPanelAction.LeftMouseButtonDrag,
                  HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
                  VerticalAlignment = VerticalAlignment.Stretch
            };

            var bdr1 = new Border()

            {
                  //                   Background = new SolidColorBrush(Colors.Red) { Opacity = 0.4 },
                  BorderBrush = new SolidColorBrush(Colors.Blue),
                  Width = 40,
                  BorderThickness = new Thickness(1, 1, 1, 1),
            };

            obj1.Content = bdr1;
            obj1.DataPoint = new System.Windows.Point(0.6, double.NaN);
            var pnl = new ChartPanel();
            var pnl1 = new ChartPanel();

            pnl.Children.Add(obj);
            pnl1.Children.Add(obj1);
            _chart.View.Layers.Add(pnl);
            _chart.View.Layers.Add(pnl1);

            pnl.AddHandler(System.Windows.Controls.Button.MouseLeftButtonDownEvent, new MouseButtonEventHandler(Element_MouseLeftButtonDown), true);
            pnl.AddHandler(System.Windows.Controls.Button.MouseMoveEvent, new System.Windows.Input.MouseEventHandler(Element_MouseMove), true);
            pnl.AddHandler(System.Windows.Controls.Button.MouseLeftButtonUpEvent, new MouseButtonEventHandler(Element_MouseLeftButtonUp), true);

            pnl.MouseMove += new System.Windows.Input.MouseEventHandler(Element_MouseMove);
            pnl.MouseLeftButtonDown += new MouseButtonEventHandler(Element_MouseLeftButtonDown);
            pnl.MouseLeftButtonUp += new MouseButtonEventHandler(Element_MouseLeftButtonUp);

            pnl1.AddHandler(System.Windows.Controls.Button.MouseLeftButtonDownEvent, new MouseButtonEventHandler(Element_MouseLeftButtonDown), true);
            pnl1.AddHandler(System.Windows.Controls.Button.MouseMoveEvent, new System.Windows.Input.MouseEventHandler(Element_MouseMove), true);
            pnl1.AddHandler(System.Windows.Controls.Button.MouseLeftButtonUpEvent, new MouseButtonEventHandler(Element_MouseLeftButtonUp), true);

            pnl1.MouseMove += new System.Windows.Input.MouseEventHandler(Element_MouseMove);
            pnl1.MouseLeftButtonDown += new MouseButtonEventHandler(Element_MouseLeftButtonDown);
            pnl1.MouseLeftButtonUp += new MouseButtonEventHandler(Element_MouseLeftButtonUp);

Alice · Alice

回复 1楼cf10082007的帖子

根据之前提示的内容，按照这个思路，你只要对代码进行修改就能实现你的需求。

对于你新提出还是无法拖动事件里正确画线的问题，再次给提供思路如下：

通过ChartPanel的DataPoint使得线的位置改变。另外在每次移动位置的时候，需要先Clear所有的ChartPanel的children，然后再重新添加。
比如，鼠标在chart上滑过的时候，竖直的线随着鼠标位置改变。
1.CreateMarker方法，返回一个ChartPanelObject，可以添加到ChartPanel中。代码参考：

ChartPanelObject CreateMarker(bool isHorizontal, Point pnt)
{
var obj = new ChartPanelObject();
var bdr = new Border()
{
BorderBrush = Background = new SolidColorBrush(Colors.Red),
Padding = new Thickness(2),
};
if (isHorizontal)
{
bdr.BorderThickness = new Thickness(0, 2, 0, 0);
bdr.Margin = new Thickness(0, -1, 0, 0);
obj.HorizontalContentAlignment = HorizontalAlignment.Stretch;
if (pnt.X == 0 && pnt.Y == 0)
obj.DataPoint = new Point(double.NaN, 0.5);
else
{
//Data Point where Mouse cursor is present
Point dpt = chart.View.PointToData(pnt);
double val;
// Gets the index of the nearest data point
int ptIndex = chart.View.DataIndexFromPoint(pnt, 0, MeasureOption.X, out val);
// Use the above index to calculate the Coordinates of that nearest Data Point
Point closeScreenPoint = chart.View.DataIndexToPoint(0, ptIndex);
// Get the location of the next data point depending on whether mouse was
// was moved towards left or right
Point awayScreenPoint;
if (pnt.X > closeScreenPoint.X)
awayScreenPoint = chart.View.DataIndexToPoint(0, ptIndex + 1);
else
awayScreenPoint = chart.View.DataIndexToPoint(0, ptIndex - 1);
//Get coordinates where Vertical marker will intersect the chart line
double crossY = GetY(closeScreenPoint, awayScreenPoint, pnt);
//Get DataPoint for the above intersecting coordinates
Point closeDataPoint = chart.View.PointToData(new Point(pnt.X, crossY));
// set the DataPoint as the Attached data source for the Horizontal marker
obj.DataPoint = new Point(double.NaN, closeDataPoint.Y);
ellipseDataPoint.Y = closeDataPoint.Y;
}
}
else
{
bdr.BorderThickness = new Thickness(2, 0, 0, 0);
bdr.Margin = new Thickness(-1, 0, 0, 0);
obj.VerticalContentAlignment = VerticalAlignment.Stretch;
Point dpt = chart.View.PointToData(pnt);
obj.DataPoint = new Point(dpt.X, double.NaN);
ellipseDataPoint.X = dpt.X;
}
bdr.IsHitTestVisible = false;
obj.Content = bdr;
return obj;
}

复制代码

2.初始化竖直线，以及调用ChartPanel的MouseMove事件。
代码：

var pnl = new ChartPanel();
pnl.MouseMove += new MouseEventHandler(pnl_MouseMove);
var vmarker = CreateMarker(false, new Point());
pnl.Children.Add(vmarker);
vmarker.Action = ChartPanelAction.None；
chart.View.Layers.Add(pnl);

复制代码

3.MouseMove事件里获取鼠标位置，并重新画线。

void pnl_MouseMove(object sender, MouseEventArgs e)
{
ChartPanel cnp = sender as ChartPanel;
Point pnt = e.GetPosition(chart);
test = pnt;
var rect = chart.View.PlotRect;
if (rect.Contains(pnt))
{
cnp.Children.Clear();
var vmarker = CreateMarker(false, pnt);
cnp.Children.Add(vmarker);
}
}

复制代码

这个只要修改代码就可以完成需求。

cf10082007 · cf10082007

回复 2楼Alice的帖子

你好，这个对于一条线是可以实现的，但对于两条线就不行了。这两条线我是得分开移动的，得有选择的过程。可现在新添加的线会将前一个完全覆盖掉，我无法操作原来的线

Alice · Alice

回复 3楼cf10082007的帖子

这已经不是产品的问题了，这是计算机算法的问题。
看到这个问题你已经提出多次都无法解决，我花时间帮助你写了这个算法，其实就是在MouseDown的时候去计算当前鼠标的位置接近哪条线，然后全局变量记下这条线的Index。在MouseMove的时候判定鼠标是否按下，然后修改这条线的DataPoint的X的值。
代码参考：

private int lineIndex = 0;
void pnl_MouseDown(object sender, MouseButtonEventArgs e)
{
ChartPanel cnp = sender as ChartPanel;
Point pnt = e.GetPosition(chart);
Point dpt = chart.View.PointToData(pnt);
for (int i = 0; i < cnp.Children.Count;i++ )
{
double x = cnp.Children[i].DataPoint.X;
//判断哪条线接近鼠标，这里的横坐标轴刻度间隔是1，所以取了误差0.1。可以根据自己项目修改。
if (Math.Abs(x - dpt.X) < 0.1)
{
lineIndex = i;
}
}
}
void pnl_MouseMove(object sender, MouseEventArgs e)
{
ChartPanel cnp = sender as ChartPanel;
Point pnt = e.GetPosition(chart);
Point dpt = chart.View.PointToData(pnt);
var rect = chart.View.PlotRect;
if (rect.Contains(pnt)&&e.LeftButton== MouseButtonState.Pressed)
{
cnp.Children[lineIndex].DataPoint = new Point(dpt.X, double.NaN);
}
}

复制代码

		自动登录	找回密码
密码			立即注册

ChartPanel作用域问题

3 个回复

评分

活字格认证

微信认证勋章

元老葡萄