Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Linear and Circular mode for Arrow. (Read 5176 times)
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Linear and Circular mode for Arrow.
Dec 23rd, 2008 at 8:11am
Print Post  
Hi,

At Runtime We have a "Two Arrow-Making Mode", "Linear Mode" and "Circular Mode".
Their Making Step is follows ..

1. Make Two nodes for arrow.

2. Linear Mode: Making the General Straight line Arrow between two node.
http://pic7.ohpy.com/up/elbbs/2008/12/23/161924/1373801024/mid_linear.gif

3. Circular Mode: Mouse move on flowchart then Arrow's shape is changed to Arc and Change the Radius od arc by Mouse position.
http://pic7.ohpy.com/up/elbbs/2008/12/23/161924/1419977995/mid_circular2.gif

Radius is calculated by distance between mouse position and Start node position.
http://pic7.ohpy.com/up/elbbs/2008/12/23/161924/1396843125/mid_circular.gif

4. Finally When MouseUp, the ArcArrow must be fixed on the flowchart.   

--------------------------------------
For Above, With GDI+ Grapgics, Arc Changing with Mouse Moving is completed. But making with customdraw of flowchart is not easy ...

help us!

  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #1 - Dec 23rd, 2008 at 11:04am
Print Post  
You could approximate an arc using a Bezier arrow:
http://www.tinaja.com/glib/ellipse4.pdf
  
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #2 - Dec 24th, 2008 at 12:59am
Print Post  

Hi, Thanks, But

We already have the mathmatical algorithm for Arc Bezier curve.

The matter is that, We don't know the "CustomDraw coding method" for defined 4-step arrow mode.   

Especially, Connecting the Mouse-Move event and Arc-changing at runtime is difficult.

And Mouse-Up event and fixing the Varied curve on flowchart is also difficult to us. 

Merry Christmas!



  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #3 - Dec 24th, 2008 at 10:02am
Print Post  
Hi,

You don't need any custom drawing, just set the link's Style to Bezier, and from MouseMove set its ControlPoints coordinates.

Stoyan
  
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #4 - Dec 26th, 2008 at 3:37am
Print Post  


OK, It's possible,

But Control Point's footprint is remained on mouse track.
http://pic7.ohpy.com/up/elbbs/2008/12/26/161924/1592641632/mid_controlp.gif


Is it normal?

Thanks.

Code
Select All
	  private void flowChart1_MouseMove(object sender, MouseEventArgs e)
	  {
		PointF points = new PointF();
		points.X = 150;
		points.Y = 150;
		if (IsArc == true)
		{
		    a1.Style = ArrowStyle.Bezier;
		    a1.ControlPoints[1] = new PointF(150, 150);
		    a1.ControlPoints[2] = new PointF((float)e.X-5, (float)e.Y-5);
		    a1.UpdateFromPoints();
		}
	  }
 

« Last Edit: Dec 26th, 2008 at 4:38am by bemorem »  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #5 - Dec 26th, 2008 at 12:20pm
Print Post  
This works better:

Code
Select All
private void diagramView_MouseMove(object sender, MouseEventArgs e)
{
	PointF points = new PointF();
	points.X = 150;
	points.Y = 150;

	PointF docPoint = diagramView.ClientToDoc(new Point(e.X, e.Y));
	if (IsArc == true)
	{
		diagram.Invalidate(a1.GetRepaintRect(false));
		a1.Style = LinkStyle.Bezier;
		a1.ControlPoints[1] = new PointF(150, 150);
		a1.ControlPoints[2] = docPoint;
		a1.UpdateFromPoints();
	}
}
 



In v4 the FlowChart.Invalidate method might expect device coordinates, so use the DocToClient method there.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #6 - Dec 29th, 2008 at 2:00am
Print Post  
Code
Select All
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using MindFusion.Diagramming.WinForms;

namespace ArcTest2
{
    public partial class Form1 : Form
    {

  bool IsArc;

  Arrow a1;


  public Form1()

  {


InitializeComponent();



flowChart1.AntiAlias = SmoothingMode.AntiAlias;


flowChart1.MeasureUnit = GraphicsUnit.Pixel;


flowChart1.DoubleBuffer = true;




IsArc = false;


toolStripStatusLabel1.Text = "직선 모드";

  }

  // 마우스 무브

  private void Form1_Load(object sender, EventArgs e)

