- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
How to use 'Pen'
Read 507 times

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
How to use 'Pen'
Jun 4th, 2018 at 12:22pm
 
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?
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #1 - Jun 5th, 2018 at 8:18am
 
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):
node.setStroke("black");
node.setStrokeThickness(0.3);
node.setStrokeDashStyle(MindFusion.Drawing.DashStyle.DashDot); 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #2 - Jun 6th, 2018 at 9:39am
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #3 - Jun 6th, 2018 at 2:08pm
 
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):
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 | 16 )
doube-line.PNG
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #4 - Jun 7th, 2018 at 3:11pm
 
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 | 18 )
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #5 - Jun 11th, 2018 at 6:20am
 
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:
<?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):
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 9:29am by Lyubo »

DoubleEllipse.PNG (14 KB | 17 )
DoubleEllipse.PNG
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #6 - Jun 11th, 2018 at 9:44am
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #7 - Jun 11th, 2018 at 10:06am
 
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):
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
 
 
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #8 - Jun 15th, 2018 at 8:07am
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #9 - Jun 18th, 2018 at 5:55am
 
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
 
 
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #10 - Jun 19th, 2018 at 4:43pm
 
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 | 19 )
start_1.jpg
start_2.jpg (13 KB | 19 )
start_2.jpg
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #11 - Jun 20th, 2018 at 8:37am
 
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):
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 | 17 )
scaling.png
 
IP Logged    
 
     

Kuzya   Offline
YaBB Newbies
*
Posts: 45
I love YaBB 1G - SP1!


   
     
 
Re: How to use 'Pen'
Reply #12 - Aug 20th, 2018 at 12:00pm
 
Hi,

for Shape -> RoundRect  does not work.


Regards,
Kuzya
 
 

start.jpg (12 KB | 16 )
start.jpg
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 176
Gender: male
MindFusion team


   
     
 
Re: How to use 'Pen'
Reply #13 - Aug 21st, 2018 at 8:47am
 
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):
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 | 12 )
roundrect.PNG
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print