当前位置: 首页 > article >正文

Qt 视口和窗口

Qt 视口和窗口

1、视口和窗口的定义与原理

       绘图设备的物理坐标是基本的坐标系,通过 QPainter 的平移、旋转等变换可以得到更容易操作的逻辑坐标。       为了实现更方便的坐标,QPainter 还提供了视口 (Viewport)和窗口 (Window)坐标系,通过QPainter 内部的坐标变换矩阵自动转换为绘图设备的物理坐标。

        视口表示绘图设备的任意一个矩形区域的物理坐标,可以只选取物理坐标的一个矩形区域用于绘图。默认情况下,视口等于绘图设备的整个矩形区。       窗口与视口是同一个矩形,只不过是用逻辑坐标定义的坐标系。窗口可以直接定义矩形区的逻辑坐标范围。图下图所示是对视口和窗口的图示说明。

       左图中的矩形框代表绘图设备的物理大小和坐标范围,假设宽度为 300 像素,高度为200 像素。现在要取其中间的一个正方形区域作为视口,灰色的正方形就是视口,绘图设备的物理坐标中,视口的左上角坐标为(50,0),右下角坐标为(250,200)。定义此视口,可以使用QPainter的 setViewport()函数,其函数原型为: 

void QPainter::setViewport(int x,int y, int width, int height)

   要定义上图中左图中的视口,使用下面的语句:

painter.setViewport(50,0,200,200);

      表示从绘图设备物理坐标系统的起点(50,0)开始,取宽度为 200、高度为 200 的一个矩形区域作为视口。

        对于上图中左图的视口所表示的正方形区域,定义一个窗口(上图中右图),窗口坐标的中心在正方形中心,并设置正方形的逻辑边长为 100。可使用QPainter 的 setWindow()函数,其函数原型为:

void QPainter::setWindow(int x,int y, int width,int height)

所以,此处定义窗口的语句是:

painter. setWindow (-50,-50,100,100);

       它表示对应于视口的矩形区域,其窗口左上角的逻辑坐标是(-50,-50),窗口宽度为 100,高度为 100。这里设置的窗口还是一个正方形,使得从视口到窗口变换时,长和宽的变化比例是相同的。实际可以任意指定窗口的逻辑坐标范围,长和宽的变化比例不相同也是可以的。

2、视口和窗口的使用实例

       使用窗口坐标的优点是,只需按照窗口坐标定义来绘图,而不用管实际的物理坐标范围的大小。例如在一个固定边长为 100 的正方形窗口内绘图,当实际绘图设备大小变化时,绘制的图形会自动变化大小。这样,就可以将绘图功能与绘图设备隔离开来,使得绘图功能适用于不同大小、不同类型的设备。

实例如下:


