今天策划在需求上说想在原本的按钮点击基础上,加上一个按钮被点击时触发按钮缩放的表现。
第一时间想到的是:
var scaleSp = new cc.Sprite(res.gameLobby_startGameBtn_png); scaleSp.setScale(0.9); var startBtn = new cc.MenuItemSprite(new cc.Sprite(res.gameLobby_startGameBtn_png), scaleSp, function () { }, this);
但直接利用上面代码后会发现,缩放后的按钮是以左下角进行缩放的,
后跟入源码后发现原来精灵被加入的时候锚点都被设置成cc.p(0,0)了
在网上找到了一个解决方案, 直接对ccMenuItem.js 中的 代码进行修改。
setSelectedImage: function (selectedImage) { if (this._selectedImage === selectedImage) return; if (selectedImage) { this.addChild(selectedImage, 0, cc.SELECTED_TAG); selectedImage.anchorX = 0; selectedImage.anchorY = 0; var point = selectedImage.getPosition(); var size = selectedImage.getContentSize(); selectedImage.setPosition(cc.p(point.x - (selectedImage.getScaleX() - 1)/ 2 * size.width, point.y - (selectedImage.getScaleY() - 1) / 2 * size.height)); } if (this._selectedImage) { this.removeChild(this._selectedImage, true); } this._selectedImage = selectedImage; this._updateImagesVisibility(); },
这种做法如果打包app的话 貌似需要修改c++的代码,为了避免不必要的麻烦
var normalImage = startBtn.getNormalImage(); normalImage.setAnchorPoint(cc.p(0.5, 0.5)); var selectedImage = startBtn.getSelectedImage(); selectedImage.setAnchorPoint(cc.p(0.5, 0.5));
我们在创建完按钮之后将图片取出重新修改锚点。