如何在WPF中绘制数字信号？

Question

我需要绘制数字信号，并能够在WPF中移动线路的每一部分。

如下图所示，箭头指示线的一部分可以朝哪个方向移动。 单击并拖动“可单击区域”将使整个正方形向左或向右移动。

我想了几种方法：

1. Polyline对象。 但是我无法控制生产线的每个部分。
2. Line对象。 每次更改时，所有行都应调整其位置。 难以控制的“可点击区域”。 也许也很复杂。
3. Border对象。 每个部分实际上都是一个边框，它将显示/隐藏适当的边框。 我不确定使边框的可移动侧面多么容易。
4. 其他选项...

我的问题是，最正确的开始方法是什么？

Answer 1

如果您愿意，我可以对此进行编码，但是这是我的处理方法...

维护对列表<x_position，height）>按X排序。在自定义控件中执行此操作。

在for循环中绘制。 通过浏览列表确定点击次数。 处理一些鼠标拖动，更新屏幕。

for循环将查看mylist [i]和mylist [i + 1]。 使用该信息绘制矩形。

我通常不使用WPF进行编码，但是如果您愿意，我可以在半小时内弄清楚。

这是一些代码.............将代码添加到名称空间，进行构建，然后将组件添加到表单中：

 public class Pair
{
    public Pair()
    {
    }

    public Pair(float first, float second)
    {
        this.First = first;
        this.Second = second;
    }

    public float First { get; set; }
    public float Second { get; set; }
};

public class ImageButton :  FrameworkElement
{
    List<Pair> items;
    Boolean dragDown = false;
    bool dragVert = false;
    int dragSeg = -1;


    public ImageButton()  {
        items = new List<Pair>();
        items.Add(new Pair(0, 0));
        items.Add(new Pair(40, 40));
        items.Add(new Pair(60, 0));
        items.Add(new Pair(100, 20));
        items.Add(new Pair(115, 0));
        items.Add(new Pair(185, 20));
        items.Add(new Pair(215, 0));
        items.Add(new Pair(300, 0));

    }

    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        int seg;
        bool vert;

        if (getSegment(e.GetPosition(this).X, e.GetPosition(this).Y, out seg, out vert))
        {
            dragDown = true;
            dragSeg = seg;
            dragVert = vert;
            //We are dragging now
        }

        base.OnMouseDown(e);
    }
    protected override void OnMouseUp(MouseButtonEventArgs e)
    {
        dragDown = false;
        base.OnMouseUp(e);
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        double basey = RenderSize.Height - 10;

        int seg;
        bool vert;
        if (!dragDown)
        {

            if (getSegment(e.GetPosition(this).X, e.GetPosition(this).Y, out seg, out vert))
            {
                if (vert)
                {
                    Cursor = Cursors.SizeWE;
                }
                else
                {
                    Cursor = Cursors.SizeNS;
                };

            }
            else
            {
                Cursor = Cursors.No;
            }
        }
        else
        {
            //Must be dragging.
            if (dragVert)
            {
                //This will change the X position of the segment...........
                items[dragSeg].First = (int) e.GetPosition(this).X;
                InvalidateVisual();
            }
            else
            {
                items[dragSeg].Second = (int)(basey - ((int)e.GetPosition(this).Y));
                //Change vertical
                InvalidateVisual();
            }
        }
        base.OnMouseMove(e);
    }

    protected override void OnRender(DrawingContext dc)
    {
        Brush b = new SolidColorBrush(Color.FromRgb(40,40,40));
        dc.DrawRectangle(b, new Pen(b, 2), new Rect(0, 0, this.RenderSize.Width, RenderSize.Height));
        Pen p = new Pen(new SolidColorBrush(Color.FromRgb(240, 240, 240)), 2);
        double basey = RenderSize.Height - 10;
        for (int i = 0; i < items.Count-1; i++)
        {
            Brush br = new SolidColorBrush(Color.FromRgb(240, 40, 40));
            Rect t = new Rect(items[i].First,basey-items[i].Second, items[i+1].First-items[i].First,items[i].Second);
            dc.DrawRectangle(br, p, t);
        }
    }
    /// <summary>
    /// Returns if over a segment, and how.  
    /// </summary>
    /// <param name="x"></param>
    /// <param name="y"></param>
    /// <returns></returns>
    bool getSegment(double x, double y, out int index, out bool vert)
    {
        double basey = RenderSize.Height - 10;
        index = 0;
        vert = false;

        for (int i = 0; i < items.Count - 1; i++)
        {
            //Check for vertical section going up
            if ((x >= (items[i].First - 3)) && ( x <= (items[i].First + 3))) {
                // x is hovering close to segment, check Y
                if ((y < (basey)) && (y>=(basey-items[i].Second))) {
                    index = i;
                    vert = true;
                    return true;
                }
            }

            //Check vertical going down.
            if ((x >= (items[i + 1].First - 3)) && (x <= (items[i + 1].First + 3)))
            {
                if ((y < (basey)) && (y >= (basey - items[i].Second)))
                {
                    index = i+1;
                    vert = true;
                    return true;
                }
            }

            //In the middle section
            if ((x >= (items[i].First) && (x <= (items[i+1].First)))) {
                //Check for close to line seg.
                if ((y < (basey - items[i].Second + 3)) && (y > (basey - items[i].Second - 3)))
                {
                    index = i;
                    vert = false;
                    return true;
                }
            }

        }
        return false;
    }
}

拖动线段时，不要重叠它们-我没有为此编写代码。 但这可以看到信号并移动信号。

用鼠标调整大小后：

PS：我没有尝试优化生产代码，也没有尝试，只是为您而死。

Answer 2

需要考虑的几件事...

• Thumb控件是从其开始可拖动事物的良好控件，因为它已经提供了可以处理的适当事件。 通过模板化，您可以按照自己的喜好给它任何形状。

• 您可以通过巧妙地使用Grid和适当放置的网格分割器免费获得可拖动的线条。 如果这不起作用，则4个矩形可能会正常工作。 您将它们放在DockingPanel ，顶部，左侧，右侧和最后一个填充位置，并且您有足够的基元来响应所有所需的事件。