Home > Web Front-end > PS Tutorial > With node curve, the mouse can drag the node to adjust the curve, similar to Photoshop

With node curve, the mouse can drag the node to adjust the curve, similar to Photoshop

高洛峰
Release: 2017-02-20 09:50:01
Original
3262 people have browsed it

One of the more commonly used functions in Photoshop is curve adjustment, as shown in the figure

With node curve, the mouse can drag the node to adjust the curve, similar to Photoshop

You can add, delete, and drag curve nodes with the mouse to adjust image parameters. In terms of its idea (only the curve itself is considered here, data storage is not included in this list), this function is relatively simple:

  1. The curve is represented by a set of Points

  2. Mousing the node with the mouse actually modifies a single Point

  3. Insert and delete Point

  4. A node is a handle. It’s just a small square

  5. Draw a curve passing through all nodes in PaintDrawCurve

  6. Draw a crosshair to represent the current node

  7. When the mouse is pressed, determine whether it is in an existing node. If so, mark it, otherwise add a new node

  8. The mouse is pressed and Move, if there is already a node, the node coordinates are the mouse coordinates

  9. Refresh the drawing

Completed program operation demonstration (animation):

With node curve, the mouse can drag the node to adjust the curve, similar to Photoshop

The following is part of the sample code:

Node:


 List<point> points;</point>
Copy after login


Draw node handle:

Rectangle getHandle(Point p)
{
    Rectangle rect = new Rectangle(
        p.X - 3,
        p.Y - 3,
        6,
        6);
    return rect;
}
Copy after login
判断某点是否位于手柄区域:
Copy after login
bool isHandle(Point p)
{
    foreach (Point pt in points)
    {
        if (isInside(p, getHandle(pt)))
        {
            downIndex = points.IndexOf(pt);
            downPoint = pt;
            current = pt;
            return true;
        }
    }
    return false;
}
Copy after login
注意这个部分可以适当放大一下判断区域,这样便于鼠标操作(手柄太小,不易点击)。
Copy after login

Draw handle:

void drawHandle(Graphics g, Point p)
{
    if (points.IndexOf(p) == downIndex)
        g.FillRectangle(
            Brushes.Black,
            getHandle(p));
    else
        g.DrawRectangle(
            Pens.Black,
            getHandle(p));
}
Copy after login

Draw curve:

 void drawCurve(Graphics g)
 {
     g.DrawCurve(Pens.Black, points.ToArray());
 }
Copy after login

Curve drawing uses the cardinal spline drawing method of the Graphics class. Default tension is 0.5.

Drawing cross positioning line (auxiliary function):

void drawCrosshair(Graphics g, Point p)
{
    g.DrawLine(
        Pens.Gray,
        0, p.Y,
        clientRect.Width,
        p.Y);
    g.DrawLine(
        Pens.Gray,
        p.X,
        0,
        p.X,
        clientRect.Height);
}
Copy after login

Mouse dragging:

protected override void OnMouseMove(MouseEventArgs e)
{
    mousePoint = e.Location;
    if (mouseDown)
    {
        if (Current != null)
        {
            Current = mousePoint;
        }
        Refresh();
    }
}
Copy after login

More curves with nodes, the mouse can drag the nodes to adjust the curve, similar to Photoshop related Please pay attention to the PHP Chinese website for articles!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template