包含cocos2dapp的词条

Android游戏开发之Cocos2d-x

游戏的 *** 如播放电影，拥有四大核心，包括： 导演、场景、图层、演员 。通过它们之间的不同配合，实现丰富多彩的效果。

public class CocosActivity extends AppCompatActivity {

private CCDirector mCcDirector;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

CCGLSurfaceView ccglSurfaceView =new CCGLSurfaceView(this);

setContentView(ccglSurfaceView);

导演，全局只有一个，单例模式创建

mCcDirector = CCDirector.sharedDirector();

开启绘制（开始拍电影）

mCcDirector.attachInView(ccglSurfaceView);

帧率,每秒刷新的次数，与手机性能有关

//ccDirector.setDisplayFPS(true);

设置帧率为60（记得把帧率文件放进项目中）

//ccDirector.setAnimationInterval(1/60f);

设置横屏

//ccDirector.setDeviceOrientation(CCDirector.kCCDeviceOrientationLandscapeLeft);

屏幕适配，会基于不同屏幕大小进行适配

mCcDirector.setScreenSize(1920,1080);

场景

CCScene ccScene = CCScene.node();

图层

CCLayer ccLayer =CCLayer.node();

给场景添加图层

ccScene.addChild(ccLayer);

导演运行场景

mCcDirector.runWithScene(ccScene);

}

@Override

protected void onResume() {

super.onResume();

mCcDirector.onResume();

}

@Override

protected void onPause() {

super.onPause();

mCcDirector.onPause();

}

@Override

protected void onDestroy() {

super.onDestroy();

mCcDirector.end();

}

1、平移

参数1是移动时间，参数2是目标位置坐标,ccp *** 是把坐标转换为cocos2d的坐标

CCMoveTo ccMoveTo = CCMoveTo.action(3,ccp(200,0));

与上不同的是，第2个参数代表水平移动200，竖直不移动，即偏移量

CCMoveBy ccMoveBy =CCMoveBy.action(3,ccp(200,0));

2、旋转

参数1时间，参数2角度，旋转中心是左下角的点，顺时针转

CCRotateBy ccRotateBy =CCRotateBy.action(3,360);

与上不同的是，逆时针转(捷径，顺时针转270==逆时针转90)

CCRotateTo ccRotateTo =CCRotateTo.action(3,270);

3、缩放

参数1时间，参数2X方向缩放，参数3Y方向缩放

CCScaleBy ccScaleBy =CCScaleBy.action(3,2,2);

参数1时间，参数2缩放

CCScaleTo ccScaleTo =CCScaleTo.action(3,2);

4、跳跃(参数1时间，参数2目标点，参数3跳跃高度，参数4跳跃次数)

CCJumpBy ccJumpBy =CCJumpBy.action(3,ccp(0,0),100,3);

5、淡入淡出(参数是时间)

CCFadeIn ccFadeIn =CCFadeIn.action(2);

CCFadeOut ccFadeOut =CCFadeOut.action(2);

6、贝塞尔曲线

点的含义，从point1出发，经过point2，到达endPosition

CCBezierConfig ccBezierConfig =new CCBezierConfig();

ccBezierConfig. controlPoint_1 =ccp(100,50);

ccBezierConfig. controlPoint_2 =ccp(200,200);

ccBezierConfig. endPosition =ccp(300,100);

CCBezierBy ccBezierBy =CCBezierBy.action(2,ccBezierConfig);

7、加速度

CCMoveBy ccMoveBy =CCMoveBy.action(2,ccp(100,100));

渐快渐慢，参数2是加速度

CCEaseIn ccEaseIn =CCEaseIn.action( ccMoveBy ,5);

CCEaseOut ccEaseOut =CCEaseOut.action( ccMoveBy ,5);

8、闪烁（时间，闪烁次数）

CCBlink ccBlink =CCBlink.action(2,10);

9、文字(参1是显示的文字，参2是字体格式(可不填，如"")，参数3是字体大小)

CCLabel ccLabel = CCLabel.labelWithString("显示文字","STCAIYUN.TTF",20);

设置文字颜色

ccColor3B ccColor3B =ccc3(100,50,0);

ccLabel.setColor(ccColor3B );

设置文字位置

ccLabel.setPosition(ccp(width,height));

重置文字

ccLabel.setString("显示文字");

颜色渐变(从本来的文字颜色渐变到设置的字体颜色)

CCTintBy tintBy =CCTintBy.action(3,ccc3(50,-50,100));

10、循环(参数是动画效果)

CCRepeatForever ccRepeatForever =CCRepeatForever.action(action);

11、延迟(参数是时间)

CCDelayTime ccDelayTime =CCDelayTime.action(1);

12、反转(将一个动画倒序执行)

ccJumpBy.reverse();

13、同时(参数是不定长度数组)

CCSpawn ccSpawn =CCSpawn.actions(action1,action2);

14、连续动画(参数是不定长度数组)

CCSequence ccSequence =CCSequence.actions(action1,action2, ccCallFunc ");

15、反射(执行一个动画 *** )

CCCallFunc .action(this," anim ");

被反射的执行 ***

public void anim (){} 

16、逐帧动画

public void walk(){

存放帧动画的 ***

ArrayList ccSpriteFrames =new ArrayList();

String format="z_1_%d.png";  // %d和%02d代表整数，用i来取代，%d只取代i，%02d会补0

for(int i=1;i10;i++){

CCSprite ccSprite =CCSprite.sprite(String.format(format,i));

CCSpriteFrame ccSpriteFrame =ccSprite.displayedFrame();

ccSpriteFrames.add(ccSpriteFrame );

}

参数1是动画名称，参数2是每一帧停留的时间，参数3是帧动画 ***

CCAnimation ccAnimation =CCAnimation.animation("walk",.2f,ccSpriteFrames);

参数2是否持续执行动画，如果想执行无限循环，可以使用CCRepeatForever

CCAnimate ccAnimate =CCAnimate.action(ccAnimation,false);

mCcSprite.runAction(ccAnimate);

}

17、隐藏

CCHide ccHide =CCHide.action();

18、显示

CCShow ccShow =CCShow.action();

19、跟随（参数是跟随的对象）

CCFollow  ccFollow =CCFollow.action(mCCSprite);

20、执行动画（上述皆是）

mCcSprite.runAction(action);

21、工具类使用

CGPointUtil .distance(point1,point2); //计算两点距离

获取声音引擎

SoundEngine engine =SoundEngine.sharedEngine();

参数1是activity，SurfaceView创建时存入，参2是播放资源id（res\raw）,参数3是否循环播放

engine.playSound(CCDirector.theApp,1,true);

手动停止音乐播放

engine.realesAllSounds();

生命周期跟随Activity

SoundEngine.sharedEngine().resumeSound();

SoundEngine.sharedEngine().pauseSound();

SoundEngine.sharedEngine().realesAllSounds();

预加载播放音乐，避免播放音乐时没声音

SoundEngine.sharedEngine().preloadEffect();

SoundEngine.sharedEngine().preloadSound();

1、创建

CCSprite mCcSprite =new CCSprite(" pic.jpeg ");

2、锚点(图片上的一点，类似图钉，对应图片显示的位置)

CGPoint cgPoint =ccp(0,0);

mCcSprite.setAnchorPoint(cgPoint);

3、位置

mCcSprite.setPosition(cgPoint);

4、属性(缩放、翻转、透明度)

ccSprite.setFlipX(true); 水平翻转

ccSprite.setOpacity(255); 透明度

ccSprite.setScale(2); 缩放

5、移除（在Layer里面操作）

mCcSprite.removeSelf();  //精灵从图层中移除

( Layer )this.removeSelf(); // 移除整个图层

6、尺寸

CGSize  cgSize =CCDirector.sharedDirector().winSize();

1、游戏暂停(图层静止，将不再响应任何事件)

MapLayer.this.onExit(); 

注意：因为图层不再响应任何事件，所以暂停按钮应该加在暂停图层的父图层上

this.getParent().addChild(new PauseLayer());

2、游戏继续(图层恢复动态，接收点击事件)

MapLayer.this.onEnter(); 

通用的游戏继续 ***

CCDirector.sharedDirector().getRunningScene().onEnter();

3、定时器

CCScheduler ccScheduler =CCScheduler.sharedScheduler();

通过反射执行 ***

ccScheduler.schedule(" onScheduler ",this,2,false);

*** 声明为公开类型

public void  onScheduler (float f){ //实现具体逻辑

};

4、进度条

CCProgressTimer ccProgressTimer =CCProgressTimer.progressWithFile(" image/pic.jpeg "); //多层目录

ccProgressTimer.setPosition(width,height);

this.getParent().addChild(ccProgressTimer);  //具体加到什么图层，看情况

ccProgressTimer.setScale(0.6f);

ccProgressTimer.setPercentage(2);

设置显示样式（垂直，水平）-(最后2个字母,left,right，代表进度条从左往右)

ccProgressTimer.setType(CCProgressTimer.kCCProgressTimerTypeHorizontalBar LR );

进度条外框 等元素，都作为精灵与进度条同级加入图层

this.getParent().addChild(sprite);

Android坐标系的（0，0）在左上角，而Cocos2d-x坐标系的（0，0）在左下角。所以在处理Android的点击事件MotionEvent时，需要进行坐标体系的转换。

CGPoint cgPoint = convertPrevTouchToNodeSpace (event);

监听图片的点击范围，自定义封装点击事件

CGRect .containsPoint( mCcSprite.getBoundingBox() , cgPoint );

CCMenu ccMenu =CCMenu.menu();

CCSprite normalSprite =CCSprite.sprite("pic_1.jpeg"); //正常情况下显示的图片

CCSprite selectSprite =CCSprite.sprite("pic_2.jpeg"); //按下时显示的图片

注意：反射的 *** 需要使用pulbic修饰，参数指target，直接传this，它不是上下文Context

CCMenuItemSprite itemSprite =CCMenuItemSprite.item( normalSprite , selectSprite , this ," onCLick ");

ccMenu.addChild( itemSprite );

this.addChild(ccMenu); //菜单添加到图层

public void onCLick (Object obj){}  //点击事件响应 *** ，必须用public修饰以及带参数

setIsTouchEnabled(true); //打开图层点击事件，默认关闭

模仿任何天气现象，只需要改这一句，剩下的不变

CCParticleSystem ccParticleSystem= CCParticleSnow.node();

设置雪花大小

ccParticleSystem.setScale(2);

设置飘落的速度

ccParticleSystem.setSpeed(10);

设置雪花的图片

ccParticleSystem.setTexture(CCTextureCache.sharedTextureCache().addImage("snow.png"));

this.addChild(ccParticleSystem,1);

停止粒子系统(下雪)

ccParticleSystem.stopSystem();

1、加载地图

 ArrayList mCGPoints = new ArrayList();

CCTMXTiledMap mCctmxTiledMap = CCTMXTiledMap.tiledMap(" map.tmx ");

mCctmxTiledMap.setAnchorPoint(ccp(0.5f,0.f));

mCctmxTiledMap.setPosition(width,height);

CCTMXObjectGroup cctmxObjectGroup= mCctmxTiledMap.objectGroupNamed("road"); 

ArrayListHashMapString,String objects = cctmxObjectGroup.objects;

for(HashMapString,String hashMap:objects){  //加载地图的坐标（需要经过的坐标点）

Integer x =Integer.parseInt(hashMap.get("x"));

Integer y =Integer.parseInt(hashMap.get("y"));

CGPoint cgPoint =ccp(x,y);

mCGPoints .add(cgPoint);  }

this.addChild(mCctmxTiledMap);

在地图上添加精灵

mCCSprite.setPosition(mCGPoints.get(0));

mCctmxTiledMap.addChild(mCCSprite);

地图跟随精灵的移动而移动

CCFollow ccFollow =CCFollow.action(mCCSprite);

mCctmxTiledMap .runAction(ccFollow);

2、地图随手指触摸事件移动（重写触摸 *** ）

@Override

public boolean ccTouchesMoved(MotionEvent event) {

手指拖拽时，地图随手指移动

mCctmxTiledMap.touchMove(event,mCctmxTiledMap);

地图移动，地图上所有精灵都随之移动（地图是父亲，精灵是孩子）

mCctmxTiledMap.addChild(mCCSprite);

return super.ccTouchesMoved(event);

}

创建场景

CCScene ccScene =CCScene.node();

场景添加图层

ccScene.addChild(ccLayer);

场景切换特效

CCJumpZoomTransition ccJumpZoomTransition =CCJumpZoomTransition.transition(2,ccScene);

导演切换场景

CCDirector.sharedDirector(). replaceScene (ccJumpZoomTransition);

CopyOnWrite容器即写时复制的容器。通俗的理解是当我们往一个容器添加元素的时候，不直接往当前容器添加，而是先将当前容器进行Copy，复制出一个新的容器，然后新的容器里添加元素，添加完元素之后，再将原容器的引用指向新的容器。这样做的好处是我们可以对CopyOnWrite容器进行并发的读，而不需要加锁，因为当前容器不会添加任何元素。所以CopyOnWrite容器也是一种读写分离的思想，读和写不同的容器。用法和ArrayList相近。

CopyOnWriteArrayList copyOnWriteArrayList = new CopyOnWriteArrayList();

setIsTouchEnabled(true); //打开点击事件

@Override

public boolean ccTouchesBegan (MotionEvent event) {

return super.ccTouchesBegan(event);

}

@Override

public boolean ccTouchesCancelled (MotionEvent event) {

return super.ccTouchesCancelled(event);

}

@Override

public boolean ccTouchesMoved (MotionEvent event) {

return super.ccTouchesMoved(event);

}

@Override

public boolean ccTouchesEnded (MotionEvent event) {

return super.ccTouchesEnded(event);

}

描述：UI频繁刷新，造成主线程的堵塞或挂起

private CCGLSurfaceView mCCGLSurfaceView;

mCCGLSurfaceView = (CCGLSurfaceView) CCDirector.sharedDirector().getOpenGLView();

mCCGLSurfaceView.queueEvent(new Runnable() {

@Override

public void run() { //切换到主线程

}

});

描述：CCSprite运行动画时，没有表现出任何视觉效果。

原因：一个动画只能被一个CCSprite执行一次，执行完成后，原来的动画会失效。

解决：每次执行的动画，都需要重新生成，即使是相同的动画效果。

缓存：CCDirector.sharedDirector().purgeCachedData();

cocos2d-x的在安卓中开发的app打不开，可能是为什么？虚拟机没问题，程序也没错！

您好，您这样：

是因为UI中用了一个ScrollView，去掉就好了。

这个问题，在android下面 工程文件夹中 Cocos2dxActivity.java 中的这个改成如下方式

public Cocos2dxGLSurfaceView onCreateView() {

Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);

glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);

return glSurfaceView;

// return new Cocos2dxGLSurfaceView(this);

}

如何自定义 Cocos2d-HTML5 Loading 界面

　在使用 C++ 编写 Cocos2d-x 游戏的时候，通常在运行游戏之前，需要加载游戏资源，这样是为了让游戏在运行时更为流畅，避免了在运行时加载资源，而出现卡顿现象，影响用户体验，因为加载资源是非常耗时、耗资源的操作。在 Cocos2d-html5 中也是同样，在运行游戏之前，预先加载好所有的资源（加载到浏览器缓存），以保证游戏的流畅运行。

Cocos2d-html5 的加载流程

在开始我们的替换工作之前，大致说一下必要的（只注重我们在乎的细节问题）原有的加载流程，以**HelloHTML5World**为例 。从其主页面 index.html开始，我们需要了解三个文件的运作方式，index.html、cocos2d.js 和 main.js：

浏览器首先加载 index.html 页面，值得注意的有两点，在页面的 DOM 树中，能看到命名为**gamecanvas**的**Canvas**元素，它将会是游戏的画布，另一点，在页面的最后，加载了 cocos2d.js 文件。

cocos2d.js 内中，定义了程序运行需要的一些参数，如 显示 FPS，是否加载扩展库，物理引擎库等，其中 engineDir 设置了引擎所在的位置，appFiles 设置了，当前项目所用到需要加载的 js 程序代码。并定义了当 DOM 加载完成时运行的代码(你可以在 【这里】 查看所有代码。)：

