Cocos2d-x JS Pure code to achieve the character picture clipping

Sometimes in order to facilitate the use of the color layer and the transition layer to display some information, but only the square angle of the corner is not very beautiful, so I use the shear node to achieve a round corner layer. Convenient for later use. Of course, if you use Cosos Studio operation will be better, eliminating the problem of coordinate cropping calculation, you can one step

1         //layer positioning, offset from the center of the screen2         varOffsetX = 0;3         varOffsetY = 0;4         //Layer Size5         varClipwidth = 600;6         varClipheight =400;7         //Fillet radius8         varRadius =25;9         //fillet Layer Implementation codeTen         varSize =cc.winsize; One         varStencil =Newcc. Drawnode (); AStencil.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)); -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)); -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)); theStencil.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)); -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)); -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)); -         varClippingpanel =Newcc. Clippingnode (); +Clippingpanel.stencil =stencil; -         //Layer Color +         varLayer =NewCc. Layercolor (Cc.color (255,0,0), clipwidth,clipheight); ALayer.x = (size.width-clipwidth)/2+offsetx; atLayer.y = (size.height-clipheight)/2+offsety; -         //Layer Transparency -layer.opacity = 200; - clippingpanel.addchild (layer); -          This. AddChild (Clippingpanel);

This code can be copied directly into the game App.js just created to demonstrate.

Description: Interface Examples
Image: Layer.png

Cocos2d-x JS Pure code to achieve the character picture clipping