首頁 > web前端 > PS教程 > 帶節點曲線,滑鼠可拖曳節點調整曲線,類似Photoshop

帶節點曲線,滑鼠可拖曳節點調整曲線,類似Photoshop

高洛峰
發布: 2017-02-20 09:50:01
原創
3260 人瀏覽過

Photoshop中比較常用的一個功能就是曲線調整,如圖

帶節點曲線,滑鼠可拖曳節點調整曲線,類似Photoshop

透過滑鼠新增、刪除、拖曳曲線節點,這樣即可調整影像參數。這個功能就其想法來說(這裡只考慮曲線本身,資料儲存等不在此列),是比較簡單的:

  1. 曲線由一組Point表示節點

  2. 滑鼠移動節點實際上是修改單一Point

  3. 插入刪除Point

  4. 一個節點是一個手柄Handle,就是一個小方塊

  5. 在Paint裡畫出一條經過所有節點的曲線DrawCur

  6. 在Paint裡畫出一條經過所有節點的曲線DrawCur
  7. 在Paint裡畫出一條經過所有節點的曲線DrawCurve

  8. 滑鼠按下,判斷是否在某個已有節點裡,如果有,標記之,否則添加新節點
  9. 滑鼠按下且移動,如果已有節點,則節點座標為滑鼠座標
  10. 刷新畫圖

完成後的程式操作示範(動畫):

帶節點曲線,滑鼠可拖曳節點調整曲線,類似Photoshop

下面是部分範例程式碼:

節點:手提


下面是部分範例程式碼:

reee
 List<point> points;</point>
登入後複製
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;
}
登入後複製

繪製曲線:

注意这个部分可以适当放大一下判断区域,这样便于鼠标操作(手柄太小,不易点击)。
登入後複製

曲線繪製採用了Graphics類的基數樣條繪製方法,預設張力0.5。

繪製十字定位線(輔助功能):

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());
 }
登入後複製
更多帶節點曲線,滑鼠可拖曳節點調整曲線,類似Photoshop相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板