[COCOS2DX-LUA]0-001.利用ClippingNode实现放大镜功能

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› LUA›LUA教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　用过Iphone的都知道，Iphone在定位光标位置的时候会把内容进行放大，这样我们就能很快的把光标移动到指定的位置。那么在我们的Cocos2dX的游戏中，怎么可以实现这种功能呢。起先我就是想起了Iphone自带的功能，但是这样的话，我们必须做个接口，然后有Iphone和Android两种实现才能完成。在Cocos2dx中，我们更希望的是能过写一套代码能够兼容两个系统，那么我们就要尽量使用Cocos2dx的代码。

　　后面跟一些朋友讨论后，得出了一个解决方法。

　　首先我们需要一个东西，能实现把你所要放大的东西按指定的形状进行显示，然后再把显示的内容进行放大。抱着这么一个理念，我们很容易想到了ClippingNode根据指定的模版对精灵进行截取。那么初步思路有了。但是，放大后我们要保证图片的位置不变，放大的区域是以放大镜的中心为锚点放大的，这就要求我们要获得每次放大镜位置改变后被放大物体的锚点，锚点改变后，相应的位置也得改变，才不会造成图像偏移。

　　好，讲了这么多，大家都应该很好奇效果。那就上两张效果图吧。

　　我们可以看到了熊猫位置的背景被放大了。

　　下面我们看看代码怎么实现

    --这个不重要，就是示例用的快速创建的层和场景
    local scene, layer = game:enterDemoScene()
    --获取自己的层
    local mainLayer = require("app.test.layer.MainLayer")
    --移除测试层，添加自己的层
    layer:remove()
    layer = mainLayer.new():p(0,0):to(scene)
    
    --放大镜效果
    --magnifier     放大镜图片
    --parent        放大镜父亲节点
    --point         放大镜的位置
    --magnifierNode 被放大的精灵
    function layer:magnifier(magnifierImage,parent,point,magnifierNode)
　　　　--放大镜的模板，也是放大区域
　　　　local magnifierRect = D.img(magnifierImage):p(point):to(parent,1)
　　　　if parent._mclip ~= nil then
　　　　　　parent._mclip:removeFromParentAndCleanup(true)
　　　　　　parent._mclip = nil
　　　　end
　　　　--创建ClippingNode，这里要将模板传进去        
　　　　parent._mclip = CCClippingNode:create(magnifierRect)
　　　　parent._mclip:setInverted(false)
　　　　parent._mclip:setAlphaThreshold(0)
　　　　parent._mclip:setZOrder(1)
　　　　parent:addChild(parent._mclip)

　　　　--添加放大镜照片，盖在放大镜区域上
　　　　parent.magnifierNode  = magnifierNode:anchor(D.BOTTOM_LEFT):p(0,0):to(layer._mclip)
　　　　parent.magnifierNode:setScale(1.2)
　　　　--真实的放大镜
　　　　local magnifier = D.img(magnifierImage):p(point):to(parent,2)
　　　　--在放大镜上绑定点击功能
　　　　magnifier:bindTouch()
　　　　function magnifier:onTouchBegan(x,y,touches)
　　　　　　return true
　　　　end
　　　　--移动的时候实时计算放大物件的锚点和位置，当然还有放大模板的位置
　　　　function magnifier:onTouchMoved(x,y,touches)
　　　　　　self:p(x,y)
　　　　　　magnifierRect:p(x,y)
　　　　　　local anchor1 = parent.magnifierNode:getAnchorPoint()
　　　　　　--把锚点定位到要放大的位置
　　　　　　parent.magnifierNode:setAnchorPoint(ccp(x/magnifierNode.width
                                              ,y/magnifierNode.height))
　　　　　　local anchor2 = parent.magnifierNode:getAnchorPoint()
　　　　　　parent.magnifierNode:p(ccp(parent.magnifierNode:px() + parent.magnifierNode:px()
                                 * (anchor2.x - anchor1.x),
                                 parent.magnifierNode:py()+ parent.magnifierNode:py()
                                 *(anchor2.y - anchor1.y) ))
　　　　end
　　　　function magnifierRect:onTouchEnded(x,y,touches)

　　　　end
　　end

　　--调用代码，要指定width和height，后面计算锚点用
　　local magnifierNode = mainLayer.new();
　　magnifierNode.width = 960
　　magnifierNode.height= 640　　
　　layer:magnifier("panda/panda_1.png",layer,ccp(480,320),magnifierNode)