window.addEventListener('DOMContentLoaded', function () {

// 添加脚本

var s = d.createElement('script');

// 这里判断了是否使用自定义的 单文件作为库加载，对库的优化压缩文件

if (c.SingleEngineFile !c.engineDir) {

s.src = c.SingleEngineFile;

}

else if (c.engineDir !c.SingleEngineFile) {

s.src = c.engineDir + 'platform/jsloader.js';

}

else {

alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');

}

document.ccConfig = c;

s.id = 'cocos2d-html5';

// 将脚本加载到当前文档，地址是 jsloader.js 的实际地址

d.body.appendChild(s);

});

jsloader.js 里面设置了一堆需要加载的可执行脚本，保存在 engine 变量之中，在文件的最后，我们能够看到这样的代码：

// 将所有的 appFiles 添加到 engine 中，返回到新定义的变量 que 之中

var que = engine.concat(c.appFiles);

que.push('main.js');

...

// 后面一个 for 循环，添加所有文件到 document 中去

由以上代码，便将我们自定义的使用脚本和 main.js 添加进去了，而最后执行的也是 main.js 脚本，游戏的之一个运行场景就由此开始。main.js 里面创建了一个 cocos2dApp 的类型，它 继承(虽然在 js 中没有继承的概念，但有类似于继承的机制) 自 cc.Applicatoin，其中我们看到非常熟悉的函数 applicationDidFinishLaunching ，有这样一段代码：

// 调用 cc.LoaderScene Loading 界面，用以加载资源

cc.LoaderScene.preload(g_resources, function () {

// 当资源加载完毕，回调函数，运行之一个场景，而这个场景是由 cocos2dApp 的构造函数传入

director.runScene(new this.startScene());

}, this);

// main.js 最后一行

var myApp = new cocos2dApp(GameLayer.scene);

在 cocos2dApp 的构造函数中，初始化了一些必要信息，并调用了cc.AppController.shareAppController().didFinishLaunchingWithOptions();，这会间接的调用 Application 的 run *** ，从而导致applicationDidFinishLaunching *** 被触发。它运行了cc.LoaderScene的 preLoad *** ，这内中就是 Loading 界面的实现了，它传入了一个回调函数，用于确定在资源加载完毕之后启动之一个场景（Loading 其本身也是一个场景）。

怎样自定义 Loading 界面

前面我们了解了 Cocos2d-html5 的大致加载流程，而现在我们关注的是 cc.LoaderScene 所在的文件 CCLoader.js 的内部实现。里面定义了 cc.Loader 和 cc.LoaderScene 类型，Loader 内部完成了，对资源加载的所有操作步骤实现，而 LoaderScene 则是对 Loader 的进一步封装，将加载的过程，用一个界面来可视化的实现出，如用一个加载场景，上面一个 Logo 显示，同时显示了当前加载资源的进度百分比。我们要自定义实现 Loading 界面，那就是重新实现 LoaderScene 即可。对于 LoaderScene 的实现比较简单，我们参考其实现，自定义一个 Loader.js 文件，实现 Loader 类，完成自定义Loading 界面的具体实现，其中大多参考（实际是copy）了 LoaderScene 的实现，在其上修改扩充，它完成了修改 Logo 图片，并添加了一个简单的进度条，是加载过程更为一目了然，这里并没有多么炫的效果，但足以让你了解，你该如何自定义一个 Loading 界面（只贴出了相比较 LoaderScene 所修改的部分，但你可以在 【这里】 获取到源码）：

// 这里定义了 Logo 图片的 Base64 编码，至于为什么，后面将会说明，这里的编码内容挺多，故做简写

logoData = "data:image/png;base64,...";

Loading = cc.Scene.extend(

_logo: null,

_logoTexture: null,

_texture2d: null,

_bgLayer: null,

_label: null,

_winSize:null,

_processLayer: null, // 相比 LoaderScene 的实现，添加了两个属性，标示进度条层和进度条长度

_processLayerLength: null,

// 构造函数

ctor: function () {

this._super();

this._winSize = cc.Director.getInstance().getWinSize();

},

init:function(){

cc.Scene.prototype.init.call(this);

// logo 图片和 label 的添加 .. 这里省略，于 LoaderScene 同样

// 设置进度条层，它就是一个红色颜色层，通过长度来标示加载的进度

this._processLayerLength = 500;

this._processLayer = cc.LayerColor.create(cc.c4b(255, 100, 100, 128), 1, 30);

this._processLayer.setPosition(cc.pAdd(centerPos, cc.p(- this._processLayerLength / 2, -logoHeight / 2 - 50)));

// 可以启用锚点，并设置以满足自己的需要

// this._processLayer.ignoreAnchorPointForPosition(false);

// this._processLayer.setAnchorPoint(cc.p(0, 0));

this._bgLayer.addChild(this._processLayer);

},

// 以下 *** 的实现并没有跟 LoaderScene 有什么不同

// _initStage: ...

// onEnter ...

// onExit ...

// initWithResources ...

// _startLoading ...

// _logoFadeIn

// 每帧更新

_updatePercent: function () {

var percent = cc.Loader.getInstance().getPercentage();

var tmpStr = "Loading... " + percent + "%";

this._label.setString(tmpStr);

// 设置当前进度条层的长度

this._processLayer.changeWidth(this._processLayerLength * percent / 100);

if (percent = 100)

this.unschedule(this._updatePercent);

}

});

