Maison  >  Article  >  interface Web  >  Avec la courbe de nœud, la souris peut faire glisser le nœud pour ajuster la courbe, comme dans Photoshop.

Avec la courbe de nœud, la souris peut faire glisser le nœud pour ajuster la courbe, comme dans Photoshop.

高洛峰
高洛峰original
2017-02-20 09:50:013235parcourir

L'une des fonctions les plus couramment utilisées dans Photoshop est l'ajustement de la courbe, comme le montre la figure

Avec la courbe de nœud, la souris peut faire glisser le nœud pour ajuster la courbe, comme dans Photoshop.

Ajoutez, supprimez et faites glisser des nœuds de courbe avec la souris pour ajuster l'image paramètres. Dans son idée (seule la courbe elle-même est considérée ici, le stockage des données n'est pas inclus dans cette liste), cette fonction est relativement simple :

  1. La courbe est représentée par un ensemble de Nœuds de points

  2. Le fait de passer la souris sur le nœud avec la souris modifie en fait un seul point

  3. Insérer et supprimer un point

  4. Un nœud est une poignée, c'est juste un petit carré

  5. Dessinez une courbe passant par tous les nœuds dans Paint DrawCurve

  6. Dessinez un réticule pour représenter le nœud actuel

  7. On appuie sur la souris pour déterminer s'il se trouve dans un nœud existant. Si c'est le cas, marquez-le, sinon ajoutez un nouveau nœud

  8. .
  9. La souris est enfoncée et Déplacer, s'il y a un nœud, les coordonnées du nœud sont les coordonnées de la souris

  10. Actualiser le dessin

Démonstration terminée du fonctionnement du programme (animation) :

Avec la courbe de nœud, la souris peut faire glisser le nœud pour ajuster la courbe, comme dans Photoshop.

Ce qui suit fait partie de l'exemple de code :

Nœud :


 List<point> points;</point>


Dessiner les poignées des nœuds :

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;
}
注意这个部分可以适当放大一下判断区域,这样便于鼠标操作(手柄太小,不易点击)。

Dessiner les poignées :

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

Dessiner des courbes :

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

Le dessin de courbes utilise la méthode de dessin de spline cardinale de la classe Graphics, avec la tension par défaut de 0,5.

Tracer une ligne de positionnement croisée (fonction auxiliaire) :

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

Glisser la souris :

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

Plus de courbes avec des nœuds, la souris peut faire glisser les nœuds pour ajuster la courbe , veuillez faire attention au site Web chinois PHP pour des articles similaires liés à Photoshop !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn