Duilib技巧:背景图片平铺

贴图的描述

方式有两种
    // 1、aaa.jpg
    // 2、file=‘aaa.jpg‘ res=‘‘ restype=‘0‘ dest=‘0,0,0,0‘ source=‘0,0,0,0‘ corner=‘0,0,0,0‘ 
    // mask=‘#FF0000‘ fade=‘255‘ hole=‘false‘ xtiled=‘false‘ ytiled=‘false‘

第一种是最简单的,加载图片文件并将整张图片拉伸铺满整个控件

第二种既支持从文件中加载图片,也可以从资源中加载
1、如果是从文件加载,设置file属性,如file=‘XXX.png‘,不要写res和restype属性
2、如果从资源加载,设置res和restype属性,不要设置file属性
3、dest属性的作用是指定图片绘制在控件的一部分上面(绘制目标位置)
4、source属性的作用是指定使用图片的一部分
5、corner属性是指图片安装scale9方式绘制(scale9含义往下边看)
6、mask属性是给不支持alpha通道的图片格式(如bmp)指定透明色
7、fade属性是设置图片绘制的透明度
8、hole属性是指定scale9绘制时要不要绘制中间部分(有些地方对提升性能比较有用)
9、xtiled属性设置成true就是指定图片在x轴不要拉伸而是平铺,ytiled属性设置成true就是指定图片在y轴不要拉伸而是平铺

让背景图片平铺要写:xtiled=‘true‘ ytiled=‘true‘

这个UI设计器是不识别的.

========================================================

Scale9的含义

它是使用网格将图像划分为9个区域,如图2所示,我用数字1-9标出了对应的区域,其中标红色的区域是不需要缩放的,而标蓝色的区域则是需要缩放的区域。


图2 对图片使用Scale9技术进行缩放

当这张图片被放大,依据Scale9的定义,区域1,3,7,9需要保持原有的尺寸(通过对比左侧和右侧的图像可以发现这一点),而其它区域则需要依据一定的规则改变自己的尺寸:
区域2,当图片放大,本区域宽度增加,高度保持不变 
区域4,当图片放大,本区域高度增加,宽度保持不变 
区域5,当图片放大,本区域宽度和高度都增加 
区域6,当图片放大,本区域高度增加,宽度保持不变(规则与区域4一致) 
区域8,当图片放大,本区域宽度增加,高度保持不变(规则与区域2一致)

对于区域5,我们在做外观设计的时候要重点注意,这个区域不要放置复杂图形,对于单色或简单渐变色而言,一定程度的放大是可以接受的,但如果是复杂图形,那么放大所产生的失真是非常明显的(当然如果是矢量图形,就不会有这个问题,但矢量图形对于CPU有较大的计算消耗,通常在性能敏感型的Flex应用中我们尽量使用位图皮肤)。

==================================================================

Scale9在duilib中的实例应用

以控件Combo为例,原本皮肤如图:,宽度是71,现在设置一个长200的Combo控件效果如图:

可以看到明显被拉伸了,添加corner属性代码如下:

<Combo name="ComboClientDirSelect" text="TCP" height="20" width="200" itemshowhtml="true" itemtextcolor="#FF000000" itemselectedtextcolor="#FF000000" itemselectedbkcolor="#FFC1E3FF" itemhottextcolor="#FF000000" itemhotbkcolor="#FFE9F5FF" itemdisabledtextcolor="#FFCCCCCC" itemdisabledbkcolor="#FFFFFFFF" normalimage="file=‘Combo_nor.png‘ corner=‘5,2,30,2‘" hotimage="file=‘Combo_over.png‘ corner=‘5,2,30,2‘" pushedimage="file=‘Combo_over.png‘ corner=‘5,2,30,2‘" dropboxsize="0,150">

此时效果如图:

,

显示正常了,

其中corner=‘5,2,30,2‘的含义是#字的4条线分别到左上右下的距离然后把#中间的图片进行拉伸最后达到完美效果.

时间: 2024-10-19 10:04:42

Duilib技巧:背景图片平铺的相关文章

Android: 背景图片平铺要这么干

<?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="http://schemas.android.com/apk/res/android"    android:src="@drawable/bg_header"      android:tileMode="repeat" >  </bitmap>

Android 背景图片平铺

在drawable目录下创建一个repeat_bg.xml: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"     android:src="@drawable/asdfg"     android:tileMode="repeat&q

css 背景图片平铺

css 背景图片平铺 background:url(../Images/VinnoImages/rightpanel.jpg);filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size:100% 100%;background-size:100% 100%;

Android中设定背景图片平铺。

注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很可能在不同的设备上会被拉伸,给用户的视觉体验会很差,那么如何解决这个问题呢,这里本菜鸟在此分享一下心得. 一.首先,需要在drawable-mdpi目录里定义一个xml文件,在此我命名为bitmap 编写如下代码,src中指定为你要平铺图片的名称: <?xml version="1.0&quo

Android设置背景图片平铺

以LinearLayout为例,它提供的background属性将会将背景图片拉伸,相当难看.其实我们仅仅需做少量的改动就能够实现web编程中css背景图片的效果.来试试吧. 创建反复的背景图片 在drawable文件夹下创建一个repeat_bg.xml: <? xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/a

Canvas 图片平铺设置

/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!canvas) return; var context = canvas.getContext("2d"); var type = [ "no-repeat", // 不平铺 "repeat-x", // 横向平铺 "repeat-y"

CSS背景100%平铺 浏览器缩小背景显示不全解决办法

本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大. 解决方法: width:100%;min-width:990px; 在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度. Ps: 逐风个人认为上诉的解决方案还不够人性化, 想要实现不同分辨率下灵活覆盖,逐风推荐

[ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

[ATL/WTL]_[CBitmap复制图片-截取图片-平铺图片]

场景: 1.当你需要截取图片部分区域作为某个控件的背景. 2.需要平铺图片到一个大区域让他自动放大时. 3.或者需要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateCompatibleDC(NULL); ddc.CreateCompatibleDC(NULL); CBitmap destBmp; destBmp.CreateCompatibleBitmap(CClientDC(NULL),width,height); sdc.SelectBitmap(m_Bitma