基于相对位置与比例绘制用户控件中的三角形求助

嘿，我帮你搞定这个用户控件的三角形绘制问题！先梳理下你现有代码里的几个关键错误，然后一步步修正，实现支持相对位置且能通过用户控制的三角形：

一、现有代码里的坑 #

• Point构造函数用错了：Point p1 = new Point(this.Width); 这种写法不对哦，Point 需要同时传入x和y两个坐标参数，比如右上角的点应该是 new Point(this.Width, 0)，右下角是 new Point(this.Width, this.Height)，具体要看你想画什么样的三角形。
• FillPolygon参数类型错了：你传了fondo（Color类型）给FillPolygon，但它第一个参数要求是Brush类型，你已经创建了Brush b = new SolidBrush(fondo);，应该用这个b来传参才对。
• 没做相对位置适配：当前的点都是固定值，不会随控件尺寸变化而调整，也没关联你的valor变量实现用户控制（比如音量大小对应三角形的填充范围）。

二、修正后的完整代码 #

假设你要做的是随控件尺寸自适应，并且能通过valor（0-100区间）控制填充范围的音量控件（比如音量越大，三角形填充越多），下面是调整后的代码：

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

namespace MisControles
{
    public partial class ControlVolumen : UserControl
    {
        private int _valor;
        private Color _fondo;
        private Color _color1;
        private Color _color2;
        private Color _color3;

        public ControlVolumen()
        {
            InitializeComponent();
            _valor = 0;
            _fondo = Color.Empty;
            _color1 = Color.Green;
            _color2 = Color.Yellow;
            _color3 = Color.Red;
            // 开双缓冲避免绘制闪烁
            DoubleBuffered = true;
        }

        // 对外暴露Valor属性，方便外部控制音量
        public int Valor
        {
            get => _valor;
            set
            {
                // 把值限制在0-100之间，避免超出范围
                _valor = value < 0 ? 0 : value > 100 ? 100 : value;
                // 值变了就触发重绘，更新图形
                Invalidate();
            }
        }

        // 控件尺寸变化时，触发重绘保持图形自适应
        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);
            Invalidate();
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;
            // 开启抗锯齿，让三角形边缘更平滑
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

            // 先画控件背景（如果设置了背景色）
            if (_fondo != Color.Empty)
            {
                using (Brush fondoBrush = new SolidBrush(_fondo))
                {
                    g.FillRectangle(fondoBrush, ClientRectangle);
                }
            }

            // 计算相对位置的三角形顶点——这里可以替换成你老师给的公式
            // 示例逻辑：Valor越大，三角形的右上角越靠右，填充范围越大
            float relativeWidth = Width * ((float)_valor / 100);
            Point[] trianglePoints = new Point[]
            {
                new Point(0, Height),          // 左下角
                new Point((int)relativeWidth, 0), // 右上角（随Valor动态变化）
                new Point(0, 0)                // 左上角
            };

            // 根据Valor选择对应的颜色（绿→黄→红）
            Brush fillBrush;
            if (_valor <= 33)
                fillBrush = new SolidBrush(_color1);
            else if (_valor <= 66)
                fillBrush = new SolidBrush(_color2);
            else
                fillBrush = new SolidBrush(_color3);

            // 用using包裹Brush，确保GDI+资源被正确释放，避免内存泄漏
            using (fillBrush)
            {
                g.FillPolygon(fillBrush, trianglePoints);
            }
        }
    }
}

三、关键细节说明 #

• 相对位置实现：通过Width * ((float)_valor / 100)计算动态顶点，不管控件拉多大，三角形都会按比例适配，这就是相对位置的核心。
• 资源管理：用using语句处理Brush，GDI+资源如果不手动释放容易内存泄漏，这个细节很重要。
• 重绘触发：在Valor属性变更和OnResize里调用Invalidate()，保证控件状态变了之后图形能及时更新。
• 平滑绘制：加了g.SmoothingMode = AntiAlias，三角形边缘不会有锯齿，看起来更舒服。

四、适配老师给的公式 #

如果老师给了特定的坐标计算公式，比如“三角形顶点Y坐标 = 控件高度 × (1 - Valor/100)”，你只需要修改trianglePoints里的坐标就行。比如要画底部为底边的等腰三角形，顶点随Valor变化：

Point[] trianglePoints = new Point[]
{
    new Point(0, Height),
    new Point(Width / 2, (int)(Height * (1 - (float)_valor / 100))),
    new Point(Width, Height)
};

替换进去就能完美适配老师的要求啦！

内容的提问来源于stack exchange，提问作者Lluis