  {


Box b1 = flowChart1.CreateBox(100-5, 200-5, 10, 10);


Box b2 = flowChart1.CreateBox(200-5, 100-5, 10, 10);



a1 = flowChart1.CreateArrow(b1, b2);


a1.PenWidth = 5;


a1.PenColor = Color.Red;

  }

  // 마우스 무브

  private void flowChart1_MouseMove(object sender, MouseEventArgs e)

  {


PointF docPoint = flowChart1.ClientToDoc(new Point(e.X+100, e.Y));


PointF docPoint2 = flowChart1.ClientToDoc(new Point(e.X, e.Y+100));


if (IsArc == true)


{


    flowChart1.Invalidate();



    a1.Style = ArrowStyle.Bezier;


    a1.ControlPoints[0] = new PointF(100, 200);


    a1.ControlPoints[1] = docPoint;


    a1.ControlPoints[2] = docPoint2;


    a1.ControlPoints[3] = new PointF(200, 100);


    a1.UpdateFromPoints();


}

  }

  // 마우스 다운

  private void arcModeToolStripMenuItem_Click(object sender, EventArgs e)

  {


IsArc = true;


toolStripStatusLabel1.Text = "곡선 모드";

  }

  // 마우스업

  private void flowChart1_MouseUp(object sender, MouseEventArgs e)

  {


IsArc = false;


toolStripStatusLabel1.Text = "곡선모드 종료";

  }
    }
}
 



Thanks, Stoyan

Happy New Year~
  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #7 - Jan 14th, 2009 at 7:34am
Print Post  
We tried to make "general arc curve" with cubic bezier.
Cubic Bezier means 4-control point bezier curve.

But It seem that "it is impossible".
We know that Only "90-deg arc" is possible...

So, We have to restart with "CustomDraw + GDI arc". --;

How can make this(Above 4-step mode) with Customdraw ?



  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #8 - Jan 14th, 2009 at 1:23pm
Print Post  
Using the code from this article for calculating the arc parameters from three points:
http://www.sedris.org/sdk_4.1.1/docs/tech/drm/classes/Arc.htm

You can custom-draw the link as shown here:
http://mindfusion.eu/_samples/draw_arc.txt

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #9 - Jan 15th, 2009 at 4:49am
Print Post  
Thanks.

It's very helpful to us.

But like below picture, the curve of specific side is not good work.

Why this?

good side:
http://pic7.ohpy.com/up/elbbs/2009/01/15/161924/539617162/mid_arc1.jpg
good side:
http://pic7.ohpy.com/up/elbbs/2009/01/15/161924/794037410/mid_arc3.jpg

bad side (control point is on opposite ):
http://pic7.ohpy.com/up/elbbs/2009/01/15/161924/1117465244/mid_arc5.jpg

bad side (control point is on opposite ):
http://pic7.ohpy.com/up/elbbs/2009/01/15/161924/1124864219/mid_arc6.jpg

Thanks again.
  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #10 - Jan 15th, 2009 at 9:20am
Print Post  
Seems in the bad cases you should swap the start and end angle values found for the three points. I suppose you could detect you are in the bad case by checking if the middle control point and the median point from the arc lie at different sides of the line defined by ControlPoints[0] and ControlPoints[2]. I.e. you would receive one negative and one positive value when you replace the point coordinates in the line equation.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
bemorem
YaBB Newbies
*
Offline


MacPro Xeon Quad

Posts: 44
Joined: May 3rd, 2007
Re: Linear and Circular mode for Arrow.
Reply #11 - Feb 3rd, 2009 at 4:56am
Print Post  
OK, I succeded with both side arc drwaing by mouse dragging in runtime.

Like below:
http://pic7.ohpy.com/up/elbbs/2009/02/03/161924/572241456/mid_arcfail.jpg

But, When MouseUp, its is not return tothe normal behavior ...
ie, mouse move event or click event is not work.

What is the "recovering method" from customdraw mode ?

Thanks in advance.
  

HW: MacPro Xeon Quad/ 4GB RAM&&OS: WinXP sp3 / .NET 3.5&&Dev: VS 2008 C# sp1&&flowchart .Net ver 4.3.x&&
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Linear and Circular mode for Arrow.
Reply #12 - Feb 3rd, 2009 at 9:06am
Print Post  
That IsArc boolean flag, are you setting it back to false at some point?
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint