3

我想在我的软件中制作一种多色条。一种进度条,但有两个当前值。

这就是我需要它的原因。我有一些“预算部分”,每个部分都有自己的限制(100 美元、1000 美元等)。我还有一个用于添加新账单(并将账单链接到预算部分)的编辑表格。在这个编辑器中,我想直观地表示预算部分有多满,以及当前账单的价格对该预算部分有多少影响。

例如,整个酒吧是 100 美元。绿色部分表示已保存账单的价格总和,例如 60 美元。黄色部分表示当前账单的价格,尚未保存,例如 5$。

像这样:多部分进度条

当然,值应该是动态设置的。

你能推荐我绘制这个的任何组件(也许是一些高级进度条,可以显示多个当前值?)

4

3 回答 3

4

正如大卫建议的那样,自己画吧。几乎一样多的麻烦。放下TImage你想要你的仪表的地方并使用这样的东西:

procedure PaintTwoColorGauge(const BackgroundColor, BorderColor, FirstGaugeColor, SecondGaugeColor: TColor; FirstGaugeValue, SecondGaugeValue, TotalValue: Integer; const Img: TImage);
var B: TBitmap;
    ImgWidth, G1Width, G2Width: Integer;
begin
  B := TBitmap.Create;
  try
    B.Width := Img.Width;
    B.Height := Img.Height;
    B.Canvas.Brush.Color := BackgroundColor;
    B.Canvas.Brush.Style := bsSolid;
    B.Canvas.Pen.Style := psClear;
    B.Canvas.Pen.Width := 1;
    B.Canvas.FillRect(Rect(0, 0, B.Width, B.Height));

    if TotalValue <> 0 then
    begin
      ImgWidth := B.Width - 2; // Don't account the width of the borders.
      G1Width := (FirstGaugeValue * ImgWidth) div TotalValue;
      G2Width := (SecondGaugeValue * ImgWidth) div TotalValue;
      if G1Width > ImgWidth then G1Width := ImgWidth; // Just in case
      if G2Width > ImgWidth then G2Width := ImgWidth;

      if G2Width > G1Width then
        begin
          B.Canvas.Brush.Color := SecondGaugeColor;
          B.Canvas.FillRect(Rect(0, 0, G2Width, B.Height));

          B.Canvas.Brush.Color := FirstGaugeColor;
          B.Canvas.FillRect(Rect(0, 0, G1Width, B.Height));
        end
      else
        begin
          B.Canvas.Brush.Color := FirstGaugeColor;
          B.Canvas.FillRect(Rect(0, 0, G1Width, B.Height));

          B.Canvas.Brush.Color := SecondGaugeColor;
          B.Canvas.FillRect(Rect(0, 0, G2Width, B.Height));
        end;

    end;

    B.Canvas.Pen.Color := BorderColor;
    B.Canvas.Pen.Style := psSolid;
    B.Canvas.Brush.Style := bsClear;
    B.Canvas.Rectangle(0, 0, B.Width, B.Height);

    Img.Picture.Assign(B);

  finally B.Free;
  end;
end;

例如,下面是这段代码对我的 3 个 TImage 所做的事情(我的图像是故意 shpaed,因为你看到它们):

procedure TForm1.FormCreate(Sender: TObject);
begin
  PaintTwoColorGauge(clWhite, clBlack, clGreen, clYellow, 50, 55, 100, Image1);
  PaintTwoColorGauge(clWhite, clBlack, clGreen, clYellow, 50, 60, 100, Image2);
  PaintTwoColorGauge(clWhite, clBlack, clGreen, clYellow, 20, 60, 100, Image3);
end;

在此处输入图像描述

于 2013-01-14T19:10:49.190 回答
2

自己写,很有趣!但是,虽然不是真的那么困难,但编写自己的组件可能看起来是一项艰巨的任务。特别是对于新手使用或没有这样做的经验。

