欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

带节点曲线,鼠标可拖动节点调整曲线,类似Photoshop

程序员文章站 2022-04-08 17:45:15
...
Photoshop中比较常用的一个功能就是曲线调整,如图

带节点曲线,鼠标可拖动节点调整曲线,类似Photoshop

通过鼠标添加、删除、拖动曲线节点,这样即可调整图像参数。这个功能就其思路来说(这里只考虑曲线本身,数据存储等不在此列),是比较简单的:

  1. 曲线由一组Point表示节点

  2. 鼠标移动节点实际是修改单个Point

  3. 插入删除Point

  4. 一个节点是一个手柄Handle,就是一个小方块

  5. 在Paint里画出一条经过所有节点的曲线DrawCurve

  6. 随便画个十字准星表示当前节点

  7. 鼠标按下,判断是否在某个已有节点里,如果有,标记之,否则添加新节点

  8. 鼠标按下且移动,如果已有节点,则节点坐标为鼠标坐标

  9. 刷新画图

完成后的程序操作演示(动画):

带节点曲线,鼠标可拖动节点调整曲线,类似Photoshop

下面是部分示例代码:

节点:


 List<Point> points;


绘制节点手柄:

Rectangle getHandle(Point p)
{
    Rectangle rect = new Rectangle(
        p.X - 3,
        p.Y - 3,
        6,
        6);
    return rect;
}
判断某点是否位于手柄区域:
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;
}
注意这个部分可以适当放大一下判断区域,这样便于鼠标操作(手柄太小,不易点击)。

绘制手柄:

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

绘制曲线:

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

曲线绘制采用了Graphics类的基数样条绘制方法,默认张力0.5。

绘制十字定位线(辅助功能):

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);
}

鼠标拖动:

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

更多带节点曲线,鼠标可拖动节点调整曲线,类似Photoshop相关文章请关注PHP中文网!

相关标签: Photoshop