`
zhanying
  • 浏览: 8754 次
社区版块
存档分类
最新评论

JavaScript强化教程 —— 在ccui.scrollView中实现多点触摸实现缩放

阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 在ccui.scrollView中实现多点触摸实现缩放

1.需求

目前很多游戏的主场景都要求能实现滚动功能和多点触摸时缩放主场景的功能。



2.设计思路

ccui.scrollView能满足除了多点触摸以外的其他功能需求,所以考虑在scrollview的基础上增加多点触摸的缩放功能。

难点:因为单点触摸的优先级高于多点触摸 所以在scrollView中,无法获取到多个触摸点信息。

解决方案:设置一个优先级高于scrollView的事件监听,判断当前是单点触摸,还是多点触摸。如果是多点触摸,则进行缩放,如果是单点,则进行移动。

代码:
var CityLayer = cc.Layer.extend({
    scroll          : null,     //滚动层
    back            : null,     //滚动层上的内容(背景图)
    touchDistance   : 0,        //触摸点之间的距离
    initScale       : 0.7,      //初始缩放
    nowScale        : 0.7,      //当前缩放比例
    oldInnerSize    : null,     //当前滚动层滚动尺寸
    ctor: function(){
        //加载UI
        var city = ccs.uiReader.widgetFromJsonFile(res.ui.city);
        this.addChild(city,1);
        //找到scrollView
        this.scroll = ccui.helper.seekWidgetByName(city, "scrollView");//层容器
        this.back = this.scroll.getChildByName("back");
        //新增监听,并使监听的优先级高于scrollView 用于判断当前是单点还是多点
        var touch = cc.EventListener.create({
                event: cc.EventListener.TOUCH_ONE_BY_ONE,
                swallowTouches: true,
                onTouchBegan : this.checkTouches.bind(this)
            });
        cc.eventManager.addListener(touch, -1);
        //多点触摸监听
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE,
            onTouchesBegan: this._onTouchBegan.bind(this),
            onTouchesMoved: this._onTouchMoved.bind(this),
            onTouchesEnded: this._onTouchEnded.bind(this),
            onTouchesCancelled: this._onTouchCancelled.bind(this)
        }, this);
    },
    checkTouches: function(touches, event){
            if(touches.getID() > 0){
                this.scroll.setTouchEnabled(false);//多点触摸下,关闭滚动层的响应
            }
            return false;
    },
    _onTouchBegan: function(touches, event){
            this.touchDistance = 0;
            return true;
        },
    _onTouchMoved: function(touches, event){
            if(touches.length >= 2){
                var point1 = touches[0].getLocation(),point2 = touches[1].getLocation();
                var _dis = cc.pDistance(point1,point2);
                if(!this.touchDistance){
                    this.touchDistance = _dis;
                }else {
                    var _scale = _dis / this.touchDistance * this.nowScale;//根据两个点的移动距离,获取缩放尺寸
                    this.touchDistance = _dis;
                    this.changeScrollContainerSize(_scale);
                }
            }
            return true;
        },
        _onTouchEnded: function(touches, event){
            this.scroll.setTouchEnabled(true);//缩放结束,恢复滚动层的touch事件
            return true;
        },
        _onTouchCancelled: function(touches, event){
            this.scroll.setTouchEnabled(true);//缩放结束,恢复滚动层的touch事件
            return true;
        },
        changeScrollContainerSize: function(scale){
            if(scale<0.5 || scale>1.0) return; //设置最大和最小缩放比例
            var size = this.oldInnerSize;
            this.back.setPosition(cc.p(size.width*scale/2,size.height*scale/2));//重新计算背景的位置
            this.back.setScale(scale);
            var scroll = this.scroll;
            var inner = scroll.getInnerContainer();
            var pos = inner.getPosition();
            var newPos = cc.p(pos.x*scale/this.nowScale + (scale - this.nowScale)*pos.x,pos.y*scale/this.nowScale + (scale - this.nowScale)*pos.y);
            var newInner = cc.size(size.width*scale,size.height*scale);
            scroll.setInnerContainerSize(newInner);//重新设置滚动区域
            //防止越界
            var contentSize = scroll.getLayoutSize();
            if (newPos.y <= 0)
                newPos.y = Math.max(newPos.y, contentSize.height - newInner.height);
            if (newPos.x <= 0)
                newPos.x = Math.max(newPos.x, contentSize.width - newInner.width);
            inner.setPosition(newPos);//重新设置内容层位置
            this.nowScale = scale;
        }
});
分享到:
评论

相关推荐

    cocos2dx scrollview优化

    在Cocos2d-x游戏开发框架中,ScrollView是用于实现滚动视图的组件,它能够帮助开发者处理大量的可滚动内容,比如长列表或者图像画廊。ScrollView优化是提高游戏性能和用户体验的关键环节,尤其是在资源密集型的应用...

    TouchSprite.lua

    在ccui.scrollview中使用的组件,解决使用ccui.button会导致的移动事件被吞,scrollview无法正常移动的问题。

    cocos2d实现可控的日志更新滚动界面实例代码

    在这个实例中,我们可能会用到`ccui.TextField`来展示日志文本,以及`ccui.ScrollView`来实现滚动效果。 1. **创建日志文本框**:`ccui.TextField`是用于显示单行或多行文本的组件,我们可以设置它的最大字符数、...

    2dx3.0不规则按钮

    在2D游戏开发中,有时候我们可能需要创建不规则形状的按钮,以实现更独特的界面设计或交互体验。"2dx3.0不规则按钮"就是这样一个概念,它允许开发者在Cocos2d-x 3.0框架下创建非矩形形状的按钮,提升游戏或者应用的...

    Cocos2d-JS中使用Cocos Studio资源03:设置界面

    在Cocos2d-JS中,可以利用`ccui.Text`的`string`属性或`ccui.LabelAtlas`的`charMapFile`等属性进行动态更新。 7. **自定义逻辑**: 虽然Cocos Studio可以实现基本的交互逻辑,但复杂的业务逻辑仍需在Cocos2d-JS...

    cocos引擎常用表单组件含下拉框的代码实例.zip

    在 Cocos 中,可以通过 `ccui.ScrollView` 和 `ccui.ListView` 组合实现类似的功能,创建一个可以滚动的列表,用户点击后展开显示选项。 游戏引擎版本为2.4.3,这意味着在编写代码时,需要遵循该版本的API规范和...

    cocos2d js pageView

    在众多特性中,PageView组件是实现多页滑动效果的重要工具,尤其适用于制作电子书、画廊或轮播图等场景。本文将深入探讨Cocos2d-js中的PageView,帮助开发者更好地理解和运用这一功能。 一、PageView介绍 PageView...

    Cocos2d-JS中使用Cocos Studio资源02:登录界面

    例如,你可以使用`ccui.Button`的`addEventListener`方法添加点击事件监听器,然后在回调函数中执行相应的逻辑。 6. **安全与用户体验** 为了提供良好的用户体验,登录界面应有明确的提示信息,如输入错误的用户名...

    ScrollView cocos2d-x-3.2

    在cocos2d-x游戏开发框架中,ScrollView是不可或缺的一个组件,主要用于实现可滚动视图。这个压缩包“cocos2d-x-3.2”包含了一个针对版本3.2的ScrollView的示例项目,名为“ScrollViewTest”。下面将详细阐述...

    cocos2dx-3.0功能强大的richText控件源码

    在提供的标题“cocos2dx-3.0功能强大的richText控件源码”中,我们聚焦于Cocos2dx 3.0版本中的一个特定组件——RichText控件。这个控件允许开发者创建富文本内容,支持复杂的排版和格式化,如字体、颜色、对齐方式等...

    Cocos2dx摇杆lua版

    在Cocos2dx中,我们可以使用`ccui.Button`或`ccui.Slider`来创建这两个元素,通过调整其形状、大小和样式来模拟摇杆的外观。 1. **创建摇杆主体**:使用`ccui.Button`或自定义精灵节点来创建摇杆主体。你可以加载一...

    cocos2d-x ScrollView使用

    在cocos2d-x中,创建ScrollView主要通过`ccui::ScrollView`类来实现。首先,你需要实例化一个ScrollView对象,然后设置其大小和内容大小。内容大小应该至少大于ScrollView自身的大小,以便能滚动。 ```cpp auto ...

    cocos2d-lua 实现富文本

    在这个场景下,“cocos2d-lua 实现富文本”意味着我们要探讨如何在 Cocos2d-lua 中创建和处理包含多种格式、样式和动态内容的文本。富文本允许开发者展示更加丰富多彩的文本效果,如字体变化、颜色渐变、链接点击等...

    粗略使用cocostudio制作的scrollview

    总的来说,Cocostudio提供了一个直观的环境来设计和预览ScrollView,而cocos2d-x则负责在实际游戏中实现这些设计。通过熟练掌握这两个工具,开发者能够轻松创建动态且响应式的用户界面,提升游戏的用户体验。在实际...

    cocostyle:cocos2d-js 的 UI 框架

    ========== - 한국어사 사능하신 분은 [한글 문서](./ko.md)를 이용해주세요. ...带有 ccui.ScrollView 的简单滚动条。 csSpriteMask 掩盖 cc.Sprite 的简单方法。 脂肪酸 一种使用 Font Awesome 的简

    cocos2dx自定义控件ScrollBar

    在Cocos2d-x游戏开发框架中,ScrollBar控件是一个重要的元素,主要用于提供用户界面的交互性,特别是在TableView和ScrollView等可滚动视图中。它指示了内容在垂直或水平方向上的滚动位置,并允许用户通过拖动来改变...

    cocos creator 吃星星游戏demo

    理解ccui模块,如ccui.Button、ccui.Label等。 6. **事件处理**:学习如何通过JavaScript监听和处理各种游戏事件,如点击事件、触摸事件等,以实现玩家与游戏的交互。 7. **场景切换**:学习如何在不同游戏阶段...

    游戏开发引擎—Cocos2d-JS中使用Cocos Studio资源04:关卡选择界面.pdf

    接着,我们可以使用ccui.helper.seekWidgetByName方法找到界面中的特定控件,如按钮和文本控件,以便在程序中控制它们的行为。 例如,我们可以通过以下方式获取和设置按钮的事件监听器: 1. // 绑定开始按钮的点击...

    cocos2dx百人牛牛倍数、牛型动画文件

    在Lua中,我们可以使用ccui.Label或者cc.LabelTTF来创建文本标签,并结合cc.Animate或cc.Tween来实现动态效果。 在Lua脚本中,我们可以很方便地控制这些动画。例如,当玩家获得特定牌型时,我们可以通过以下方式...

    cocos creator 网页获取电脑本地图片并显示

    var input = ccui.helper.createWidgetFromJson('input', ccui.InputType.FILE, this.node); input.addEventListener('change', this.onLoadImage, this); }, onLoadImage(event) { var file = event.target....

Global site tag (gtag.js) - Google Analytics