用C#繪制九宮格形式的圖片

Posted on by

使用GDI+產生九宮格形式的圖片，不考慮局部放大的功能。具體的方式如下：

方法一：圖片上繪制直線

  想到的最簡單粗暴的方式就是直接在圖片上繪制九宮格的線，看著像是切成瞭九片，實際上還是完整的圖片，主要代碼及效果如下所示：

	 m_startX = pnlCanvas.Width / 6;
     m_startY = pnlCanvas.Height / 6;
     m_imageWidth = pnlCanvas.Width - m_startX * 2;
     m_imageHeight = pnlCanvas.Height - m_startY * 2;

     e.Graphics.DrawImage(m_image, m_startX, m_startY, m_imageWidth, m_imageHeight);

     using (Pen p = new Pen(Brushes.White,m_lineWidth))
     {
         int stepX = m_imageWidth / 3;
         int stepY = m_imageHeight / 3;

         for(int i=1;i<3;i++)
         {
             e.Graphics.DrawLine(p, m_startX + i * stepX, m_startY, m_startX + i * stepX, m_startY + m_imageHeight);
             e.Graphics.DrawLine(p, m_startX, m_startY + i * stepY, m_startX + m_imageWidth, m_startY + i * stepY);
         }
     }

在這裡插入圖片描述

這種方式的缺點是白線會遮住部分圖片內容。如果要實現局部放大，就要計算並保存每部分圖片的位置和大小，等鼠標移動到圖片區域時，將該部分圖片放大繪制即可。

方法二：切分繪制圖片

  Graphics類中的DrawImage函數有一個重載函數，可以將圖片的部分區域內容繪制到指定區域，可以利用該函，將原圖分為九個區域，然後依次繪制到窗口中，在加上線條即可構成九宮格形式。主要代碼及效果圖如下所示：
  這種方式的問題是繪制線條時難以精確的將線條繪制到預留的線條區域，看著效果不太好。

	 m_startX = pnlCanvas.Width / 6-2*m_lineWidth; 
     m_startY = pnlCanvas.Height / 6 - 2 * m_lineWidth;
     m_imageWholeWidth = pnlCanvas.Width - m_startX * 2;
     m_imageWholeHeight = pnlCanvas.Height - m_startY * 2;
     int srcImageSplittedWidth = m_image.Width / 3;
     int srcImageSplittedHeight = m_image.Height / 3;
     int destImageSplittedWidth = (m_imageWholeWidth - 2 * m_lineWidth) / 3;
     int destImageSplittedHeight = (m_imageWholeHeight - 2 * m_lineWidth) / 3;
     
	 for (int heightIndex = 0; heightIndex < 3; heightIndex++)
     {
         for (int widthIndex = 0; widthIndex < 3; widthIndex++)
         {
             g.DrawImage(m_image,
                 new Rectangle(m_startX + destImageSplittedWidth * widthIndex + m_lineWidth * widthIndex, m_startY + destImageSplittedHeight * heightIndex + m_lineWidth * heightIndex, destImageSplittedWidth, destImageSplittedHeight),
                 new Rectangle(srcImageSplittedWidth * widthIndex, srcImageSplittedHeight * heightIndex, srcImageSplittedWidth, srcImageSplittedHeight), GraphicsUnit.Pixel);
         }                
     }
     
	 using (Pen p = new Pen(Brushes.White, m_lineWidth))
     {
        p.Alignment = System.Drawing.Drawing2D.PenAlignment.Center;
        for (int i = 1; i < 3; i++)
        {
            g.DrawLine(p, m_startX + destImageSplittedWidth * i + m_lineWidth * i, m_startY, m_startX + destImageSplittedWidth * i + m_lineWidth * i, m_startY + m_imageWholeHeight);
            g.DrawLine(p, m_startX, m_startY + i * destImageSplittedHeight + m_lineWidth * i, m_startX + m_imageWholeWidth, m_startY + i * destImageSplittedHeight + m_lineWidth * i);
        }
     }

在這裡插入圖片描述

為避免上述問題，將圖片背景設置為白色，這樣繪制完九片圖形後，結合背景色，看著就是九宮格形式。代碼就補貼瞭，就是上面的代碼去掉繪制線條部分，然後在繪制圖片前用白色填充圖片區域即可。代碼效果如下圖所示。

在這裡插入圖片描述

此時還有一點問題，就是右側和下方還有一丁點空白（感覺是計算各屬性值時取整造成的）。為消除空白，直接在填充圖片區域背景色時，填充寬度和高度減少2像素，這樣就不會出現上述問題瞭。最終的效果如下所示：

g.FillRectangle(Brushes.White, m_startX, m_startY, m_imageWholeWidth-2, m_imageWholeHeight-2);

在這裡插入圖片描述

總結

到此這篇關於用C#繪制九宮格形式的圖片的文章就介紹到這瞭,更多相關C#九宮格圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：