(UTC)
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic creat Shapes (Read 3155 times)
Jim li
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 5
Joined: Jun 2nd, 2016
creat Shapes
Jun 2nd, 2016 at 3:13am
Print Post  
Hi,
I draw a shape with winform method,it works well
new Shape(
null,
new ElementTemplate[] {
            new LineTemplate(30, 20, 30, 80),
            new ArcTemplate(20, 30, 19, 19, 0f, 442.4054f),
            new ArcTemplate(20, 50, 19, 20, 26.56505f, 395.3776f),
            new LineTemplate(50, 10, 50, 90),
            new ArcTemplate(60, 30, 20, 20, 21.37062f, 355.1337f),
            new ArcTemplate(60, 49, 20, 20, 0f, 397.304f),
            new LineTemplate(70, 20, 70, 80)
      },
ShapeTextArea,
FillMode.Winding, "test")


but when i use jsDiagram to draw it,
new Shape(
{ outline: 'M30,20 L30,80 A20,30,19,19,0,442.4054 A20,50,19,20,26.56505,395.3776 '+
'M50,10 L50,90 A60,30,20,20,21.37062,355.1337 A60,49,20,20,0,397.304 M70,20 L70,80', fillMode: "evenodd", decoration: '', id: 'test' });

it can not work
  
winform.jpg ( 1 KB | 93 Downloads )
winform.jpg
js.jpg ( 2 KB | 93 Downloads )
js.jpg
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: creat Shapes
Reply #1 - Jun 2nd, 2016 at 6:35am
Print Post  
Hi,

You can import shape libraries defined with the ShapeDesigner tool that is bundled with the diagramming package using the ShapeLibrary class.

If you prefer defining shapes from code, you can define same shape like this:

Code (Javascript)
Select All
var shape = new MindFusion.Diagramming.Shape({outline: '',
decoration:"M30,20 L30,80 M39,40 A29.5,39.5,9.5,0,7.72143085860252,0 M37.9970584017805,64.47213577124947 C35.65066063542834,69.41192079622314,29.944266791037986,71.41416438750807,25.251471017313,68.94427200187421 C20.55867524358802,66.47437961624036,18.656543831867335,60.4676492537242,21.0029415982195,55.52786422875053 C23.349339364571662,50.588079203776864,29.05573320896201,48.585835612491934,33.748528982687,51.05572799812579 C38.44132475641198,53.525620383759644,40.34345616813266,59.5323507462758,37.9970584017805,64.47213577124947 M50,10 L50,90 M79,44 A70,40,10,0.3729876821925506,6.571240031982336,0 M80,59 A70,59,10,0,6.93426293134355,0 M70,20 L70,80",
fillMode: 'nonzero', id: 'test'})


Note that JsDiagram uses the outline bounds when hit-testing and this shape doesn't provide one.
If you'll need interaction you can set the shape path as an outline element in the code above and leave the decoration portion empty. If you need to remove the fill, you can set the node's brush to transparent.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Jim li
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 5
Joined: Jun 2nd, 2016
Re: creat Shapes
Reply #2 - Jun 2nd, 2016 at 7:02am
Print Post  
CoolThanks ,it worked.
Can you give me a Download link about the ShapeDesigner tool?
I have one but can only export shape code for C#  and VB.NET,not for javascript.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: creat Shapes
Reply #3 - Jun 2nd, 2016 at 8:13am
Print Post  
Hi,

It's the same tool. Use File -> Save Library (or press Ctrl+S) to save the library as a XML file. Use the "xml" extension instead of the default "shl", or you may need to modify your application/server MIME type settings.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Jim li
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 5
Joined: Jun 2nd, 2016
Re: creat Shapes
Reply #4 - Jun 3rd, 2016 at 8:32am
Print Post  
Hi,
I'm sorry to trouble you again,i have two more questions:
1: I use this code to create a shape

new Shape(
{
fillMode: "nonzero",
id: 'test',
outline: 'M30,20 L30,80 M40,40.5 A30,40,10,0,6.283185,0 M40,60 A30,60,10,0,6.283185,0 ' +
'M50,10 L50,90 M80,40 A70,40,10,0,6.283185,0 M80,60 A70,60,10,0,6.283185,0 M70,20 L70,80',
decoration:'',
shapeDecoration: "",
outlineBrush: "transparent",
outlinePen: "transparent",
decorationPen: "transparent",
decorationBrush: "transparent",
shapeDecorationPen: "",
shapeDecorationBrush: ""

})
and i also to user method : setBrush("transparent");
but i still can't to remove the fill

2:Is there a method to set diagram.nodes[i].shapeRenderer propertys?
  
Shape_with_fill.jpg ( 4 KB | 73 Downloads )
Shape_with_fill.jpg
ShapRenderer.jpg ( 50 KB | 74 Downloads )
ShapRenderer.jpg
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: creat Shapes
Reply #5 - Jun 3rd, 2016 at 9:26am
Print Post  
Hi,

1. The above code successfully removes the fill of the shape for me, but what remains is the drop shadow fill. You can either set the shadow brush to transparent like this:

Code (Javascript)
Select All
node.setShadowColor('transparent');

or disable shadows globally through

Code (Javascript)
Select All
diagram.setShadowsStyle(MindFusion.Diagramming.ShadowsStyle.None);
.

2. The shapeRenderer object is meant to be used internally and doesn't provide a public interface. Any property values that you set may get overwritten in a subsequent repaint.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge