Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) How to use 'Pen' (Read 5162 times)
Kuzya
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
How to use 'Pen'
Jun 4th, 2018 at 11:22am
Print Post  
In'Windows Forms' there was the possibility to use'Pen' :

System.Drawing.Pen pen = new System.Drawing.Pen(Color.Black);
pen.CompoundArray = new float[] { 0, 0.25f, 0.75f, 1 };
pen.Width = 0.3f;
pen.DashPattern = new float[] { 5f, 2f };


How to do this in javascript?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #1 - Jun 5th, 2018 at 7:18am
Print Post  
Hi,

You can use the stroke property to set the color, the strokeThickness property to set the width and chose a value from the MindFusion.Drawing.DashStyle enumeration to set the strokeDashStyle property. These properties can be accessed through the various style properties, or directly via the diagram and diagram items.

For example:
Code (Javascript)
Select All
node.setStroke("black");
node.setStrokeThickness(0.3);
node.setStrokeDashStyle(MindFusion.Drawing.DashStyle.DashDot); 



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


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #2 - Jun 6th, 2018 at 8:39am
Print Post  
Hi Lyubo,

Thankyou for the response.

I need a  pen.CompoundArray = new float[] { 0, 0.25f, 0.75f, 1 }; for double lines

How can I use that?

Regards,
Kuzya
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #3 - Jun 6th, 2018 at 1:08pm
Print Post  
Hi,

There's no such behavior supported out-of-the-box in the Canvas API. One thing you can try to do is to draw a wider line, then draw over the middle portion of it, using the 'destination-out' globalCompositeOperation switch on the canvas context. The actual implementation will be different depending on where you need to apply those double lines, but the following example shows how you can override the Line.draw behavior to achieve a similar result:

Code (Javascript)
Select All
MindFusion.Drawing.Line.prototype.draw = function (context, drawShadow)
{
    if (this.clipPath && !this.clipPath.empty())
    {
        this.clipPath.addToContext(context);
        context.save();
        context.clip();
    }

    if (this.shadow && drawShadow != false)
    {
        context.save();
        this.shadow.apply(context);
    }
    context.strokeStyle = this.pen;
    context.lineWidth = ((this.strokeThickness ? this.strokeThickness : 1) / context._mf_scale) * 4;
    MindFusion.Drawing.DashStyle.apply(context, this.strokeDashStyle);

    context.beginPath();
    context.moveTo(this.x1, this.y1);
    context.lineTo(this.x2, this.y2);
    context.stroke();

    context.globalCompositeOperation = 'destination-out';
    context.lineWidth /= 2;
    context.stroke();

    context.globalCompositeOperation = 'source-over';

    if (this.shadow && drawShadow != false)
        context.restore();
    if (this.clipPath && !this.clipPath.empty())
        context.restore();
 }; 



Check the attached image with the result of the above code for diagram links.

Regards,
Lyubo
  

doube-line.PNG ( 6 KB | 99 Downloads )
doube-line.PNG
Back to top
 
IP Logged
 
Kuzya
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #4 - Jun 7th, 2018 at 2:11pm
Print Post  
Hi Lyubo,

Thankyou for the response.Smiley

I want to have the frames of the element as double lines. is it possible?