// 这里于 LoaderScene 的实现同样

Loading.preload = function (resources, selector, target) {

if (!this._instance) {

// 创建一个 Loading

this._instance = new Loading();

this._instance.init();

}

// ...

return this._instance;

};

这里我们只是 copy 了一份 LoaderScene（copy 修改会让这里的操作步骤简化） ，重新命名 Loading 然后在此基础添加了一个进度条显示，当然这里的 Loading 类完全由你自己定义，它有哪些显示，你可以随意定制，只要在 _updatePercent *** 实时获取当前进度，并且更新到界面显示即可。

我们注意到在 Loading 文件，定义了一个 logoData 变量，它保存的是一张图片的 Base64 位格式编码，这样做的好处是，在运行显示图片之时，不会出现此图没有加载的情况，但是也由于它是 Base64 编码的图片，所以图片不宜过大，否则编码后的数据量很大，其次解码也需要耗时。

完成 Loading.js 后，我们需要加载它，并让它运行，以替换 LoaderScene 的运行。首先修改项目 cocos2d.js 文件，在**appFiles**添加 Loading.js 文件。其次修改 main.js 文件内 cc.LoaderScene.preload 为 Loading.preload 即可，刷新 index.html 界面，将能看见 Loading 界面已经替换。它加载速度的快慢取决于游戏资源内容的多少 ~

求教如何将qt和cocos2dx结合开发

QT的实现基本和上面MFC的类似， 参考QT的例子，实现一个window

复制代码

1 void Window::initcocos2d()

2 {

3 cocos2dApp = new AppDelegate;

4 HWND hWnd = (HWND)this-winId(); // 关键, QWidget 与 HWND 的转换

5 CCApplication::sharedApplication().run(hWnd, TEXT("Hello"), 480, 320);

6 }

复制代码

用一个定时器去刷新

复制代码

1 void Window::renderCocos2dx(void)

2 {

3 CCApplication::sharedApplication().renderWorld();

4 }

5

6 Window::Window(QWidget *parent)

7 :QWidget(parent)

8 {

9 QTimer *timer = new QTimer(this);

10 connect(timer, SIGNAL(timeout()), this, SLOT(renderCocos2dx(void)));

11 timer-start(20);

12

13 setWindowTitle(tr("Hello GL"));

14 }

复制代码

这里要用到qt的SIGNAL and SLOT

头文件 window.h

复制代码

1 // window.h

2 class Window : public QWidget

3 {

4 Q_OBJECT // 如果使用自定义 slots, 这个必须定义

5 private slots:

6 void renderCocos2dx(void);

复制代码

这里还得使用到QT安装目录bin下的moc.exe, 在命令行下 moc window.h -o moc_window.cpp

将生成的moc_window.cpp加入工程，否则会有一堆错误

关闭时要销毁， 重载 void closeEvent(QCloseEvent *);

复制代码

1 void Window::closeEvent(QCloseEvent *event)

2 {

3 cocos2d::CCDirector::sharedDirector()-end();

4 cocos2d::CCDirector::sharedDirector()-mainLoop();

5

6 QWidget::closeEvent(event);

7 }

复制代码

至于鼠标时间， 重载

1 void mousePressEvent(QMouseEvent *);

2 void mouseReleaseEvent(QMouseEvent *);

3 void mouseDoubleClickEvent(QMouseEvent *);

并修改 CEGLView_win32 添加对应处理鼠标事件的函数就OK