用过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 thenparent._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 = 960magnifierNode.height= 640    layer:magnifier("panda/panda_1.png",layer,ccp(480,320),magnifierNode)                                                       

  以上是用ClippingNode实现放大镜效果的代码!

 

结语

  • 实现了放大镜功能,学会了ClippingNode使用

本站文章为 宝宝巴士 SD.Team 原创,转载务必在明显处注明:(作者官方网站: 宝宝巴士 )

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4495550.html

转载于:https://www.cnblogs.com/superdo/p/4495550.html

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

  1. Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)

    Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1) 本文转载至深入理解Cocos2d-x 3.x:一步一步通过ClippingNode实现一个功能完善的跑马灯公 ...

  2. Cocos2d-x v3.0物理系统 利用PhysicsEditor创建多边形

    Cocos2d-x 3.0的新物理系统我就不必多说了,接触一段时间,感觉还是不错的.对于那些基本概念,网上的教程已经泛滥了,就不多说了,不过对于创建多边形物体的教程,还真不多,很多都是创建圆形和矩形, ...

  3. (原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(5): 返回指定表格中的所有键(key):table.keys...

    这里的函数主要用来做:返回指定表格中所有的键.参考资料为quick_cocos. 星月倾心贡献~~~ --[[ -- 返回指定表格中的所有键(key) -- example:local t = ( a ...

  4. (原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(8): 生成只读table

    这个函数的作用是:生成只读table. --[[ -- 生成只读table -- @param table t 需要不允许修改的tableexample:local tb = {"星期一&q ...

  5. 最新cocos2d-x 3.0博客教学 小游戏[史上最坑爹的游戏] 001主画面以及关卡选择画面的制作

    cocs2d的开发环境我相信大家都能搭建好了,下面我们直接的进入正题,开始做我们的小游戏,如果对搭建环境还有不懂的童鞋请看我写的这篇博文 cocos2d-x 3.0游戏开发xcode5帅印博客教学 0 ...

  6. Cocos2dx Lua开发环境搭建

    本文记录在 Windows 下搭建 cocos2dx lua 开发环境,还有调试设置. 系统:Windows 7 64 IDE:Mircrosoft Visual Studio 2013 Cocos2 ...

  7. cocos2d-x lua 学习笔记(1) -- 环境结构

    Cocos2d-x 3.0超过环境的版本号来建立和前Cocos2d-x 2.0 差异较大的版本,从同时Cocos2d-x 3.0项目打包成apkAndroid的应用程序文件,步骤,构建环境有些乏味安德 ...

  8. cocos2d-x lua 学习笔记(1) -- 环境搭建

    Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...

  9. Cocos2d-x Lua中实例:帧动画使用

    Cocos2d-x Lua中实例:帧动画使用 下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画. ...

最新文章

  1. 通信工程和计算机科学会议,计算机科学论坛--2019年IEEE第二届国际计算机与通信工程技术会议(CCET 2019)...
  2. Android 打印log 在logcat 看不到
  3. 作为本科大学生比较适合的水准比较好的,嵌入式软件系统的会议
  4. 解决Can't connect to MySQL server on 'localhost' (10048)
  5. 微信红包的支撑架构原理是什么?
  6. redis基本数据类型之String
  7. jQuery两把利器
  8. 无代码绘制基因表达箱线图
  9. 在ASP.NET Web Application 中如何处理图片 【转】-有用
  10. markdown入门4--矩阵空格公式方程组
  11. CISCO 路由器(1)
  12. flash计算机代码怎么写,应用程序操作NorFlash示例代码分享(norflash接口使用方法)...
  13. 代码文件夹带有红色感叹号_接口测试平台代码实现7:菜单的开发
  14. 数据错误循环冗余检查是什么意思_德尔西曼.交换机是一种什么设备?通过什么方式进行交换?...
  15. window.print打印pdf
  16. 盘点软件可以解决哪些固定资产盘点问题
  17. PXI-10024100KSps、24Bit数据采集模块
  18. 2021年东莞高新企业补贴政策
  19. redis集群伸缩【转】
  20. QT窗口:透明与半透明、不规则异形窗口、控件透明与半透明、不规则异形按钮

热门文章

  1. 资源地址整合与备份,即时更新
  2. Python基本语法[二],python入门到精通[四] (转)
  3. Running Trinity in multiple steps
  4. 《几何与代数导引》习题1.18——Ceva 定理
  5. 与Android数据库一起工作
  6. Vue中虚拟DOM的理解
  7. cassandra 数据库_使用Apache Cassandra构建分布式NoSQL数据库
  8. VSCode自定义代码片段9——JS中的面向对象编程
  9. 推荐 | 作为IDEA的死忠粉,这样设置,效果棒棒哒!
  10. es6 Promise.prototype.catch()方法