cocos2d-x JS 純程式碼實現人物頭像裁剪

標籤：rect   idt   樣本   style   cocos2d-x   his   app   座標   attach   

有時候為了方便會直接用顏色層和過渡層來顯示一些資訊,但層只有方角沒有圓角不太美觀,於是我用剪下節點實現了一個圓角層.方便以後使用. 當然，如果使用Cosos Studio 操作會更好一些，省去了座標裁剪計算等問題，可以一步到位

 1         //圖層定位,以螢幕中心位移 2         var offsetX = 0; 3         var offsetY = 0; 4         //圖層大小 5         var clipWidth = 600; 6         var clipHeight =400; 7         //圓角半徑 8         var radius =25; 9         //圓角層實現代碼10         var size = cc.winSize;11         var stencil = new cc.DrawNode();12         stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX,(size.height-clipHeight)/2+offsetY+radius),cc.p(size.width/2+clipWidth/2+offsetX,size.height/2+clipHeight/2+offsetY-radius),cc.color(0,0,0),1,cc.color(0,0,0));13         stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX+radius,(size.height-clipHeight)/2+offsetY),cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY),cc.color(0,0,0),1,cc.color(0,0,0));14         stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));15         stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));16         stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));17         stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));18         var clippingPanel = new cc.ClippingNode();19         clippingPanel.stencil = stencil;20         //層顏色21         var layer = new cc.LayerColor(cc.color(255,0,0),clipWidth,clipHeight);22         layer.x = (size.width-clipWidth)/2+offsetX;23         layer.y = (size.height-clipHeight)/2+offsetY;24         //層透明度25         layer.opacity = 200;26         clippingPanel.addChild(layer);27         this.addChild(clippingPanel);

 

這段代碼可以直接拷貝,放入剛建立的遊戲app.js中以示範.

描述:介面樣本
圖片:layer.png 

cocos2d-x JS 純程式碼實現人物頭像裁剪