Anyone knows how to draw a round triangle using a mesh?
Rounded triangle
(5 posts) (3 voices)
Posted 1 month ago #

Just guessing, I didn't test it or did before, so I could be wrong :
 define the 3 triangle points for reference ( p0, p1, p2 )
 figure each arc angle..
// p0 vs p1/p2
ang01 = Math.atan2(p0.yp1.y, p0.xp1.x);
ang02 = Math.atan2(p0.yp1.y, p0.xp1.x);draw the OPPOSITE arc between those angles, like cutting that portion from a full circle.
For circle drawing logic, check Canvas class repeat for the rest of the triangle corners (p1 and p2).
p1 vs p0/p2
p2 vs p0/p1The rest is just plugging the vertices list array in a polygon to resolve/triangulate the vertexData/indexData... check Starling's Canvas class or MeshRoundRect for reference.
That mesh initialization code is pretty generic:
var vdata:VertexData = new VertexData(); var idata:IndexData = new IndexData(); var poly:Polygon = new Polygon(verticesList); poly.triangulate(idata); poly.copyToVertexData(vdata); var mesh:Mesh=new Mesh(vdata,idata); addChild(mesh);
verticesList is just an array of coordinates like [x,y,x,y,x,y]...
Posted 1 month ago # 
thanks Rodrigo, but i dont understand i just use texture again.
Posted 1 month ago # 
I would do it like Rodrigo describes. The key observation is that the start and end angles for the arcs a each corner are given by the slopes of the sides, which are easily calculated. And you only need vertices for those arcs; you can rely on Starling’s Polygon.triangulate to generate the triangles. Or call Mesh.fromPolygon for it to do all the work.
Another way is as follows. Draw three circles, one at each corner. Draw three quads with the same width as the circle’s diameter, lying along the edges. Then draw a triangle in the middle. The only downside of this is it has 3 times as many vertices as Rodrigo’s method, but if performance is a concern you could draw it to a RenderTexture.
Posted 1 month ago # 
Premade Texture wil be the easiest approach by far
but beyond John’s suggestions, remember u can use Flash drawing api (Graphics), do whatever u want and then make a bitmapData out of it, if u need some sort of runtime generation of rounded triangles.I will even use Graphics directly, even on mobile, on Starling::nativeOverlay for specific things like charts and stuffs... not the best advise for performance, but pragmatic one, it just works.
Posted 1 month ago #
Reply
You must log in to post.