如何让CCLayer创造的地图,左右滑动不出现黑边

在都是scale为1的情况下,效果图如下:

绿色的是Screen,它的大小和坐标不变,可以理解为CCScene,下面两个就是用CCLayer的地图,有2个Layer,深颜色的就是和Scrren一样大小的Layer,浅颜色的是一张大地图,或者一张大图片,也可以是一个Layer,里面有个CCTMXTiledMap,都可以,它们的特点是尺寸大于Screen,坐标在Layer中是0,0,所以无论深颜色Layer怎么变化,它们的坐标始终都是0,只是大小可能会改变。代码为:

 CCScene *scene=[CCScene node];

    CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];
    [scene addChild:layercolor2 z:MaxZorder-1];
    layercolor2.position=ccp(500,500);

    CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor5 z:MaxZorder-1];
    layercolor5.position=ccp(500,400);
    //layercolor5.scaleX=0.75;

    CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor5 addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);
    // layercolor4.scaleX=0.75;

   // layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);

    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor z:MaxZorder-1];
    layercolor.position=ccp(200,300);
     //layercolor.scaleX=0.75;

    layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);

    [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

现在如果地图支持缩放,比如深颜色Layer比例变为0.75了,那么会如何变化呢,如图所示的变化:

代码如下:

CCScene *scene=[CCScene node];

    CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];
    [scene addChild:layercolor2 z:MaxZorder-1];
    layercolor2.position=ccp(500,500);

    CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor5 z:MaxZorder-1];
    layercolor5.position=ccp(500,400);
     layercolor5.scaleX=0.75;

    CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor5 addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);

   // layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);

    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor z:MaxZorder-1];
    layercolor.position=ccp(200,300);
     layercolor.scaleX=0.75;

    layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);

    [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

,为啥会这样呢,因为Layer是比较特殊的,她是以左下角为坐标,但是锚点确实在中间,所以缩小的时候是从2头缩小,而坐标保持不变,所以我们看到虽然坐标不变,但是已经偏移了。那么现在我们就讨论,如何在缩放之后,大地图仍然保持原来的位置不变,这样就能保证左右两边不出现黑边。先看左边的,第二个图就是左边的

这里调整下layercolor5的坐标,代码如下

layercolor5.position=ccp(500+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);因为缩小之后,左边缩放的大小为
layercolor5.contentSize.width/2*(layercolor5.scaleX-1),所以为了回到以前的位置,x坐标减少相应大小即可。

下面再调整右边的。也就是调整layercolor的坐标,加上这一行

layercolor.position=ccp(layercolor.position.x+(1-layercolor.scaleX)*500-(layercolor.contentSize.width/2)*0.25,layercolor.position.y);

为什么会这样做

layercolor.position.x+(1-layercolor.scaleX)*500,首先layercolor.position.x是未缩放前的坐标,(1-layercolor.scaleX)*500是大地图缩小后减少的部分。

两者相加,layercolor向右移动这些,但是还没完,因为Layer缩小的时候,其实是向两边缩,所以大地图为了保持不变,也相当于向右移动了一些,也就是(layercolor.contentSize.width/2)*0.25,就是说相对坐标不变,但是世界坐标变了,向右移动了,所以要减去向右移动的这块,才是最重layercolor应该移动的距离。

如果感觉这个不好理解,还有一种思路,就是说想让layercolor缩放后,仍然对齐右边,我们不考虑layercolor在缩放后移动多少才能对齐,我们直接算在layercolor缩放后,坐标应该不变,但是图像会向左边缩,也就是x增大,我们先让layercolor变得和layercolor5一样,移动到和左边对齐,也就是使

layercolor.position=   layercolor5.position,此时就是做对齐了,然后要想让右边对齐,现在看图得知,需要移动的距离为

(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width),大地图缩放后的长度-screen的长度,就是差值

所以综上layercolor.position=ccp(layercolor5.position.x-(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width),300)

全部的代码为

CCScene *scene=[CCScene node];

    CCLayerColor *layercolor2=[[[CCLayerColor alloc]initWithColor:ccc4(110, 200, 50, 255) width:200 height:100]autorelease];
    [scene addChild:layercolor2 z:MaxZorder-1];
    layercolor2.position=ccp(500,500);

    CCLayerColor *layercolor5=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor5 z:MaxZorder-1];
    layercolor5.position=ccp(500,400);
     layercolor5.scaleX=0.75;

    CCLayerColor *layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor5 addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);

    layercolor5.position=ccp(layercolor5.position.x+layercolor5.contentSize.width/2*(layercolor5.scaleX-1),400);

    CCLayerColor * layercolor=[[[CCLayerColor alloc]initWithColor:ccc4(10, 20, 150, 150) width:200 height:100]autorelease];
    [scene addChild:layercolor z:MaxZorder-1];
    layercolor.position=ccp(500-(500-200),300);
     layercolor.scaleX=0.75;

    layercolor4=[[[CCLayerColor alloc]initWithColor:ccc4(110, 20, 150, 150) width:500 height:100]autorelease];
    [layercolor addChild:layercolor4 z:MaxZorder-1];
    layercolor4.position=ccp(0,0);

    //***********************************第一种方法******************************/
    //layercolor.position=ccp(layercolor.position.x+(1-layercolor.scaleX)*500-(layercolor.contentSize.width/2)*0.25,layercolor.position.y);

    //***********************************第二种方法******************************/

    int px=layercolor5.position.x-(layercolor4.contentSize.width*layercolor.scaleX-layercolor.contentSize.width);

   layercolor.position=ccp(px,300);

    [[CCDirector sharedDirector] runWithScene:[CCTransitionFade transitionWithDuration:0.5 scene:scene withColor:ccBLACK]];