(in FlowChart.NET at the ''Start'-element the frames are double-lined )

Regards,
Kuzya
  

Dok1.docx ( 98 KB | 95 Downloads )
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #5 - Jun 11th, 2018 at 5:20am
Print Post  
Hi,

To achieve a similar result in javascript, you could use the Shape Designer tool from the jsdiagram package (ShapeDesigner.exe) and create a custom shape with a decoration to simulate the double border. For example, the following xml code defines a custom double-bordered ellipse shape, which you can load via the ShapeLibrary class into jsdiagram:

Code
Select All
<?xml version="1.0" encoding="utf-8"?>
<shapes version="2">
  <shape id="DoubleEllipse" fill-mode="Winding">
    <outline>
      <arc dash-style="Custom" width="-1" x="0" y="0" arc-width="100" arc-height="100" start="0" sweep="360" />
    </outline>
    <decorations>
      <arc dash-style="Custom" width="-1" x="2" y="2" arc-width="96" arc-height="96" start="0" sweep="360" />
    </decorations>
    <shape-decorations />
    <enable-outline>True</enable-outline>
  </shape>
</shapes> 



Save that as a xml file to load in the diagram to be used as any other of the predefined shapes:

Code (Javascript)
Select All
var customShapes = new MindFusion.Diagramming.ShapeLibrary();
customShapes.loadFromXml('DoubleEllipse.xml');

node.setShape(MindFusion.Diagramming.Shape.fromId('DoubleEllipse')); 



Regards,
Lyubo
« Last Edit: Jun 11th, 2018 at 8:29am by Lyubo »  

DoubleEllipse.PNG ( 14 KB | 92 Downloads )
DoubleEllipse.PNG
Back to top
 
IP Logged
 
Kuzya
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #6 - Jun 11th, 2018 at 8:44am
Print Post  
Hi Lyubo,

thanks for pointing that out. At the moment we still use the trail version of Javascript. There doesn't seem to be a ShapeLibrary here.
Once an element has been set up in this way, will it be exported directly into XML or will post-processing always be necessary during loading?


Regards,
Kuzya
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #7 - Jun 11th, 2018 at 9:06am
Print Post  
Hi,

Which version of the control are you using? ShapeLibrary was introduced in v.2.5 and is present both in the trial and licensed versions. If you're using the latest version, make sure that the browser is not serving an older cached versions of the script files.

In order to use the custom shape, its definition needs to be loaded in advance. You can also not rely on a xml file, but use the Shape class constructor to supply the shape definition. The above shape can be recreated in javascript like this:

Code (Javascript)
Select All
var shape = new MindFusion.Diagramming.Shape({
  id: "DoubleEllipse",
  outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",
  decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",
  fillMode: "nonzero"});

node.setShape(shape); 



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


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #8 - Jun 15th, 2018 at 7:07am
Print Post  
Hi Lyubo,

Thanks for the solution Smiley It's working.
Can you tell me which parameters provide the distance between double lines?

  outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",
  decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",

Regards,
Kuzya
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #9 - Jun 18th, 2018 at 4:55am
Print Post  
Hi,

To increase the distance between the lines you need to adjust the decoration element. Moving the initial point "M98,50" closer to the shape's center - i.e. "M96,50" will leave a space of 4% of the shape's width between the lines; and next decrease the size of the decoration arcs to account for the offset - "A46,46" , and finally adjust the end points of the arcs: "4,50" for the fist and "96,50" for the second.

    decoration: "M96,50 A46,46,0,1,1,4,50 A46,46,0,1,1,96,50"

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


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #10 - Jun 19th, 2018 at 3:43pm
Print Post  
Hi Lyubo,

I'm afraid I can't achieve the desired parallility. Sad

Regards,
Kuzya

start_1 -Windows Forms
start_2 - javaScript
  

start_1.jpg ( 13 KB | 84 Downloads )
start_1.jpg
start_2.jpg ( 13 KB | 90 Downloads )
start_2.jpg
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #11 - Jun 20th, 2018 at 7:37am
Print Post  
Hi,

Another approach you can take, is to scale a copy of the existing outline path in an updateVisuals callback. You may want to adjust the scaling ratios depending on the types of shapes you are using. The following example works well with shapes, which width is longer that their height:

Code (Javascript)
Select All
MindFusion.Diagramming.ShapeNode.prototype.onUpdateVisuals = function (item)
  {
    var content = item.getGraphicsContent();
    var outline = null;
    var i = 0;
    for (; i < content.length; i++)
      if (content[i].outlinePath)
      {
        outline = content[i].outlinePath;
        break;
      }
    if (!outline)
      return;
    outline.pen = content[i].outlinePen || "black";
    outline.transform.scaleAtCenter(0.97, 0.95, new MindFusion.Drawing.Rect(0, 0, 100, 100));
    content.push(outline);
}; 



You will need to alter the code with conditionals for different shapes, depending on your specifications and apply a different scaling for different ratios.

Regards,
Lyubo
  

scaling.png ( 14 KB | 129 Downloads )
scaling.png
Back to top
 
IP Logged
 
Kuzya
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 45
Joined: Dec 19th, 2011
Re: How to use 'Pen'
Reply #12 - Aug 20th, 2018 at 11:00am
Print Post  
Hi,

for Shape -> RoundRect  does not work.


Regards,
Kuzya
  

start.jpg ( 12 KB | 99 Downloads )
start.jpg
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use 'Pen'
Reply #13 - Aug 21st, 2018 at 7:47am
Print Post  
Hi,

You can modify the round rectangle shape a bit, so it doesn't apply bigger corner radii, when the size of the node is small. Call this code somewhere in your initialization:

Code (Javascript)
Select All
MindFusion.Diagramming.Shape.registerDefaultShape(new MindFusion.Diagramming.Shape({ id: "RoundRect", outline: "M0,6 L0,94 Q0,100,6,100 L94,100 Q100,100,100,94 L100,6 Q100,0,94,0 L6,0 Q0,0,0,6" })); 



You can see the result in the attached image.

Regards,
Lyubo
  

roundrect.PNG ( 2 KB | 98 Downloads )
roundrect.PNG
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint