经常能看到一些软件弹出局部透明的窗口，看起来很轻很薄，其实实现起来也很简单。
1.窗口全透明，用SetLayeredWindowAttributes设置alpha。
2.窗口局部透明
     如果不带子窗口，用UpdateLayeredWindow很容易就能实现。
　　如果有子控件，用UpdateLayeredWindow后子控件的绘制会出问题。有个巧妙的方法可以解决这个问题：假设A窗口是要局部透明的带有子控件的窗口，创建一个popup型的窗口B，以A为父窗口，处于A窗口z轴上面，和A保持移动同步，size同步，显示与隐藏同步。并且hook住A窗口和A窗口子控件的绘制消息。使A窗口透明度接近0，这样，A窗口作为一个正常的窗口存在，但是由于透明了几乎看不见。B窗口使用A窗口的绘制信息，做完Alpha的混合效果后，调用UpdateLayeredWindow完成B的绘制。ok，拥有子控件的窗口A也能实现部分透明了。

这里要注意一下,窗口设置WS_EX_LAYERED属性后，就只能使用SetLayeredWindowAttributes或UpdateLayeredWindow两种刷新机制，要切换到另一种，必须先去掉WS_EX_LAYERED，然后再重新设WS_EX_LAYERED。
 

/**
* 对图片中的 黑色或白色进行透明化处理
*
* @param sourcePath
*            原始图
* @param targetPath
*            目标图,为null时在原始图同级目录下生成目标图
* @param type
*            B:黑色 W:白色
* @return 结果图字节数据组
*/
public static byte[] transferAlpha(String sourcePath, String targetPath,
String type) {
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
try {
File iFile = new File(sourcePath);
if (!iFile.exists()) {
return byteArrayOutputStream.toByteArray();
}
ImageIcon imageIcon = new ImageIcon(ImageIO.read(iFile));
BufferedImage bufferedImage = new BufferedImage(imageIcon
.getIconWidth(), imageIcon.getIconHeight(),
BufferedImage.TYPE_4BYTE_ABGR);
Graphics2D g2D = (Graphics2D) bufferedImage.getGraphics();
g2D.drawImage(imageIcon.getImage(), 0, 0, imageIcon
.getImageObserver());
int alpha = 0;
int offset = 20;
boolean isBlack = type.equals("B");
for (int j1 = bufferedImage.getMinY(); j1 < bufferedImage
.getHeight(); j1++) {
for (int j2 = bufferedImage.getMinX(); j2 < bufferedImage
.getWidth(); j2++) {
int rgb = bufferedImage.getRGB(j2, j1);
int r = (rgb & 0xff0000) >> 16;
int g = (rgb & 0xff00) >> 8;
int b = rgb & 0xff;
boolean checkW = ((255 - r) < offset)
&& ((255 - g) < offset) && ((255 - b) < offset);
boolean checkB = (r < offset) && (g < offset) && (b < offset);
if (isBlack ? checkB : checkW) {
rgb = ((alpha + 1) << 24) | (rgb & 0x00ffffff);
}
bufferedImage.setRGB(j2, j1, rgb);
}
}
g2D.drawImage(bufferedImage, 0, 0, imageIcon.getImageObserver());
File targetFile = null;
if (targetPath == null) {
targetFile = new File(sourcePath);
} else {
targetFile = new File(targetPath);
if (!targetFile.exists()) {
File dir = new File(targetFile.getParent());
if (!dir.exists()) {
boolean result = dir.mkdirs();
if (!result) {
log.info("crate file failed.path:" + dir.getPath());
}
}
}
}
ImageIO.write(bufferedImage, "png", targetFile);
} catch (Exception e) {
e.printStackTrace();
}
return byteArrayOutputStream.toByteArray();
}

Unity3D研究院之处理摄像机与角色之间被挡时的局部透明效果
 雨松MOMO 【Unity杂文】 围观3540次 10条评论 编辑日期：2015-05-07 字体：大 中 小





<iframe id="cproIframe_u1121907_1" width="300" height="250" src="http://pos.baidu.com/acom?adn=4&at=134&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=zh-CN&conOP=0&cpa=1&dai=1&dis=0&layout_filter=rank%2Ctabcloud&ltr=http%3A%2F%2Fwww.xuanyusong.com%2Farchives%2Fcategory%2Funity%2Funity%25E6%259D%2582%25E6%2596%2587&ltu=http%3A%2F%2Fwww.xuanyusong.com%2Farchives%2F3466&lunum=6&n=92004029_cpr&pcs=1920x946&pis=10000x10000&ps=369x1329&psr=1920x1080&pss=1920x409&qn=ec0b02e118437a2a&rad=&rsi0=300&rsi1=250&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000FF&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=&td_id=1121907&tn=text_default_300_250&tpr=1447383429973&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1121907&ti=Unity3D%E7%A0%94%E7%A9%B6%E9%99%A2%E4%B9%8B%E5%A4%84%E7%90%86%E6%91%84%E5%83%8F%E6%9C%BA%E4%B8%8E%E8%A7%92%E8%89%B2%E4%B9%8B%E9%97%B4%E8%A2%AB%E6%8C%A1%E6%97%B6%E7%9A%84%E5%B1%80%E9%83%A8%E9%80%8F%E6%98%8E%E6%95%88%E6%9E%9C%20%7C%20%E9%9B%A8%E6%9D%BEMOMO%E7%A8%8B%E5%BA%8F%E7%A0%94%E7%A9%B6%E9%99%A2&tt=1447383429929.45.81.84" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px; font-family: inherit;"></iframe>


原文： http://qiita.com/YosukeM/items/a9d88672a8bf516f78a7

我改了一下他的shader.







1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32





Shader
"Custom/PlayerDiffuse"
{

    Properties
{

        _NotVisibleColor
("NotVisibleColor
 (RGB)",
Color)
=
(0.3,0.3,0.3,1)

        _MainTex
("Base
 (RGB)",
2D)
=
"white"
{}

    }

    SubShader
{

        Tags
{
"Queue"
=
"Geometry+500"
"RenderType"="Opaque"
}

        LOD
200

 

        Pass
{

            ZTest
Greater

            Lighting
Off

            ZWrite
Off

        
//   Color [_NotVisibleColor]

            Blend
SrcAlpha
OneMinusSrcAlpha

            SetTexture
[_MainTex]
{
ConstantColor
[_NotVisibleColor]
combine
constant *
texture
}

            

        }

 

        Pass
{

            ZTest
LEqual

            Material
{

                Diffuse
(1,1,1,1)

                Ambient
(1,1,1,1)

            }

            Lighting
Off

            SetTexture
[_MainTex]
{
combine
texture
}


        }

 

    }


    FallBack
"Diffuse"

}





如下图所示，剑圣还是很帅的吧。


本文固定链接: http://www.xuanyusong.com/archives/3466

转载请注明: 雨松MOMO 2015年05月07日 于 雨松MOMO程序研究院 发表

概述
大致思路就是自定义一个View，然后设置一个遮罩背景，再绘制一个圆圈用于透明显示下面的内容，如果想要说明文字啥的，就再绘制，空白画布，想干嘛干嘛啦。


画笔
有个重点就是画笔画出来的圆圈要透明显示下面的内容，而不是背景色，这个要借助PorterDuffXfermode来实现。
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
mPaint.setXfermode(porterDuffXfermode);
mPaint.setAntiAlias(true);

控制透明圆的位置
写个方法来改变所绘制的圆圈的位置
public void setCircleLocation(int x, int y, int radius) {
    this.mX = x;
    this.mY = y;
    this.mRadius = radius;
    invalidate();
}

完整代码
public class MyShadeView extends FrameLayout {
    private Paint mPaint;
    private int mX, mY, mRadius;

    public MyShadeView(@NonNull Context context) {
        super(context);
        init();
    }

    public MyShadeView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyShadeView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setBackgroundColor(Color.parseColor("#EF000000"));
        mX = 150;
        mY = 100;
        mRadius = 80;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
        mPaint.setXfermode(porterDuffXfermode);
        mPaint.setAntiAlias(true);
    }

    public void setCircleLocation(int x, int y, int radius) {
        this.mX = x;
        this.mY = y;
        this.mRadius = radius;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mX, mY, mRadius, mPaint);
    }
}

引用加载布局
当成一个控件view来用就行了，我这里是当作悬浮窗的布局来直接new一个实例出来的
MyShadeView mView = new MyShadeView(FloatShadeService.this);
mView.setCircleLocation(200, 300, 100);

作为悬浮窗遮罩还要考虑移动透明圆的位置和不影响遮罩下点击操作等，以后有机会再写啦。

更多玩法自己还可再发挥……