效果为:

时间: 2024-11-04 13:33:00

如何让CCLayer创造的地图,左右滑动不出现黑边的相关文章

ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变

描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = null; 默认情况下,缩放等级滑动器是垂直方向的.可以通过设置滑动器的高度属性为null来使滑动器改为水平方向. esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"20

解决ListView滑动时出现黑边的问题

[声明]转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --尊重作者,知识无价,交流无限! 两种方法 1.代码去边缘线 myList.setFadingEdgeLength(0);// 删除黑边(上下) 2.清单文件修改 android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" <application android:allowBackup=&quo

3.0+百度地图,如何获取地图中心点位置(每次滑动地图后都能够获取地图的中心点位置,并做出相应的操作)

现在有这样一个业务: 1.将地图定位到指定的经纬度位置,当地图停止滑动时搜索附近的地址信息列表,并显示再ListView中. 2.每次滑动地图都需要根据地图中心点位置搜索附近1000米范围内的地址,并显示再列表,直至退出. 下面是具体实现的代码: 一:实例化PoiSearch并设置获取结果的监听器setOnGetPoiSearchResultListener // 创建POI检索实例 poiSearch = PoiSearch.newInstance(); // 设置监听器 poiSearch.

一行代码,让你的应用中UIScrollView的滑动与侧滑返回并存

一行代码,让你的应用中UIScrollView的滑动与侧滑返回并存 侧滑返回是iOS系统的一个很贴心的功能,特别是在大屏手机上,单手操作的时候去按左上角的返回键特别不方便.当我在使用一个APP的时候,如果控制器不能侧滑返回,我会觉得这个APP十分不友好...这款产品在我心中的印象分也会有所降低...侧滑返回本身是系统自带的效果,无须开发者处理的.但是,一旦给控制器加了leftBarButtonItem,系统侧滑手势居然失效了(苹果你这样真的好吗...),要重新支持侧滑返回,可以做以下处理: 一.

ios百度地图的使用

在这里就不在介绍百度的具体配置,配置详见http://developer.baidu.com/map/index.php?title=iossdk 1.首先接受基本的地图功能 新建一个地图类,xib拖也行,我这边是代码实现的.  _mapView = [[BMKMapView alloc]initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, self.view.frame.size.height)];  [self.view addS

Google Map Api 谷歌地图接口整理

一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. 2.API 密钥只对网站目录或者域有效.对不同域的网页,需要用这些域分别注册不同的密钥 2.页面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcde

ArcGIS api for javascript——创建地图

描述 这个示例显示ArcGIS Server的一个地图.ArcGIS Server地图是缓存的,意味着它有服务器管理员建来提升性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMapServiceLayer表示. 如果地图服务没有一个可用的缓存,使用ArcGISDynamicMapServiceLayer.如果不知道地图服务是否有缓存可用,使用 Services Directory寻找. 注意切片地图服务图层的构造函数包含服务的URL(http://server.arcgiso

Android实践之ScrollView中滑动冲突处理

转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy搞定.可是一旦涉及到复杂的页面,特别是为了兼容小屏手机而使用了ScrollView以后,就会出现非常多点击事件的冲突.最经典的就是ScrollView中嵌套了ListView. 我想大部分刚開始接触Android的同学们都踩到过这个坑,这一篇文章就从近期做的一个项目讲起.然后在过程中提供一些解决冲突

遨游maxthon打开页面一片黑,百度地图等黑色解决办法

遨游maxthon使用webkit极速核心,打开百度地图等页面一片黑. 找了好久,不知道什么问题. 版本一样,都是4.4.xxx版本.另外一台机器又正常. 后来上傲游社区,好多人也有这个问题: 打开网页是黑的没有任何内容: 极速模式下有时突然出现整个页面全部变黑,之后所有页面刷新或打开都会变黑,只能重启浏览器 浏览器在访问网页时页面是黑色(百度地图) 访问某些网页是全黑 我的解决办法,关闭GPU 硬件加速 .遨游设置->高级->开启 GPU 硬件加速 ,前面的勾去掉.