个人信息页面设计漂亮的网站,著名网站建设公司,flash 做网站教程,wordpress清理主题SVG格式图片介绍
svg格式图片又称矢量图#xff0c;该种格式的图片不同于png等格式的图片#xff0c;采用的并不是位图的形式来组织图片#xff0c;而是采用线条等组织图片#xff0c;svg格式是图片的文件格式是xml#xff0c;可以通过文件编译器打开查看svg格式内容。
… SVG格式图片介绍
svg格式图片又称矢量图该种格式的图片不同于png等格式的图片采用的并不是位图的形式来组织图片而是采用线条等组织图片svg格式是图片的文件格式是xml可以通过文件编译器打开查看svg格式内容。
svg格式的图片的特点是支持图片的放大和缩小当图片放大和缩小时清晰度不会发生变化相比于普通的png和jpg等格式的图片当图片进行放大时就会产生拉伸效果或者不清楚的情况对于svg格式的图片则存在这种情况。
svg格式的图片是xml格式的通过文本编译器打开xml文件仔细观察看下svg格式文件的内容一般情况下有圆形、矩形、线条、折线、多边形等形状上述这些形状可以自由的缩放即图形跟随显示区域的大小进行变化不会因为缩放导致图像不清晰这才是我们理解的矢量图像因为这些不是位图而是通过指定坐标和和大小的方式来指定的但是存在另外一个中情况svg格式图片也可以插入位图标签是image idxx xlink:hrefxxxxx这个含义是在svg图中插入一个图片该图片还是位图即通过这种插入到svg格式中的图片原始分辨率为100*100如果此时svg格式的图片放到一个500*500的区域中该图片并不会产生svg可伸缩的效果图片会模糊因为原始图片像素不够放到比原始图像宽的区域中进行显示的时候就会模糊为了解决这个问题原始图像的分辨率应该放大一般情况下我们通过工具将一个png格式的图片转换为svg格式时这种转换虽然是svg格式但是整个svg文件并不具备自由缩放的效果当要显示的区域超过png图片的原始分辨率时图像就会模糊。
矢量图参考链接svg基础知识 svg矢量图基础知识
但是有几点也需要注意
如果在放大和缩小时要使图片不变形最好显示控件的比例要与图片的比例保持一致否则svg图片也会产生拉伸的效果见图1svg格式的图片在放大或者缩小时首先要将svg图片渲染成对应大小的pixmap如果qpixmap的大小与要赋值的图片大小布置那么即使svg格式图片也不会填充满这个控件例如一个qpushbutton的大小是size(900,900),如果创建pixmap时设置的大小为size(30,30)然后按钮调用setIcon设置按钮图标后再次再次调用setIconSize设置图标大小为size(900,900)那么效按钮内的图标大小依然为size(30,30)。见图2 图1 图2
svg格式图片代码demo
使用svg格式图片作为QPushButton的图标
//首先要进行声明一个QSvgRenderer变量QSvgRenderer render;
//加载svg格式图片render.load (QString(/home/consys/svgtest/image/xjdh.svg));//获取svg格式图片的默认大小QSize size render.defaultSize ();qDebug()default size : size;//声明一个图标指定该图片的大小这里有是有必要的该size要与pushbutton的大小一致否则//作为pushbutton的图标只有pximap的大小QPixmap *pix new QPixmap(ui-pushButton-size());pix-fill (Qt::transparent); // 像素清空//渲染svg格式的图片到pixmap中QPainter painter(pix);painter.setRenderHints (QPainter::Antialiasing);render.render (painter);//设置pushbutton的图标ui-pushButton-setIcon(QIcon(*pix));//设置图标的大小该大小最好与pushbutton的大小一致如果大小不一致则会保持pixmap的比例进行//相应的缩小例如pushbutton的大小为size(900,400),pixmap的size(900,400,设置iconsize//的大小为size(200,200),图标的形状是一个长方形并不是一个正方形ui-pushButton-setIconSize(ui-pushButton-size());ui-pushButton-setFlat(false);
生成svg格式图片范例 QSvgGenerator generator; // 定义SVG的产生器generator.setFileName (QString(temp.svg)); // 设置SVG文件名generator.setDescription (Test QSvgGenerator); // 无所谓QSize size(400,400);generator.setSize (size); // 设置大小generator.setViewBox(QRect(0, 0, 400, 400)); // 视口大小QPainter painter; // 小画家painter.begin (generator);QRect rect(0,0,400,400);painter.setBrush (Qt::cyan);painter.drawEllipse (rect); // 直接在 generator 上绘制 一个圆painter.end (); // 需要保证绘制结束
上述代码运行完毕后会在可执行程序目录下生成一个temp.svg格式的图片。
svg图像按照普通方式使用 QPixmap pixmap;//加载svg格式的图片pixmap.load(:/image/xjdh.svg);//设置图标ui-pushButton-setIcon(QIcon(pixmap));//设置图标大小ui-pushButton-setIconSize(ui-pushButton-size());
按照图片方式读svg图片进行使用则相当于一张图片并没有利用svg的特性这种方式设置图标的后果是图标不具备放大的作用即svg的defaultsize有多大那么该图片最大就多大当button的大小大于svg的默认大小时图标不能填满整个pushbutton。这里说明的是如要使svg图片本身是支持无失真的缩放图片但是要生效过qt的控件中必须要依赖于QSvgRenderer类将svg格式的图片渲染到不同的大小的pixmap中这样才可以生效。
再次强调
我自己的理解是svg格式的图片支持进行放大和缩小在这个过程中图片不会发生失真但是svg图片本身并不能自适应去渲染图片需要依托于qpixmap这样的媒介假如需要渲染两个大小完全不同的按钮每个按钮都需要一个对一个的pixmap设置成对应的大小qpixmap利用QSvgRenderer类提供的接口render将svg格式的图片渲染到对应的pixmap上从结果上看是QSvgRenderer利用svg图片渲染两个不同大小的pixmap。通过这两个不同大小pixmap去渲染qpushbutton控件其它控件也类似的。
参考链接Qt自定义控件----PushButton显示svg矢量图_qpushbutton svg_香油哥的博客-CSDN博客
