Home

Application: The Color Selector

 

Setting the Color of, or Painting, a Pixel

In our introduction to GDI+, we saw that the screen of a computer monitor uses a series of horizontal and vertical lines, the intersection of two perpendicular lines is a pixel. Each pixel holds one color. Of course, two adjacent pixels can hold the same color or each can hold a different color.

A bitmap is a series of colored adjacent pixels. Put another way, for a group of pixels to be considered a bitmap, these pixels must constitute a group. A bitmap is made by specifying the color of each pixel. This means that the pictures we have used so far were simply made of pixels and each pixel held an appropriate color.

If you decide to create or design a picture using the tool resources in Microsoft Visual C++ available from the Resource View (or the Solution Explorer), you would experiment, on a large scale the ability to specify the color of each individual pixel, using (a limited list of) colors:

Bitmap Design
 

Actually, when you have a bitmap, you can access any pixel of the picture and then you can either specify its color or get its current color.

To allow you to specify the color of a pixel, the Bitmap class provides a method named SetPixel and its syntax is:

public void SetPixel(int x, int y,	Color color);

The x and y arguments represent the left and top values of the location of the pixel. The 3rd argument specifies the new color that the pixel will hold. Here is an example:

private void Form1_Paint(object sender, PaintEventArgs e)
{
        Bitmap bgDrawingArea = new Bitmap(Width, Height);
        e.Graphics.DrawImage(bgDrawingArea, 0, 0);

        for (int i = 0; i < Width; i += 20)
             for (int j = 0; j < Height; j += 20)
             {
                    bgDrawingArea.SetPixel(i, j, Color.White);

                    Graphics painter = Graphics.FromHwnd(Handle);
                    painter.DrawImage(bgDrawingArea, 0, 0);
             }
}

Pixel

Getting the Color of a Pixel

We previously mentioned that a picture was a series of pixels with each pixel holding a color. As opposed to specifying the color of a pixel, you can retrieve its color. To support this, the Bitmap class is equipped with a method named GetPixel. Its syntax is:

public Color GetPixel(int x, int y);

The x and y arguments represent the left and top values of the location of the pixel whose color you want to get. This method returns the color of that pixel. 

Practical LearningPractical Learning: Accessing the Color of a Pixel

  1. To create a new program, on the main menu, click File -> New -> Project...
  2. In the Templates list, click Windows Application
  3. Set the Name to ColorSelector1 and click OK
  4. Copy the following picture and paste it somewhere in your computer
     
    Color Palette
  5. Design the form as follows:
     
    Color Selector
    Control Text Name Other Properties
    PictureBox   pbxColor Image: colorpal1.jpg
    Label Red:    
    TextBox   txtRed  
    Label Green:    
    TextBox   txtGreen  
    Label Blue:    
    TextBox   txtBlue  
    Panel   pnlPreview BorderStyle: FixedSingle
    Button Close btnClose  
  6. Right-click the form and click View Code
  7. Above the public Form1() line, declare a Boolean variable named IsSelecting:
     
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Text;
    using System.Windows.Forms;
    
    namespace ColorSelector1
    {
        public partial class Form1 : Form
        {
            bool isSelecting;
    
            public Form1()
            {
                InitializeComponent();
            }
        }
    }
  8. Return to the form and double-click an unoccupied area of its body
  9. Implement the event as follows:
     
    private void Form1_Load(object sender, EventArgs e)
    {
                isSelecting = false;
    }
  10. Return to the form and click the picture box control on it
  11. In the Properties window, click the Events button and double-click MouseDown
  12. Implement the event as follows:
     
    private void pbxColor_MouseDown(object sender, MouseEventArgs e)
    {
                isSelecting = true;
    }
  13. Return to the form and click the picture box control on it
  14. In the Events section of the Properties window, double-click MouseUp and implement the event as follows:
     
    private void pbxColor_MouseUp(object sender, MouseEventArgs e)
    {
                isSelecting = false;
    }
  15. Return to the form and click the picture box control on it
  16. In the Events section of the Properties window, double-click MouseMove and implement the event as follows:
     
    private void pbxColor_MouseMove(object sender, MouseEventArgs e)
    {
            if (isSelecting == true)
            {
                    Bitmap bmpImage = (Bitmap)pbxColor.Image;
                    Color clr = bmpImage.GetPixel(e.X, e.Y);
    
                    txtRed.Text = clr.R.ToString();
                    txtGreen.Text = clr.G.ToString();
                    txtBlue.Text = clr.B.ToString();
    
                    pnlPreview.BackColor = clr;
            }
    }
  17. Execute the application
  18. Click the mouse on the picture mouse and drag to produce a color
     
  19. Close the form
 

Home Copyright © 2007 FunctionX, Inc.