快捷導(dǎo)航

基于C#一個制作圖像的特寫窗口

更新時間：2025年01月15日 16:09:38 作者：坐井觀老天

許多網(wǎng)站都會顯示一個特寫窗口,其中顯示放大的圖像部分,以便您可以看到更多細(xì)節(jié),本文將使用C#制作一個簡單的圖像的特寫窗口,感興趣的可以了解下

許多網(wǎng)站都會顯示一個特寫窗口，其中顯示放大的圖像部分，以便您可以看到更多細(xì)節(jié)。您在主圖像上移動鼠標(biāo)，它會在單獨的圖片中顯示特寫。此示例執(zhí)行的操作類似。（示例使用的一些數(shù)學(xué)運算非常棘手，因此您可能需要仔細(xì)查看才能了解其工作原理。）

特寫圖實際上只是原始圖像的全尺寸副本。（“主”圖像是較小比例的相同圖像。）要顯示特寫圖，程序會在名為picCloseup的PictureBox中顯示全尺寸圖像。該控件位于名為panCloseup的Panel內(nèi)。通過在panCloseup內(nèi)移動picCloseup，程序可以顯示全尺寸圖像的不同部分。

以下代碼使程序準(zhǔn)備啟動。

// Save the original image.
private Bitmap OriginalImage, ShadedImage;
private int SmallWidth, SmallHeight;
private float ScaleX, ScaleY;
private void Form1_Load(object sender, EventArgs e)
{
    OriginalImage = picWhole.Image as Bitmap;
    picCloseup.Image = OriginalImage;
    picCloseup.SizeMode = PictureBoxSizeMode.AutoSize;
 
    // Make a shaded version of the image.
    ShadedImage = new Bitmap(OriginalImage);
    using (Graphics gr = Graphics.FromImage(ShadedImage))
    {
        using (Brush br =
            new SolidBrush(Color.FromArgb(128, 255, 255, 255)))
        {
            Rectangle rect = new Rectangle(0, 0,
                ShadedImage.Width, ShadedImage.Height);
            gr.FillRectangle(br, rect);
        }
    }
 
    // Get scale factors to map from big scale to small scale.
    ScaleX = (float)panCloseup.ClientSize.Width /
        OriginalImage.Width;
    ScaleY = (float)panCloseup.ClientSize.Height /
        OriginalImage.Height;
 
    // See how big the closeup is on the small scale.
    SmallWidth = (int)(ScaleX * picWhole.ClientSize.Width);
    SmallHeight = (int)(ScaleY * picWhole.ClientSize.Height);
}

此代碼保存原始圖像并制作該圖像的亮化版本。要制作亮化版本，它會復(fù)制原始圖像，然后用半透明的白色矩形填充它。這將成為您將鼠標(biāo)移到其上的主圖像。

當(dāng)鼠標(biāo)移入或移出主圖像時，將執(zhí)行以下代碼。

// Use the shaded background image.
private void picWhole_MouseEnter(object sender, EventArgs e)
{
    picWhole.Image = ShadedImage;
    panCloseup.Visible = true;
}
 
// Use the regular image.
private void picWhole_MouseLeave(object sender, EventArgs e)
{
    picWhole.Image = OriginalImage;
    panCloseup.Visible = false;
}

當(dāng)鼠標(biāo)位于主圖像之外時，程序顯示正常的非亮化版本。當(dāng)鼠標(biāo)進(jìn)入圖像時，程序切換為顯示亮化圖像。

當(dāng)鼠標(biāo)在主圖像上移動時，以下代碼會顯示鼠標(biāo)周圍區(qū)域的特寫。

// Display a closeup of this area.
private Rectangle ViewingRectangle;
private void picWhole_MouseMove(object sender, MouseEventArgs e)
{
    // Position picCloseup inside its parent Panel.
    float x = (float)e.X / picWhole.ClientSize.Width *
        OriginalImage.Width -
        (float)panCloseup.ClientSize.Width / 2;
    float y = (float)e.Y / picWhole.ClientSize.Height *
        OriginalImage.Height -
        (float)panCloseup.ClientSize.Height / 2;
    if (x < 0) x = 0;
    if (y < 0) y = 0;
    if (x > OriginalImage.Width - panCloseup.ClientSize.Width)
        x = OriginalImage.Width - panCloseup.ClientSize.Width;
    if (y > OriginalImage.Height - panCloseup.ClientSize.Height)
        y = OriginalImage.Height - panCloseup.ClientSize.Height;
    picCloseup.Location = new Point(-(int)x, -(int)y);
 
    // Record the position we are viewing.
    ViewingRectangle = new Rectangle((int)x, (int)y,
        panCloseup.ClientSize.Width, 
        panCloseup.ClientSize.Height);
 
    // Draw the closeup area.
    picWhole.Invalidate();
}

首先，代碼決定鼠標(biāo)周圍的區(qū)域在哪里。如果該區(qū)域部分位于主圖像之外，則代碼會調(diào)整其 X 和 Y 坐標(biāo)，使該區(qū)域位于主圖像內(nèi)。這樣可以讓特寫顯示盡可能多的圖像。

代碼將picCloseup移動到panCloseup內(nèi)，以顯示全尺寸圖像的正確部分。然后，它將在變量ViewingRectangle中記錄主圖像上將顯示的區(qū)域，并使主圖像無效以使其重繪。以下代碼顯示了主圖片的Paint事件處理程序，該處理程序處理該重繪。

// Draw the viewing area.
private void picWhole_Paint(object sender, PaintEventArgs e)
{
    // Scale so we can draw in the full scale coordinates.
    e.Graphics.ScaleTransform(ScaleX, ScaleY);
 
    // Draw the viewing area using the original image.
    e.Graphics.DrawImage(OriginalImage, ViewingRectangle, 
        ViewingRectangle, GraphicsUnit.Pixel);
    //e.Graphics.DrawRectangle(Pens.Red, ViewingRectangle);
}

此代碼使用變換，因此它可以使用全尺寸圖像的坐標(biāo)而不是主圖像（您可能還記得，主圖像是縮小比例的）的坐標(biāo)進(jìn)行繪制。然后，它將原始全尺寸圖像的一部分復(fù)制到主圖像上，以顯示鼠標(biāo)周圍的區(qū)域。結(jié)果是主圖像除了此區(qū)域外都被陰影化，此區(qū)域以原始亮度繪制。取消注釋此方法中的最后一行，以在主圖像的特寫區(qū)域周圍繪制一個紅色矩形。

我承認(rèn)這是一個令人困惑的例子，但它的效果非常酷，所以我鼓勵你下載并嘗試一下。如果你對代碼進(jìn)行一些實驗，你就能弄清楚它是如何工作的。（土衛(wèi)二是一顆特別奇怪的衛(wèi)星！）