接下来的选项是自己绘制它,因此预期的组件应该“始终”是TPaintBox控件。实现OnPaint事件处理程序并在需要时重绘自己。下面是如何将这样的油漆盒转换为双规格组件的示例实现:

type
  TDoubleGauge = record
    BackgroundColor: TColor;
    BorderColor: TColor;
    Color1: TColor;
    Color2: TColor;
    Value1: Integer;
    Value2: Integer;
    MaxValue: Integer;
  end;

  TForm1 = class(TForm)
    PaintBox1: TPaintBox;
    procedure FormCreate(Sender: TObject);
    procedure PaintBox1Paint(Sender: TObject);
  private
    FDoubleGauge: TDoubleGauge;
  end;

...

procedure TForm1.PaintBox1Paint(Sender: TObject);
var
  Box: TPaintBox absolute Sender;
  MaxWidth: Integer;
  Width1: Integer;
  Width2: Integer;
begin
  with FDoubleGauge do
  begin
    Box.Canvas.Brush.Color := BackgroundColor;
    Box.Canvas.Pen.Color := BorderColor;
    Box.Canvas.Rectangle(0, 0, Box.Width, Box.Height);
    if MaxValue <> 0 then
    begin
      MaxWidth := Box.Width - 2;
      Width1 := (MaxWidth * Value1) div MaxValue;
      Width2 := (MaxWidth * Value2) div MaxValue;
      Box.Canvas.Brush.Color := Color2;
      if Abs(Value2) < Abs(MaxValue) then
        Box.Canvas.FillRect(Rect(1, 1, Width2, Box.Height - 1));
      Box.Canvas.Brush.Color := Color1;
      if Abs(Value1) < Abs(Value2) then
        Box.Canvas.FillRect(Rect(1, 1, Width1, Box.Height - 1));
    end;
  end;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  FDoubleGauge.BackgroundColor := clWhite;
  FDoubleGauge.BorderColor := clBlack;
  FDoubleGauge.Color1 := clGreen;
  FDoubleGauge.Color2 := clYellow;
  FDoubleGauge.Value1 := 50;
  FDoubleGauge.Value2 := 60;
  FDoubleGauge.MaxValue := 100;
  PaintBox1.Invalidate;
end;

嗯,这看起来很努力。尤其是当单个表格上需要更多这样的双规时。因此,我喜欢Cosmin Prund 的回答,因为他使用TImage的组件能够“记住”在需要时必须重新绘制的内容。作为奖励,这里是他的代码的替代版本(在无效输入上的行为略有不同):

procedure DrawDoubleGauge(BackgroundColor, BorderColor, Color1, Color2: TColor;
  Value1, Value2, MaxValue: Integer; Img: TImage);
var
  Width: Integer;
  Width1: Integer;
  Width2: Integer;
begin
  Img.Canvas.Brush.Color := BackgroundColor;
  Img.Canvas.Pen.Color := BorderColor;
  Img.Canvas.Rectangle(0, 0, Img.Width, Img.Height);
  if MaxValue <> 0 then
  begin
    Width := Img.Width - 2;
    Width1 := (Width * Value1) div MaxValue;
    Width2 := (Width * Value2) div MaxValue;
    Img.Canvas.Brush.Color := Color2;
    if Abs(Value2) < Abs(MaxValue) then
      Img.Canvas.FillRect(Rect(1, 1, Width2, Img.Height - 1));
    Img.Canvas.Brush.Color := Color1;
    if Abs(Value1) < Abs(Value2) then
      Img.Canvas.FillRect(Rect(1, 1, Width1, Img.Height - 1));
  end;
end;
于 2013-01-14T20:54:27.430 回答
1

我也在寻找这个,因为我不想在这上面花任何钱,我会遵循建议的解决方案,但是如果有人想要一个高级组件,我会找到一个不太贵并且在我看来相当不错的组件,这是链接,以防它对其他人有用:

http://www.tmssoftware.com/site/advprogr.asp?s=

谢谢大家。

于 2013-10-03T17:03:21.907 回答