//窗口、视口
void sample8_123QPainter::MyWinView()
{
	QPainter painter(this);//创建QPainter对象

	int W = width(); //绘图区宽度
	int H = height();//绘图区高度

	int side = qMin(W, H);//取绘图区最小值
	QRect rect((W - side) / 2, (H - side) / 2, side, side);
	painter.drawRect(rect);//Viewport大小

	painter.setViewport(rect);//设置Viewport
	painter.setWindow(-100, -100, 200, 200);//设置窗口大小,逻辑坐标
	painter.setRenderHint(QPainter::Antialiasing);

	//设置画笔
	QPen    pen;
	pen.setWidth(1); //线宽
	pen.setColor(Qt::red); //划线颜色
	//线型:Qt::NoPen,Qt::SolidLine, Qt::DashLine, Qt::DotLine,Qt::DashDotLine,Qt::DashDotDotLine,Qt::CustomDashLine
	pen.setStyle(Qt::SolidLine);//线的类型,实线、虚线等
	//线端点样式:Qt::FlatCap, Qt::SquareCap,Qt::RoundCap
	pen.setCapStyle(Qt::FlatCap);//线端点样式
	//线的连接点样式:Qt::MiterJoin,Qt::BevelJoin,Qt::RoundJoin,Qt::SvgMiterJoin
	pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
	painter.setPen(pen);

	设置画刷
	//QBrush  brush;
	//brush.setColor(Qt::yellow); //画刷颜色
	//brush.setStyle(Qt::SolidPattern); //画刷填充样式
	//painter.setBrush(brush);

	//线性渐变
	QLinearGradient  linearGrad(0, 0, 100, 0);//从左到右,
	linearGrad.setColorAt(0, Qt::yellow);//起点颜色
	linearGrad.setColorAt(1, Qt::green);//终点颜色
	linearGrad.setSpread(QGradient::PadSpread);//展布模式
	painter.setBrush(linearGrad);

	径向渐变
	//QRadialGradient  radialGrad(50,0,50,50,0);
	radialGrad.setColorAt(0,Qt::white);
	//radialGrad.setColorAt(0,Qt::yellow);
	//radialGrad.setColorAt(1,Qt::blue);
	//radialGrad.setSpread(QGradient::ReflectSpread); //QGradient::PadSpread ,QGradient::RepeatSpread, QGradient::ReflectSpread
	//painter.setBrush(radialGrad);

	圆锥型渐变
	//QConicalGradient  coniGrad(W/2,H/2,45);
	//coniGrad.setColorAt(0,Qt::white);
	//coniGrad.setColorAt(0.5,Qt::blue);
	//coniGrad.setColorAt(1,Qt::red);
	//coniGrad.setSpread(QGradient::PadSpread);//QGradient::PadSpread ,QGradient::RepeatSpread, QGradient::ReflectSpread
	//painter.setBrush(coniGrad);

	//设置复合模式
	//painter.setCompositionMode(QPainter::RasterOp_NotSourceXorDestination);
	painter.setCompositionMode(QPainter::CompositionMode_Difference);
	//painter.setCompositionMode(QPainter::CompositionMode_Exclusion);

	// ,CompositionMode_Xor,RasterOp_NotSourceXorDestination
	//CompositionMode_Difference,CompositionMode_Exclusion,CompositionMode_ColorBurn,CompositionMode_Multiply
	//painter.save();RasterOp_SourceOrNotDestination
	for (int i = 0; i < 36; i++)
	{
		painter.drawEllipse(QPoint(50, 0), 50, 50);
		painter.rotate(10);
	}
}

       运行实例程序 ,可以得到如下图所示的图形效果。当窗口的宽度大于高度时,以高度作为正方形的边长;当高度大于宽度时,以宽度作为正方形边长,且图形是自动缩放的。

       程序首先定义了一个正方形视口,正方形以绘图设备的长、宽中较小者为边长。然后定义窗口,定义的窗口是原点在中心,边长为 200 的正方形。上图的图形效果实际上是画了36 个圆得到的,循环部分的代码如下:

    for(int i = 0; i < 36; i++)
    {
        painter.drawEllipse(QPoint(50, 0), 50, 50);
        painter.rotate(10);
    }

       每个圆的圆心在X轴上的(50,0),半径为 50。画完一个圆之后坐标系旋转 10°,再画相同的圆,这就巧妙应用了坐标轴的旋转。

        在上面的程序中,对单个圆使用了线性渐变、径向渐变、圆锥渐变填充,单个圆从左到右,逐次渐变。使用 QPainter:setCompositionMode()函数设置组合模式,即后面绘制的图与前面绘制的图的叠加模式。函数参数是一个QPainter:CompositionMode 枚举类型值,可以查看 Qt 帮助,这个枚举类型有近 40 种取值,表示了后绘制图形与前面图形的不同叠加运算方式。

       采用不同的叠加模式,可以得到不同的绘图效果,甚至是意想不到的绚丽效果。用户可以自己修改程序,设置不同渐变颜色、渐变填充模式、不同叠加模式,也许能绘制出更炫的图形呢。


http://www.kler.cn/a/381147.html

相关文章:

  • 前端下载文件的几种方式使用Blob下载文件
  • esp8266_TFTST7735语音识别UI界面虚拟小助手
  • UE5 猎户座漂浮小岛 12 技能 瞬移 重力控制
  • MacroSan 2500_24A配置
  • 法学硕士,有哪些专业可以申请呢?
  • JVM系列(十二) -常用调优命令汇总
  • 使用RestTemplate发送post请求,入参是多层嵌套的JSON
  • C++优选算法五 位运算
  • SEO
  • UE5相机系统初探(一)
  • 网关(Gateway)和DNS(Domain Name System)
  • 无人机声学侦测算法详解!
  • 构建基于 DCGM-Exporter, Node exporter,PROMETHEUS 和 GRAFANA 构建算力监控系统
  • 【新闻文本分类识别】Python+CNN卷积神经网络算法+深度学习+人工智能+机器学习+文本处理
  • 软考背诵笔记
  • 【植物识别】Python+深度学习+人工智能+CNN卷积神经网络+算法模型训练+TensorFlow
  • WPF+MVVM案例实战与特效(二十五)- 3D粒子波浪效果实现
  • 吉利极氪汽车嵌入式面试题及参考答案
  • 程序员开发速查表
  • uniapp有关MD5文件上传的方法
  • Vue3里抽离公共模块进行封装然后通过Vue进行调取
  • 字节面试Java基础部分——HashMap
  • QT 如何使QLabel的文字垂直显示
  • 弹性裸金属服务器和传统裸金属服务器有什么区别?
  • 自制inscode项目推荐:色块小游戏
  • 截图工具 for Linux --- 你用过吗?