200字范文 > 多边形裁剪图片与自定义 Gizmo ！Cocos Creator Gizmo！

多边形裁剪图片与自定义 Gizmo ！Cocos Creator Gizmo！

时间：2020-06-03 06:08:22

支持合图，支持gizmo添加节点和调整位置，支持缩放旋转。文章底部获取完整项目！

效果预览与使用

原理

回顾

在gizmo入门探索介绍了gizmo与多边形裁剪的配合。

在使用 mesh 实现多边形裁剪图片中介绍了mesh和切耳法的相关使用。

相比mask组件，这种meshRenderer的实现可以降低两个draw call。

因为小伙伴使用的比较多，这边对这个多边形裁剪图片进行一次升级，增加易用性！

升级后添加了以下几个特性：

升级版本至Cocos Creator 2.4(一些接口的变化)

支持gizmo直接添加多边形节点

支持节点缩放旋转后，gizmo的正确显示

支持合图，图片资源可以勾选packable

接下来就大致讲解主要特性的原理吧。

分割多边形

这次不采用切耳法分割分割了，而是采用poly2tri这个库去分割(注意这个库有严格的限制)。

主要计算顶点索引过程如下。

//计算顶点索引constids=[];//多边形切割poly2tri，支持简单的多边形，确保顶点按顺序且不自交constcountor=this.vertexes.map((p)=>{return{x:p.x,y:p.y}});constswctx=newpoly2tri.SweepContext(countor,{cloneArrays:true});swctx.triangulate();consttriangles=swctx.getTriangles();triangles.forEach((tri)=>{tri.getPoints().forEach(p=>{consti=countor.indexOf(pasany);ids.push(i);});})mesh.setIndices(ids);

支持合图

引用一张@GT的图。

在SpriteFrame里含有这个uv信息，这里可以做一次转换，先计算0~1的比例，再做一次转化坐标。

private_lerp(a:number,b:number,w:number){returna+w*(b-a);}

constuv=this.spriteFrame.uv;consttexture=this.spriteFrame.getTexture();/***t*lr*b*/constuv_l=uv[0];constuv_r=uv[6];constuv_b=uv[3];constuv_t=uv[5];//计算uvconstuvs=[];for(constptofthis.vertexes){constu=this._lerp(uv_l,uv_r,(pt.x+texture.width/2+this.offset.x)/texture.width);constv=this._lerp(uv_b,uv_t,(pt.y+texture.height/2-this.offset.y)/texture.height);uvs.push(cc.v2(u,v));}mesh.setVertices(gfx.ATTR_UV0,uvs);

gizmo 增加多边形顶点

整体思路是先根据所有顶点画线段，给线段添加事件监听，在点击位置添加一个节点。

点击转换坐标有个坑，y的坐标要用一个高度减去后再转换(感谢@GT的pr)。

start:(x,y,event,param)=>{y=this._view.offsetHeight-y;//坐标转换letposition=cc.v2(x,y);position=Editor.GizmosUtils.snapPixelWihVec2(position);position=this._view.pixelToWorld(position);position=node.convertToNodeSpaceAR(position);}

gizmo 支持旋转缩放

整体来说，就是将坐标点先做缩放，再做旋转处理即可。

this._tool.plot(target.vertexes.map((p)=>{letscaleX=node.scaleX;letscaleY=node.scaleY;letangle=-node.angle*Math.PI/180;constcos_angle=Math.cos(angle);constsin_angle=Math.sin(angle);constv=Editor.GizmosUtils.snapPixelWihVec2(p.mul(this._view.scale));returncc.v2((v.x*cos_angle*scaleX+v.y*sin_angle*scaleY),-(-v.x*sin_angle*scaleX+v.y*cos_angle*scaleY));}),position);