Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Custom Shape in React (Read 893 times)
jarv2003
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Jan 21st, 2010
Custom Shape in React
Sep 14th, 2022 at 9:40pm
Print Post  
We use this code to create a custom shape in vb.net.
Private ReadOnly shapeControlValve As Shape = New Shape( _
                                           New ElementTemplate() _
                                           { _
                                               New LineTemplate(100, 35, 50, 50), _
                                               New LineTemplate(50, 50, 50, 25), _
                                               New LineTemplate(50, 25, 5, 25), _
                                               New ArcTemplate(5, 0, 90, 47, -180.0F, 180.0F), _
                                               New LineTemplate(95, 25, 50, 25), _
                                               New LineTemplate(50, 25, 50, 50), _
                                               New LineTemplate(50, 50, 0, 35), _
                                               New LineTemplate(0, 35, 0, 70), _
                                               New LineTemplate(0, 70, 50, 50), _
                                               New LineTemplate(50, 50, 100, 70), _
                                               New LineTemplate(100, 70, 100, 35) _
                                           }, _
                                           Nothing, _
                                           New ElementTemplate() _
                                           { _
                                               New LineTemplate(100, 75, 0, 75), _
                                               New LineTemplate(0, 75, 0, 100), _
                                               New LineTemplate(0, 100, 100, 100), _
                                               New LineTemplate(100, 100, 100, 75) _
                                           }, _
                                           FillMode.Winding, GlobalModule.ShapeName.SIMValve)

Is there a way to accomplish this in the react version?

Thanks
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Shape in React
Reply #1 - Sep 15th, 2022 at 9:26am
Print Post  
You could add your custom .NET shape definitions to a ShapeLibrary object, call ShapeLibrary.SaveToXml, and load the xml file using respective JavaScript ShapeLibrary.loadFromXml call. After that access shapes by calling Shape.fromId(id).

If you prefer defining the shapes in code, you can use some subset of SVG Path syntax. E.g. here's how the control creates some of its default shapes:

Code
Select All
var shapes = [];

shapes.push({ id: "Actor", outline: "M50,20  A10, 10, 0, 0, 1, 50, 0 A10, 10, 0, 0, 1, 50, 20  L70,20  A5, 5, 0, 0, 1, 75, 25  L75,60 L68,60 L68,30 L64,30 L64,100 L52,100 L52,65 L48,65 L48,100 L36,100 L36,30 L32,30 L32,60 L25,60 L25,25  A5, 5, 0, 0, 1, 30, 20  L50,20 Z" });
shapes.push({ id: "Alternative", outline: "M0,100 L50,0 L100,100 L0,100 Z" });
shapes.push({ id: "Arrow", fillMode: "evenodd", outline: "", decoration: "M87,95 L50,0 L13,95" });
....

for (var i = 0; i < shapes.length; i++) {
    var s = new Shape(shapes[i]);
    s.id = s.params.id;
    Shape.shapes[s.params.id] = s;
} 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint