使用filter滤镜导致界面布局混乱问题

问题描述：

公司有部分产品里面有使用filter滤镜（比如将一个精灵置灰），导致场景内的布局混乱，临床表现为：精灵位置发生大幅度偏移，或放大，或变小等。这是一个非必现的问题，有时正常，有时不正常。这种问题是使用滤镜效果引起的，具体原因不明。所以只能走曲线救国的办法解决问题。

首先找到问题代码：

添加效果代码大概长这样：

local spr= D.img("xxx/xxx.png",{ class = CCFilteredSpriteWithOne }):to(parent):p(x, y)
-- 滤镜
local filters = filter.newFilter("GRAY", {})
spr:setFilter(filters)

或

local spr= U.loadSpriteFilter({
    imgName = xxx/xxx.png,
    filters = "GRAY",
}):to(parent):p(x, y)

恢复正常显示的代码：

local filters = filter.newFilter("BRIGHTNESS", {})
spr:setFilter(filters)

目前使用的解决方法是用 CCGraySprite 来代替用filter实现的精灵置灰效果（目前只发现使用灰色效果），原理是获取精灵的纹理然后创建一个和精灵一模一样的灰色精灵覆盖在上面，方法如下：

1.找到添加滤镜处的代码用下面的方法替换：

local spr= D.img("xxx/xxx.png"):to(parent):p(x, y)
-- 创建灰色精灵覆盖在 spr 上面
local gray = CCGraySprite:createWithTexture(spr:getTexture(), spr:getTextureRect())
gray = CCNodeExtend.extend(gray)
--添加到精灵spr同一位置就行了
gray:to(parent):p(x, y)  
-- 可以把灰色精灵绑定为spr的一个属性方便移除对应精灵的灰色效果
spr.gray = gray

2.恢复显示的代码替换为以下方法即可：
spr.gray:remove()

• author ：lan

• date ：2016-06-14
  更多