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

這篇文章主要介紹了怎么用C#繪制九宮格形式的圖片，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

方法一：圖片上繪制直線

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

	 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#繪制九宮格形式的圖片”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!