Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic custom images with text boxes (Read 1738 times)
Florida
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Mar 18th, 2021
custom images with text boxes
May 23rd, 2021 at 6:47pm
Print Post  
I have attached a picture of what I am trying to do but I am not having success in creating the double line upside down triangle with the 4 different places for text: inside image, top of image, a line bar with text on the top right and bottom right side of the line.  What is the best way to create this type of image?  Sometimes I want the bar to appear with the text and sometimes I do not.  I am doing all of the development in WinForms.
  

sampleImage.JPG ( 11 KB | 70 Downloads )
sampleImage.JPG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: custom images with text boxes
Reply #1 - May 24th, 2021 at 9:35am
Print Post  
Hi,

You could use a compound pen to draw the double line. The extra texts could be implemented using attached nodes that follow the moved / resized triangle node:

Code
Select All
DiagramNode TriangleWithLabels(RectangleF bounds)
{
	float xl = bounds.Left;
	float xr = bounds.Right;
	float xm = xl + 3f * bounds.Width / 5f;
	float yt = bounds.Top;
	float yb = bounds.Bottom;
	float ym = yt + 2f * bounds.Height / 5f;

	var triangle = diagram.Factory.CreateShapeNode(
		xl, ym, xm - xl, yb - ym - 2, Shapes.Merge);
	triangle.Brush = new MindFusion.Drawing.SolidBrush(Color.Transparent);
	triangle.ShadowBrush = triangle.Brush;
	triangle.Pen = new MindFusion.Drawing.Pen(Color.Black, 2f);
	triangle.Pen.CompoundArray = new[] { 0.0f, 0.1f, 0.9f, 1f };
	triangle.Text = "1";

	var topText = diagram.Factory.CreateShapeNode(
		xl, yt, xm - xl, ym - yt, Shapes.Rectangle);
	topText.Transparent = true;
	topText.EnabledHandles = AdjustmentHandles.None;
	// or .Locked = true
	topText.Text = "text";

	var bar = diagram.Factory.CreateShapeNode(
		xm + 1, yt, 2, bounds.Height, Shapes.Rectangle);
	bar.Brush = new MindFusion.Drawing.SolidBrush(Color.Black);
	bar.ShadowBrush = triangle.ShadowBrush;
	bar.EnabledHandles = AdjustmentHandles.None;
	// or .Locked = true

	var topRightText = diagram.Factory.CreateShapeNode(
		xm + 2, yt, xr - xm, ym - yt, Shapes.Rectangle);
	topRightText.Transparent = true;
	topRightText.EnabledHandles = AdjustmentHandles.None;
	// or .Locked = true
	topRightText.Text = "text";

	var bottomRightText = diagram.Factory.CreateShapeNode(
		xm + 2, ym, xr - xm, yb - ym, Shapes.Rectangle);
	bottomRightText.Transparent = true;
	bottomRightText.EnabledHandles = AdjustmentHandles.None;
	// or .Locked = true
	bottomRightText.Text = "text";

	topText.AttachTo(triangle, AttachToNode.TopRight);
	topRightText.AttachTo(triangle, AttachToNode.TopRight);
	bottomRightText.AttachTo(triangle, AttachToNode.BottomRight);

	bar.AttachTo(triangle,
		GroupAnchorStyles.Top | GroupAnchorStyles.Bottom | GroupAnchorStyles.Right);

	return triangle;
} 



If you prefer rendering all that in a single node object, you could custom-draw it with the System.Drawing API, either by using standard ShapeNode and handling DrawNode event, or in a custom class that overrides the DrawLocal method. That should also be possible to implement via a CompositeNode that contains ShapeComponents for triangle and bar, and TextComponents for the labels.

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