[clock2]
Bài viết mới

Tạo hình tròn giống Avatar của Gmail

Tạo hình tròn giống Avatar của Gmail
Đăng bởi: Mr. Cùi Bắp - Lượt xem: 817 10:37:30, 10/12/2015CSHARP

Theo style hiện nay thì có nhiều trang web sử dụng avatar hình tròn giống như avatar của Gmail hay các ứng dụng có giao diện Window 8. Để theo trào lưu thì hôm nay mình xin hướng dẫn các bạn đoạn code nhỏ và tương đối dễ để làm điều đó. Các bạn xem video ví dụ sau để biết thêm nhe: 

Sau đây mình sẽ hướng dẫn các bạn thực hiện:

Các bạn thiết kế Form như hình sau

Các sự kiện trong chương trình

		public Form1()
		{
			InitializeComponent();
            button1.Click+=button1_Click;
            button2.Click+=button2_Click;
            trackBar1.Scroll+=trackBar1_Scroll;
		}

Hàm xử lý các sự kiện

        private void button1_Click(object sender, EventArgs e)
        {
            if (openFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                pictureBox1.Image = Image.FromFile(openFileDialog1.FileName);
                pictureBox2.Image = CreateCircleImage(pictureBox1.Image, trackBar1.Value, button2.ForeColor);
            }
        }

        private void button2_Click(object sender, EventArgs e)
        {
            if (colorDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                button2.ForeColor = colorDialog1.Color;
                pictureBox2.Image = CreateCircleImage(pictureBox1.Image, trackBar1.Value, button2.ForeColor);
            }
        }

        private void trackBar1_Scroll(object sender, EventArgs e)
        {
            pictureBox2.Image = CreateCircleImage(pictureBox1.Image, trackBar1.Value, button2.ForeColor);
        }

Tiếp theo là hàm quan trọng để vẽ hình gốc thành hình tròn và thêm một vài tham số về màu sắc và kích thước đường viền. Mình có comment lại chức năng của từng dòng code các bạn có thể từ từ tìm hiểu:


        /// <summary>
        /// Tạo Image hình tròn
        /// </summary>
        /// <param name="img">Image cần tạo</param>
        /// <param name="borderSize">Size của border</param>
        /// <param name="borderColor">Màu của border</param>
        /// <returns></returns>
        Image CreateCircleImage(Image img, int borderSize, Color borderColor)
        {
            Bitmap bmp = new Bitmap(img);//Tạo một Bitmap từ hình cần tạo
            int diameter; //Đường kính của hình tròn
            /*
             * Đường kính của hình tròn sẽ là chiều ngắn nhất của Image ban đầu.
             * Vì nếu lấy chiều dài hơn làm đường kính thì khi vẽ ra hình tròn sẽ bị thiếu góc
             * VD: 200x180 thì đường kính của hình tròn sẽ là 180
             */
            if (bmp.Width > bmp.Height)
                diameter = bmp.Height;
            else
                diameter = bmp.Width;
            //Tạo một vùng hình vuông có kích thước bằng đường kính của hình tròn
            Rectangle rec = new Rectangle(0, 0, diameter, diameter);
            //Tạo Image từ vùng được chọn với định dạng gốc của Image
            bmp = bmp.Clone(rec, bmp.PixelFormat);
            //Tạo một cọ vẽ cho hình tròn vừa tạo xong
            TextureBrush tb = new TextureBrush(bmp);
            //Tạo một hình mới
            Bitmap ret = new Bitmap(diameter, diameter);
            //Tạo Graphics để vẽ hình tròn
            Graphics g = Graphics.FromImage(ret);
            //Chỉnh thuộc tính vẽ hình với đường viền mịn
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            //Vẽ hình tròn với đường kính đã chọn phía trên
            g.FillEllipse(tb, 0, 0, diameter, diameter);
            //Vẽ đường viền của hình tròn với các tham số truyền vào
            g.DrawEllipse(new Pen(borderColor, (float)borderSize), borderSize / 2, borderSize / 2, diameter - borderSize, diameter - borderSize);
            //Tạo lại hình lần cuối cùng với kích thước của PictureBox2
            ret = new Bitmap(ret, new Size(pictureBox1.Width, pictureBox1.Width));
            return ret;
        }

Xong rồi đó, giờ thì F5 và thưởng thức thành quả thôi. Chúc các bạn vui với đoạn code nhỏ ở trên. Nếu thấy hay hãy Like và Share để ủng hộ mình nhé. Cảm ơn!

 

Tạo hình tròn giống Avatar của Gmail
Đăng bởi: Mr. Cùi Bắp - Lượt xem: 817 10:37:30, 10/12/2015CSHARP

THẢO LUẬN BÀI VIẾT

PHẦN MỀM EMAIL MARKETING

phần mềm gởi email marketing hàng loạt

CÁC BÀI CÙNG CHỦ ĐỀ

Đọc tiếp

PHẦN MỀM EMAIL MARKETING

phần mềm gởi email marketing hàng loạt
.