一、前言                               

IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜、JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!!

CSS3 Filter兼容性表

SVG effect for HTML兼容性表

 下文将探讨以下滤镜!

Speia滤镜     灰度图滤镜     高斯模糊滤镜     反色滤镜     饱和度滤镜

对比度滤镜    亮度滤镜        色相旋转滤镜      阴影滤镜

先P张原图作参考系(清纯MM哦!!)

二、Speia滤镜(Speia)                      

Speia滤镜是对图片或元素整体进行棕褐色处理,就是老照片那种效果。下面直接看疗效!

看,岁月的痕迹啊,是不是有妈妈年代的感觉呢?!

   1. CSS3滤镜实现

  1. <style type="text/css">
  2. .sepia{
  3. /** 格式,filer: sepia(效果范围)
  4. * 效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
  5. */
  6. -webkit-filter: sepia(100%);
  7. -moz-filter:sepia(100%);
  8. -o-filter: sepia(100%);
  9. -ms-filter: sepia(100%);
  10. filter: sepia(100%);
  11. }
  12. </style>
  13. <div class="sepia" style="background:url(./mm.jpg)"></div>

   2. IE5.5~9特的处理方式(待研究)

尝试过IE滤镜 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色) ,仅仅能使用gif图片(其他格式的图片将导致整个元素消失不见),而且遮罩层与图片重合的部分将变为空白一片,另外在IE11浏览器文档模式为5.5~9下滤镜均失效(元素按照没有设置滤镜的方式被渲染显示)。结论:IE滤镜无法处理Sepia效果。

而通过js填坑方面,想法1:在元素表面附加一层半透明棕褐色的遮罩层,但效果与CSS3 Filter相距甚远,失败告终。。。。。。。

   3. FF和IE10+的处理方式

可使用Canvas作处理,下面是简单实现的代码,目标元素 <img id="sepia" src="./mm.jpg"/>

  1. // 定义处理方法
  2. var sepia = function(el){
  3. var canvas = document.createElement('canvas');
  4. var w = canvas.width = el.offsetWidth,
  5. h = canvas.height = el.offsetHeight;
  6. var ctx = canvas.getContext('2d');
  7. ctx.drawImage(el, 0, 0);
  8.  
  9. // 对像素作处理
  10. var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  11. for (int i = 0, len = d.length; i < len; i+=4){
  12. var r = d[i],
  13. g = d[i+1],
  14. b = d[i+2];
  15. d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189);
  16. d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168);
  17. d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131);
  18. }
  19. ctx.putImageData(imgData, 0, 0);
  20.  
  21. // 导出
  22. var img = new Image();
  23. img.src = ctx.toDataURL("image/*");
  24. return img;
  25. };
  26.  
  27. // 调用
  28. var img = sepia(document.getElementById('sepia'));
  29. document.body.appendChild(img);

三、灰度图滤镜(Grayscale)                    

灰度图艺术范!

  1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .grayscale{
  3. /** 格式,filer: grayscale(效果范围)
  4. * 效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
  5. */
  6. -webkit-filter: grayscale(100%);
  7. -o-filter: grayscale(100%);
  8. -moz-filter: grayscale(100%);
  9. -ms-filter: grayscale(100%);
  10. filter: grayscale(100%);
  11. }
  12. </style>
  13. <div class="grayscale" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现

使用IE滤镜: filter:gray;

  3. FF和IE10+的处理方式

      使用SVG effect for HTML的方式:

    grayscale.svg:

  1. <svg xmlns="http://www.w3.org/2000/svg">
  2. <filter id="grayscale">
  3. <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  4. </filter>
  5. </svg>

        index.html:

  1. <style type="text/css">
  2. .grayscale{
  3. filter:url(./grayscale.svg#grayscale);
  4. }
  5. </style>
  6. <div class="grayscale" style="background:url(./mm.jpg)"></div>

可使用Canvas作处理,下面是简单实现的代码,目标元素 <img id="grayscale" src="./mm.jpg"/>

  1. var grayscale = function(el){
  2. var canvas = document.createElement('canvas');
  3. var w = canvas.width = el.offsetWidth,
  4. h = canvas.height = el.offsetHeight;
  5. var ctx = canvas.getContext('2d');
  6. ctx.drawImage(el, 0, 0);
  7.  
  8. // 对像素作处理
  9. var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  10. for (int i = 0, len = d.length; i < len; i+=4){
  11. var r = d[i],
  12. g = d[i+1],
  13. b = d[i+2];
  14. d[i] = d[i+1] = d[i+2] = (r+g+b)/3;
  15. }
  16. ctx.putImageData(imgData, 0, 0);
  17.  
  18. // 导出
  19. var img = new Image();
  20. img.src = ctx.toDataURL("image/*");
  21. return img;
  22. };
  23.  
  24. // 调用
  25. var img = grayscale(document.getElementById('grayscale'));
  26. document.body.appendChild(img);

四、高斯模糊滤镜(Blur)                      

高斯模糊让我想起忘了戴眼镜上街的情景*~*!

  1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .blur{
  3. /** 格式,filer: blur(模糊半径)
  4. * 模糊半径,取值范围0~Npx,0为无效果
  5. */
  6. -webkit-filter: blur(1px);
  7. -moz-filter: blur(1px);
  8. -o-filter: blur(1px);
  9. -ms-filter: blur(1px);
  10. filter: blur(1px);
  11. }
  12. </style>
  13. <div class="blur" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现

       使用IE滤镜:  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  ,该方式在IE11中文档模式为5.5~9均起作用。

 3. FF和IE10+的实现

   使用SVG effect for HTML的方式:

         blur.svg:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3. <svg version="1.1"
  4. xmlns="http://www.w3.org/2000/svg"
  5. xmlns:xlink="http://www.w3.org/1999/xlink"
  6. xmlns:ev="http://www.w3.org/2001/xml-events"
  7. baseProfile="full">
  8. <defs>
  9. <filter id="blur">
  10. <feGaussianBlur stdDeviation="10" />
  11. </filter>
  12. </defs>
    <image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/>
  13. </svg>

            index.html(FF下):

  1. <style type="text/css">
  2. .blur{
  3. filter: url(blur.svg#blur);
  4. }
  5. </style>
  6. <div class="blur" style="background:url(./mm.jpg)"></div>

  index.html(IE10+下,IE10+不支持直接在样式表对元素应用SVG滤镜):

  1. <style type="text/css">
  2. .blur{
  3. background-iamge: url(blur.svg);
  4. }
  5. </style>
  6. <div class="blur"></div>

使用Canvas作处理,高斯模糊的算法请参考:阮老师的“高斯模糊的算法”参考译文,处理库StackBlur.js

处理库API: stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );

  • sourceImageID表示要模糊的图片的id, 默认这个图片要隐藏;

  • targetCanvasID表示要显示模糊图片的canvas元素的id;

  • radius表示模糊的半径大小。不过,根据我的对比测试,radius好像与CSS中filter滤镜的模糊值不是1:1匹配的,反倒是有些类似2:1. 也就是这里的20px的半径模糊近似于CSS中blur滤镜值设置为10px;

  • blurAlphaChannel为布尔属性,表示aplha透明通道是否要模糊,true表示要模糊。

五、反色滤镜(Inver)                        

经历过胶圈年代的同学都熟悉哦!

  1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .invert{
  3. /** 格式,filer: invert(效果范围)
  4. * 效果范围,取值范围0~1或0~100%,0为无效果,1或100%表示最大效果
  5. */
  6. -webkit-filter: invert(1);
  7. -moz-filter: invert(1);
  8. -o-filter: invert(1);
  9. -ms-filter: invert(1);
  10. filter: invert(1);
  11. }
  12. </style>
  13. <div class="invert" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现(待研究)

 3. FF和IE10+的实现

可使用Canvas作处理,下面是简单实现的代码,目标元素 <img id="invert" src="./mm.jpg"/>

  1. var invert = function(el){
  2. var canvas = document.createElement('canvas');
  3. var w = canvas.width = el.offsetWidth,
  4. h = canvas.height = el.offsetHeight;
  5. var ctx = canvas.getContext('2d');
  6. ctx.drawImage(el, 0, 0);
  7.  
  8. // 对像素作处理
  9. var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  10. for (int i = 0, len = d.length; i < len; i+=4){
  11. var r = d[i],
  12. g = d[i+1],
  13. b = d[i+2];
  14. d[i] = 255 - r;
  15. d[i+1] = 255 - g;
  16. d[i+2] = 255 - b;
  17. }
  18. ctx.putImageData(imgData, 0, 0);
  19.  
  20. // 导出
  21. var img = new Image();
  22. img.src = ctx.toDataURL("image/*");
  23. return img;
  24. };
  25.  
  26. // 调用
  27. var img = invert(document.getElementById('invert'));
  28. document.body.appendChild(img);

六、饱和度滤镜(Saturate)                      

暖暖的赶脚~~~!

1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .saturate{
  3. /** 格式,filer: saturate(效果范围)
  4. * 效果范围,取值范围>=0的数字或百分数,1为无效果,0为灰度图
  5. */
  6. -webkit-filter: saturate(2);
  7. -moz-filter: saturate(2);
  8. -o-filter: saturate(2);
  9. -ms-filter: saturate(2);
  10. filter: saturate(2);
  11. }
  12. </style>
  13. <div class="saturate" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现(待研究)

 3. FF和IE10+的实现 (待研究)

七、对比度滤镜(Contrast)                          

  1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .contrast{
  3. /** 格式,filer: contrast(效果范围)
  4. * 效果范围,取值范围>=0的数字或百分数,1为无效果
  5. */
  6. -webkit-filter: contrast(2);
  7. -moz-filter: contrast(2);
  8. -o-filter: contrast(2);
  9. -ms-filter: contrast(2);
  10. filter: contrast(2);
  11. }
  12. </style>
  13. <div class="contrast" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现(待研究)

 3. FF和IE10+的实现 (待研究)

八、亮度滤镜(Brightness)                      

曝光过度哦!

  1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .brightness{
  3. /** 格式,filer: brightness(效果范围)
  4. * 效果范围,取值范围>=0的数字或百分数,1为无效果
  5. */
  6. -webkit-filter: brightness(2);
  7. -moz-filter: brightness(2);
  8. -o-filter: brightness(2);
  9. -ms-filter: brightness(2);
  10. filter: brightness(2);
  11. }
  12. </style>
  13. <div class="brightness" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现(待研究)

 3. FF和IE10+的实现

   可使用Canvas作处理,下面是简单实现的代码,目标元素 <img id="brightness" src="./mm.jpg"/>

  1. // 原理:让图像变得更亮或更暗,算法将红色通道、绿色通道、蓝色通道,同时加上一个正值或负值。
  2. var brightness = function(el, delta){
  3. var canvas = document.createElement('canvas');
  4. var w = canvas.width = el.offsetWidth,
  5. h = canvas.height = el.offsetHeight;
  6. var ctx = canvas.getContext('2d');
  7. ctx.drawImage(el, 0, 0);
  8.  
  9. // 对像素作处理
  10. var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;
  11. for (int i = 0, len = d.length; i < len; i+=4){
  12. var r = d[i],
  13. g = d[i+1],
  14. b = d[i+2];
  15. d[i] = r + delta;
  16. d[i+1] = g + delta;
  17. d[i+2] = b + delta;
  18. }
  19. ctx.putImageData(imgData, 0, 0);
  20.  
  21. // 导出
  22. var img = new Image();
  23. img.src = ctx.toDataURL("image/*");
  24. return img;
  25. };
  26.  
  27. // 调用
  28. var img = brightness(document.getElementById('brightness', 10));
  29. document.body.appendChild(img);

九、色相旋转滤镜(Hue Rotate)                        

诡异的赶脚~~

 1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .hue-rotate{
  3. /** 格式,filer: hue-rotate(效果范围)
  4. * 效果范围,取值范0deg~365deg,0(默认值)为无效果
  5. */
  6. -webkit-filter: hue-rotate(200deg);
  7. -moz-filter: hue-rotate(200deg);
  8. -o-filter: hue-rotate(200deg);
  9. -ms-filter: hue-rotate(200deg);
  10. filter: hue-rotate(200deg);
  11. }
  12. </style>
  13. <div class="hue-rotate" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现(待研究)

 3. FF和IE10+的实现 (待研究)

十、阴影滤镜(Drop Shadow)                      

增加立体感!

 1. CSS3滤镜的实现

  1. <style type="text/css">
  2. .drop-shadow{
  3. /** 格式,filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
  4. * x-offset和y-offset为阴影的相对于元素左上角的位移距离;
  5. * 注意:
  6. * 1. 阴影的外观受border-radius样式的影响;
  7. * 2. :after和:before等伪元素会继承阴影的效果。
  8. */
  9. -webkit-filter: drop-shadow(5px 5px 0px #333);
  10. -moz-filter: drop-shadow(5px 5px 0px #333);
  11. -o-filter: drop-shadow(5px 5px 0px #333);
  12. -ms-filter: drop-shadow(5px 5px 0px #333);
  13. filter: drop-shadow(5px 5px 0px #333);
  14.  
  15. // 圆角
  16. border: solid 10px #e00;
  17. -webkit-border-radius: 10px;
  18. }
  19. </style>
  20. <div class="drop-shadow" style="background:url(./mm.jpg)"></div>

  2. IE5.5~9的实现

在真实的IE5.5~9下可使用IE滤镜(IE10+中文档模式为5.5~9则下列的IE滤镜无效):

  1. /**
  2. * color为阴影颜色,形如"#ff00cc"
  3. * direction为角度,取值范围0,45,90,135,180,225,270,315
  4. */
  5. filter:Shadow(Color=color,Direction=direction);
  6.  
  7. /**
  8. * color为阴影颜色,形如"#ff00cc"
  9. * offx为水平偏移量
  10. * offy为垂直偏移量
  11. * positive为1或0
  12. */
  13. filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);

IE10+中文档模式为5.5~9时,则需要DIV+JS处理了。其中有一个jQuery插件:http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

 3. FF和IE10+的实现

通过CSS3新特新Box-Shadow处理, box-shadow: 投影方式(inset) X轴偏移量(x-offset) Y轴偏移量(y-offset) 阴影模糊半径(blur-radius) 阴影扩展半径(spread-radius) 阴影颜色(color) 。

投影方式(inset) ,可选属性(默认为外阴影),设置为inset时表示内阴影。

X轴偏移量(x-offset) ,正值表示阴影位于对象的右边,负值表示阴影位于对象的左边。

Y轴偏移量(y-offset) ,正值表示阴影位于对象的底部,负值表示阴影位于对象的顶部。

阴影模糊半径(blur-radius) ,可选属性(默认为0,没有模糊效果),值范围>=0。

阴影扩展半径(spread-radius) ,可选属性,正值表示阴影扩展,负值表示阴影缩小。

颜色(color) ,可选属性(默认值又浏览器决定, Webkit内核的为透明)。

注意:

    1. 投影的外观受到border-radius样式的影响;

2. :after:before等伪元素不继承投影的效果。

十一、总结                            

上述内容仅仅对CSS3滤镜和FF、IE下的替代方案作简单的介绍,如有纰漏请各位指正,谢谢!

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4127888.html  ^_^肥仔John

十二、参考                            

http://blog.csdn.net/hfahe/article/details/7104496

http://www.yyjcw.com/html/News/793.html

http://www.hackbase.com/tech/2014-11-10/69684.html

http://blog.csdn.net/lujunql/article/details/6260643

http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html

http://www.adobe.com/cn/devnet/html5/articles/css3-basics.html

http://www.educity.cn/jianzhan/630820.html

http://www.526net.com/blog/qianduan/226.html

http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/

SVG

(applying-svg-effects-to-html-content)——http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html

Canvas

http://www.webclks.com/archives/829

http://www.w3school.com.cn/tags/canvas_getimagedata.asp

http://www.webhek.com/convert-canvas-image

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
  

 
分类: CSS
 
 

CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]的更多相关文章

  1. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  2. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  3. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  4. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  5. CSS3魔法堂:说说Multi-column Layout

    前言  是否记得<读者文摘>中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊.杂志独有的多栏布局吗?  当我们希望将报刊.杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用 ...

  6. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  7. CSS3魔法堂:禁止用户改变textarea大小

    一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...

  8. css3新单位vw、vh、vmin、vmax的使用详解(转载)

    文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961

  9. Canvas使用渐变之-线性渐变详解

    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGrad ...

随机推荐

  1. .NET DLR 上的IronScheme 语言互操作&&IronScheme控制台输入中文的问题

    前言 一直以来对Lisp语言怀有很崇敬的心里,<黑客与画家>对Lisp更是推崇备至,虽然看了不少有关Lisp的介绍但都没有机会去写段程序试试,就像我对C++一样,多少有点敬畏.这个周末花了 ...

  2. HBase集群安装过程中的问题集锦

    1.HRegionServer启动不正常 在namenode上执行jps,则可看到hbase启动是否正常,进程如下: [root@master bin]# jps26341 HMaster26642 ...

  3. [AngularJS] 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

  4. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  5. Asp.net EasyUI中的combogrid实现分页功能

    在jquery.easyUI.js 要实现分页,必须在后台接收参数时声明两个变量:page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数. 这两个属性的名称在ea ...

  6. GRID方式ALV导出数据到本地丢掉最后一位的问题

    这是SAP的一个Bug,FM方式ALV Grid和Class ALV Grid都会出现,但是ALV List好像没有这个BUG.   在以下几个条件满足的时候就会出现这个问题: 1.字段对应的域Con ...

  7. Nmap源码分析(脚本引擎)

    Nmap提供了强大的脚本引擎(NSE),以支持通过Lua编程来扩展Nmap的功能.目前脚本库已经包含300多个常用的Lua脚本,辅助完成Nmap的主机发现.端口扫描.服务侦测.操作系统侦测四个基本功能 ...

  8. sharepoint app 开发环境配置

    1. 配置脚本如下: .通过打开命令提示符并键入以下命令来确保 spadmin 和 sptimer 服务正在运行. net start spadminv4 net start sptimerv4 .作 ...

  9. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q32-Q35)

    Question 32 You are designing the modification of an existing SharePoint 2010 intranet site for a sc ...

  10. onMeasure流程解析

    0.预备知识 我们的手机屏幕的布局其实是嵌套的,最外层是一个phoneWindow,这个view和手机屏幕一样大,里面是一个frameLayout,再里面才是我们自己写的布局文件. 我们在绘制控件前必 ...