「玩一玩」一个简单的调色板取色器控件

看书让我感觉很犯困。。果然不是外行干的事。。

于是做了个这个提提神。。


控件按我的习惯写出来刚好256行代码。。去掉各种废话也就200行左右。。

==========

很简单，本来打算做一个可以自适应任何尺寸的，实在懒得想了。
高手请自动飘过。需要练习自绘控件的朋友可以瞄几眼看看，难度不高，用来练手正好。

难度：★★☆☆☆

源码：点击下载

控件看起来是这样的。

功能：
取色，取到的颜色可以通过ColorChanged事件参数e.Color获得，还可以在控件里把current变量公开出来（我没公开）
设置色块大小，3-20，这会影响控件的整体尺寸：
Block size 5

Block size 10

Block size 15


控件由很多色块组成。目前固定尺寸6x36，你可以自己修改尺寸。
控件分层是这样的（从最底层到最上层）：
1.控件绘图面
2.色块
3.网格
4.边框
5.光标

在Paint事件中按上面顺序绘制2-5。

protected override void OnPaint(PaintEventArgs e)

{

    Graphics g = e.Graphics;

    drawPalette(g);

    drawGrid(g);

    drawBorder(g);

    drawCursor(g);

}

绘制网格很简单，根据色块大小隔一定距离画一道横（竖）线

void drawGrid(Graphics g)

{

    for (int i = 0; i < rows; i++)

    {

        g.DrawLine(

            Pens.Black,

            0,

            blockWidth * (i + 1),

            blockWidth * cols,

            blockWidth * (i + 1)

            );

    }



    for (int i = 0; i < cols; i++)

    {

        g.DrawLine(

            Pens.Black,

            blockWidth * (i + 1),

            0,

            blockWidth * (i + 1),

            blockWidth * rows

            );

    }

}

绘制色块道理差不多，先获取当前坐标（行，列）的颜色（根据你自己定义的调色盘计算出来），然后填充一个方块，转到处理下一个坐标，直到全部行列都处理完。
这是我的获取颜色算法

Color getColor(int row, int col)

{

    byte r = 0, g = 0, b = 0;



    int step = 0xff / (rows - 1);



    r = (byte)(row * step);

    g = (byte)(step * (col / rows));

    b = (byte)(step * (col % rows));



    return Color.FromArgb(r, g, b);

}

然后绘制所有色块，代码很简单，就不贴了。

从表面上看，是通过鼠标移动，选取每个色块获得颜色。其实不然。那样做，我就需要保存每个色块的颜色信息，白白浪费空间。我的实现方法是通过鼠标位置得知当前鼠标所在色块的坐标（行，列），然后用上面的颜色算法直接得到该色块的颜色，一句话搞定（Point pt是鼠标位置）。

current = getColor(pt.Y / blockWidth, pt.X / blockWidth);

鼠标移动时会绘制光标，为了减少性能开销，不能直接Refresh()/Invalidate()控件，使用Invalidate(Rectangle)来重绘被鼠标弄脏的那个区域。所以用了两个小矩形保存旧光标和新光标的区域，然后在鼠标事件中更新（和鼠标取色一起）。

void updateCursor(Point pt)

{

    lastCursor.X = cursor.X;

    lastCursor.Y = cursor.Y;



    cursor.X = pt.X - pt.X % blockWidth;

    cursor.Y = pt.Y - pt.Y % blockWidth;



    current = getColor(pt.Y / blockWidth, pt.X / blockWidth);

}

然后鼠标移动事件里重绘时稍微把区域扩大点（避免留下难看的边框）。

protected override void OnMouseMove(MouseEventArgs e)

{

    updateCursor(e.Location);



    // redraw larger spaces

    Invalidate(

        new Rectangle(

            lastCursor.X - 1,

            lastCursor.Y - 1,

            lastCursor.Width + 2,

            lastCursor.Height + 2

            )

        );

    Invalidate(

        new Rectangle(

            cursor.X - 1,

            cursor.Y - 1,

            cursor.Width + 2,

            cursor.Height + 2

            )

        );



    // fire event

    OnColorChanged();

}

最后一行「OnColorChanged();」是用来引发颜色改变事件。把事件写出来基本就完成了。

// -- custom events

public delegate void ColorChangedEventHandler(object sender, ColorChangedEventArgs e);

[Description("Fires every time when color changed.")]

public event ColorChangedEventHandler ColorChanged;

protected virtual void OnColorChanged()

{

    if (ColorChanged != null)

        ColorChanged(this, new ColorChangedEventArgs(current));

}



// custom event args

public class ColorChangedEventArgs : EventArgs

{

    Color color = Color.Black;

    public Color Color

    {

        get { return color; }

        set { color = value; }

    }



    public ColorChangedEventArgs(Color color)

        : base()

    {

        this.color = color;

    }

}

然后再完善下属性之类的，就可以在你的程序里使用了。