zoukankan      html  css  js  c++  java
  • 利用BlendMode.LAYER处理图形重叠

      画两个有重叠部分的图形,如果都不透明或者在上面的图形不透明的话,这样的重叠我们不会觉得有什么不妥。如:

      但是如果要设置图形有一定的透明度,重叠部分就会显得很不和谐,这并不是想要的效果,理想的效果应该是重叠部分在透明时只显示上面图形的部分(下图红色部分),而下面第二张图显然就是想要的效果

    这种效果可以用混合模式中的LAYER模式来实现,LAYER强制为显示对象创建一个透明度组,将子对象看成一个整体进行透明渲染

    //s,s1为上图的圆和长方形
    sp.addChild(s); sp.addChild(s1); sp.blendMode
    =BlendMode.LAYER; sp.alpha=0.5;

    在这里要注意一下,就是包含在显示对象中的子对象如果想要在设置透明度时当成一个整体透明化时,子对象的alpha必须设为1,不然即使为该显示对象设置LAYER混合模式出来的效果也是如第2张图那样会有重叠部分出现。

    LAYER还可以用来实现TextField里的文本透明显示,不过在flash player 9可能会出现异常,前几天正是这个异常花了我近一天的时间才查出,据说是flash player 9对于TextField的渲染有Bug。在IE上运行时会使IE异常关闭并重新加载,在firefox上运行就不会出错。TextField文本透明如下:(其实也差不多)

    //将textfield加到混合模式为LAYER的容器中,设容器的透明来调文本的透明度
    sp.addChild(textfield);
    sp.blendMode=BlendMode.LAYER;
    sp.alpha=0.5;


    下面是完整的测试代码(只限于图像重叠):

     

    import flash.display.BlendMode;
    import flash.display.Shape;
    import flash.display.Sprite;
    
    var sp:Sprite=new Sprite();
    var s:Shape=new Shape();
    var s1:Shape=new Shape();
    /*s.graphics.lineStyle(10,0);
    s.graphics.lineTo(100,100);
    s1.graphics.lineStyle(10);
    s1.graphics.moveTo(0,100);
    s1.graphics.lineTo(100,0);*/
    s.graphics.beginFill(0);
    s.graphics.drawCircle(0,0,100);
    s.graphics.endFill();
    s1.graphics.beginFill(0xff0000);
    s1.graphics.drawRect(0,0,100,200);
    s1.graphics.endFill();
    s.x=100;
    s.y=100;
    s1.x=100;
    s1.y=100;
    sp.addChild(s);
    sp.addChild(s1);
    sp.blendMode=BlendMode.LAYER;
    sp.alpha=0.5;
    
    this.addChild(sp);
    sp.x=100;
    sp.y=100;
    
    var sp2:Sprite=new Sprite();
    sp2.graphics.beginFill(0xffff00,0.5);
    sp2.graphics.drawRoundRect(0,0,20,20,10,10);
    sp2.graphics.endFill();
    //this.addChild(sp2);
    sp2.x=200;
    sp2.y=200;
    
    //this.setChildIndex(sp,1);
    

     

  • 相关阅读:
    清除富文本样式
    jquery--cookie应用
    Log4j 配置详解
    判断请求是否为ajax
    日期工具类
    Windows Server2012 KB2919355 补丁无法安装
    安装系统步骤:
    大白菜u盘启动盘制作工具取消赞助商方法详解
    视频使用教程
    检查网络是否正常的几种命令
  • 原文地址:https://www.cnblogs.com/skybdemq/p/2664670.html
Copyright © 2011-2022 走看看