实现窗体的渐变背景

A:关键所在

渐变图形是一种特殊的图形,它从窗体的一端开始移动,同时颜色缓慢变化,达到窗体的另一端,但图形已经变为另一种颜色。

这种奇特的视觉效果制作起来相当简单,只需将屏幕分成许多行,每一行显示不同的颜色就可以了。渐变图形可以有许多种形式,有圆形渐变、矩形渐变、对角渐变等多种显示效果。要显示渐变,需使用到RGB 宏,每次使颜色值的各颜色分量稍有变化。

B:实现与应用

选择菜单 File | New Application,创建一个新的项目文件。在窗体 Form1 上放置一个 TColorDialog 控件,然后切换到Unit1.h,在 TForm1 的 private 部分加入两个变量的定义,分别用于设置起始颜色和终止颜色。

private: // User declarations

TColor StartColor,EndColor;

然后双击窗体,创建窗体的 OnCreate 事件处理函数,在其中加入如下代码,用于让用户选择起始颜色和结束颜色。

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
  if(ColorDialog1->Execute())
   StartColor=ColorDialog1->Color;
  if(ColorDialog1->Execute())
   EndColor=ColorDialog1->Color;
}
//---------------------------------------------------------------------------

最后创建窗体 Form1 的 OnPaint 事件处理函数,在其中加入如下代码,用稍有变化的颜色值画一系列的垂直线,达到渐变的效果。

//---------------------------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender)
{
  float pwidth;
  int redstart,greenstart,bluestart,redend,greenend, blueend;
  float redinc,greeninc,blueinc;
  pwidth=float(Width);
  redstart=GetRValue(StartColor);
  greenstart=GetGValue(StartColor);
  bluestart=GetBValue(StartColor);
  redend=GetRValue(EndColor);
  greenend=GetGValue(EndColor);
  blueend=GetBValue(EndColor);
  redinc=(redend-redstart)/pwidth;
  greeninc=(greenend-greenstart)/pwidth;
  blueinc=(blueend-bluestart)/pwidth;
  for(int i=0;i<Width;i++)
  {
   Canvas->Pen->Color=TColor(RGB(redstart+int(redinc*i),
   greenstart+int(greeninc*i),
   bluestart+int(blueinc*i)));
   Canvas->MoveTo(i,0);
   Canvas->LineTo(i,Height);
  }
}
//---------------------------------------------------------------------------

C:专家点评

程序中设渐变开始的颜色为 StartColor,结束的颜色为 EndColor。利用GetRValue、GetGValue、GetBValue 函数分别获得开始颜色的红、绿、蓝三原色分量 redstart greenstart bluestart 和结束颜色的三原色红、绿、蓝分量 redend greenend blueend。如果矩形的宽度为 pwidth 象素,则每次变化的各颜色分量值应分别为(redend-redstart)/pwidth、(greenend-greenstart)/pwidth、(blueend-bluestart)/pwidth,最后写一个循环,画一系列直线。

这里介绍的仅仅是颜色渐变的一种形式,读者完全可以参照其实现方法,改变数学运算,实现如“从上至下逐步加深”、“从左至右逐步加深”等颜色渐变形式,此外,还可以通过画一系列颜色不断变化的圆,制作圆形渐变效果。首先画一个最大的圆,然后依次画半径比前一个圆小一个象素的圆,然后依次画半径比前一个圆小一个象素的圆,同时圆的颜色也发生变化。

时间: 2024-09-29 10:19:55

实现窗体的渐变背景的相关文章

PPT怎么制作渐变背景

  PPT怎么制作渐变背景          PowerPoint中纯色背景渐变 在PowerPoint 2016中,切换到"设计"选项卡,点击工具栏右侧的"设置背景格式"按钮,在右侧调出设置背景格式窗格,选中"渐变填充"项,就可以为当前幻灯片设置纯色渐变背景了. PPT中的背景渐变至少有两组或多组颜色构成.在色彩渐变的可控制变量中,最关键的是"渐变光圈",它可以确定有几组颜色渐变,渐变的颜色,以及渐变的颜色.位置.透明度和亮

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

一.有点俗态的开场白 要是两年前,实现"兼容性的渐变效果"这个说法估计不会被提出来的,那个时 候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可 能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏览器中,目前不支持Opera浏览器. 本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5.  二.IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需

16个轻盈灵逸的渐变背景网站

  仅靠敲代码就搞定背景的网站!得益于CSS技术的进步,现在我们可以敲代码就实现超赞的渐变背景,效果丝毫不输Photoshop,且不受屏幕大小限制,绝对是未来的热门趋势之一,抢先学起来 >>> Love Message Niek Dekker W3 Erik Zuuring Pixel Palace Bacae Canal TP Speedo Fit Oscar Barber Atom The Snippet App Coline Pushh 3Minute inc. Electric

渐变背景(background)效果

chrom and Safari浏览器: webkit核心的浏览器,使用CSS3渐变方法(css-gradient) -webkit-gradient(type, start_point, end_point, / stop...) -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...) background: -webkit-gradient(linear,0 0,0 1

制作网页中的渐变背景方法

方法一:用图实现1切一张1*760的渐变背景图2在dw中添加做背景 方法二:用css实现,代码如下:<html><body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)"><center><font size="+3"><stro

photoshop超简单渐变背景制作教程

给各位photoshop软件的使用者们来说说超简单的渐变背景的制作教程. 教程分享: NO:1   NO:2   NO:3   是不是看了上面的背景觉的这种渐变有点难度呢? 告诉大家学会一招就OK哦! Step:1先在网上找一些你所需要想要颜色图片,选择颜色.选择大尺寸!   Step:2 把选好图片拖入ps,然后,直接高斯模糊,数值大一些哦!如下图   见证上面三幅图真相   好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的超简单的渐变背景的制作教程分享的全部

div渐变背景的实现

<html>  <head>  <meta http-equiv=content-type content="text/html; charset=gbk">  <title>渐变背景</title>  <script>  var setGradient = (function(){  //private variables;  var p_dCanvas = document.createElement('can

JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)_javascript技巧

本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =

photoshop超简单的渐变背景制作教程

给各位photoshop软件的使用者们来详细的分享一下超简单的渐变背景的制作教程. 教程分享: NO:1   NO:2   NO:3   是不是看了上面的背景觉的这种渐变有点难度呢? 告诉大家学会一招就OK哦! Step:1先在网上找一些你所需要想要颜色图片,选择颜色.选择大尺寸!   Step:2 把选好图片拖入ps,然后,直接高斯模糊,数值大一些哦!如下图   见证上面三幅图真相   好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的超简单的渐变背景的制作教程