首页 > 解决方案 > 未剪裁的重叠图像

问题描述

我想要一个透明的重叠非剪裁图像。我有一个PictureBox重叠,如this SO thread所示。

有意义的解决方案将顶部图像的父级设置为底部图像。然后将顶部图像设置为具有透明背景。该技术非常有效,只需将顶部图像的父级设置为底部图像的父级,即可将顶部图像剪辑到底部图像的区域。

顶部图像父属性未设置为底部图像

2个单独的图像,父级设置为主控件

现在,如果顶部图像父属性设置为底部图像,会发生以下情况。

顶部图像父属性设置为底部图像的剪切效果

我不想剪掉顶部的图像。

我会自愿参与整个 Visual Studio 2019 (VS2019) 项目,但不知道如何发布。

这是代码:

using System;
using System.Drawing;
using System.Windows.Forms;

namespace ImageOverlap
{
    public partial class FrmMain : Form
    {
        public FrmMain()
        {
            InitializeComponent();
        }

        private void FrmMain_Load(object sender, EventArgs e)
        {
            this.ImgTop.Parent = this.ImgBottom;
            this.ImgTop.BackColor = Color.Transparent;
            //this.ImgTop.BringToFront();
            this.ChangeX.Value = 430;
            this.ChangeY.Value = 15;
        }

        private void ChangeX_ValueChanged(object sender, EventArgs e)
        {
            this.ImgTop.Left = (int)this.ChangeX.Value;
        }

        private void ChangeY_ValueChanged(object sender, EventArgs e)
        {
            this.ImgTop.Top = (int)this.ChangeY.Value;
        }
    }
}

我放了 2 个NumericUpDown控件来更好地调整手指指针的位置。

可以删除对方法的调用BringToFront(),什么也不做,就像上面几个答案中提到的那样,用于测试。

更新

我想显示整个顶部图像,只是顶部图像的一部分,它与底部图像重叠是透明的。

使用必须是世界上最好的应用程序 Paint.Net,这就是我想要的,也是一种很好的可重用代码格式。

与底部图像重叠的正确未剪裁的顶部图像

我目前对解决方案的想法是制作手形指针的编程副本并将其覆盖到仅剪切左侧部分的表单上,该左侧部分与底部图像重叠。我认为这个想法可能可行,如果可行,将作为答案发布。

标签: c#visual-studiowinformsoverlaypicturebox

解决方案


这个答案可能可以优化并使其更可重用,但它确实有效。

我创建了顶部控件的副本。然后我使用了这个更新的代码,其中包括一个可重用的方法。

using System;
using System.Drawing;
using System.Windows.Forms;

namespace ImageOverlap
{
    public partial class FrmMain : Form
    {
        public FrmMain()
        {
            InitializeComponent();
        }

        private void FrmMain_Load(object sender, EventArgs e)
        {
            this.ImgTop.Parent = this.ImgBottom;
            this.ImgTop.BackColor = Color.Transparent;
            this.ImgTop.BringToFront();
            this.ChangeX.Value = 430;
            this.ChangeY.Value = 15;
        }

        private void ChangeX_ValueChanged(object sender, EventArgs e)
        {
            this.SetOverlayImageLocation((int)this.ChangeX.Value, this.ImgTop.Top);
        }

        private void ChangeY_ValueChanged(object sender, EventArgs e)
        {
            this.SetOverlayImageLocation(this.ImgTop.Left, (int)this.ChangeY.Value);
        }

        private void SetOverlayImageLocation(int newX, int newY)
        {
            this.ImgTop.Left = newX;
            this.ImgTop.Top = newY;
            Point ptImageAtParent = new Point(this.ImgTop.Left + this.ImgBottom.Left, this.ImgTop.Top + this.ImgBottom.Top);
            this.ImgTopCopy.Location = ptImageAtParent;
            this.ImgTopCopy.SendToBack();
        }
    }
}

我在想.Net 可能有一个很好的方法/属性来获取相对于父级的点。我用蛮力方法做到了。然后我把副本放在后面。副本的位置是相对于父级设置的。诀窍是副本将 parent 属性设置为主控件。

这是我得到的运行时视觉效果,不涉及 Paint.Net;看起来相同,这是目标。

好的部分是NumericUpDown控件可以完美地移动组合图像,对于用户来说,它就像一个图像。

视觉上正确重叠的非剪辑图像,实际上是 2 个单独的图像。


推荐阅读