Qt使用九宫格原理缩放图片

草上爬

已于 2022-07-21 12:05:04 修改

阅读量1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Qt工作笔记文章标签： Qt 九宫格图片

于 2016-11-29 12:20:18 首次发布

本文链接：https://blog.youkuaiyun.com/caoshangpa/article/details/53391230

Qt工作笔记专栏收录该内容

193 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了使用Qt实现九宫格图片缩放的方法，包括通过QSS的border-image属性和自绘两种方式。在QSS中，详细解释了border-image的参数设置，以避免图片在缩放时失真。自绘部分则讲解了如何将图片分割为9个部分，并在目标Widget区域内拉伸或平铺绘图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2020.07.21更新

一.QSS

关于九宫格，首先要学习下QSS的border-image，Qt Assistant中关于Border Image有如下介绍：
A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.
See the CSS3 Draft Specification for details.
Border Image是由九个部分（左上、中上、右上、左中、中、右中、左下、左下、中下和右下）组成的图像。当Border Image应用到指定目标时，四个角的部分原样使用，并拉伸或平铺顶部、右侧、底部和左侧部分，以生成符合目标尺寸的边框。
具体参考CSS3语法
也就是说border-image在贴图时可以指定参数，将图片分成九个部分，分别贴到目标的相应位置，即通常说的九宫格贴图。
9宫格缩放规则如下：
1、将一张图分割成9块
2、四个角(1、3、7、9)在缩放的时候是保持大小不变
3、图块2、8