Page Index Toggle Pages: [1] 2 3 ... 5 Send TopicPrint
Very Hot Topic (More than 25 Replies) Operations in the diagram (Read 31405 times)
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Operations in the diagram
Mar 18th, 2020 at 1:09am
Print Post  
Question1:How to extend this crosshair of the diagram to the length and width of the diagram?
Question2:If I drag the window with the mouse to make the window size change, the diagram will also change automatically. How to achieve this?
  

QQzh__e__20200318090517.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #1 - Mar 18th, 2020 at 1:44am
Print Post  
Question1:How to change the color of a line?
Question2:How to import an image, and then change this ShapNode to this image, is there any sample code? Smiley
  

QQzh__e__20200318093918.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Operations in the diagram
Reply #2 - Mar 18th, 2020 at 8:58am
Print Post  
Hi,

If you draw the crosshair from a DrawForeground event handler, it should update the length of the lines automatically on resize. The following works in my test:
Code
Select All
private void diagram_DrawForeground(object sender, MindFusion.Diagramming.Wpf.DiagramEventArgs e)
{
	var r = diagram.Bounds;

	var mx = (r.Left + r.Right) / 2;
	var my = (r.Top + r.Bottom) / 2;

        // Set the color and stroke thickness of the lines
	var pen = new Pen(Brushes.Red, 0.1);

        // Vertical line
	e.Graphics.DrawLine(pen,
	new Point(mx, r.Top), new Point(mx, r.Bottom));
        // Horizontal line
	e.Graphics.DrawLine(pen,
		new Point(r.Left, my), new Point(r.Right, my));
} 



From what i can see from your image, the crosshair actually reaches the bounds of the diagram document. The gap you see is the distance from the edge of the diagram document to the edge of its container (the ruler control in this case). If you need for the diagram document to fill up that space, you can change the diagram bounds from the Ruler's SizeChanged event. You can check out this example: https://mindfusion.eu/Forum/YaBB.pl?num=1383232837/11#11. It does the same with a ScrollViewer control. It will work the same with a Ruler.

For resizing the diagram's container with the window, the WPF layout system will handle that if you haven't set absolute units for the diagram view's dimensions. If you have set absolute size, you need to respond to the window size changed event and adjust your diagram size.

To set an Image for a ShapeNode, just set it's Image property to a BitmapImage instance:
Code
Select All
myNode.Image = new BitmapImage(new Uri(pathToMyImage));
// hide the node's default shape, but keep other elements like adjustment handles:
myNode.Brush = Brushes.Transparent;
myNode.Stroke = Brushes.Transparent; 



Regards,
Lyubo,
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #3 - Mar 19th, 2020 at 1:35am
Print Post  
I think like the crosshairs in this picture, when I drag the image in ShapeNode with the mouse, the ruler moves, the crosshairs don't move with the ruler, and even stay at the horizontal and vertical midpoints of the diagram. How does this work? Is there any sample code?
  

3_19_1.png (Attachment deleted)
3_19.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #4 - Mar 19th, 2020 at 1:36am
Print Post  
Added picture:I think like the crosshairs in this picture, when I drag the image in ShapeNode with the mouse, the ruler moves, the crosshairs don't move with the ruler, and even stay at the horizontal and vertical midpoints of the diagram. How does this work? Is there any sample code?
  

3_19_1.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #5 - Mar 19th, 2020 at 2:06am
Print Post  
How to use the value of two TextBoxes to control the width and height of the ShapeNode in the diagram? Is there any sample code?
  

3_19_2.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #6 - Mar 19th, 2020 at 2:26am
Print Post  
I want to input the X and Y coordinates of the upper left corner of the two TextBoxes to control the position of the image on the ShapeNode. Is there any sample code?
  

3_19_3.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Operations in the diagram
Reply #7 - Mar 19th, 2020 at 6:39am
Print Post  
D wrote on Mar 19th, 2020 at 1:35am:
I think like the crosshairs in this picture, when I drag the image in ShapeNode with the mouse, the ruler moves, the crosshairs don't move with the ruler, and even stay at the horizontal and vertical midpoints of the diagram. How does this work? Is there any sample code?


The crossharis drawing code from the above post puts them in the center of the document bounds. If you want to draw them always at the 0,0 point, change the mx and my variables in the DrawForeground handler to 0, like this:
Code
Select All
var mx = 0; //(r.Left + r.Right) / 2;
var my = 0; //(r.Top + r.Bottom) / 2;
 



D wrote on Mar 19th, 2020 at 2:06am:
How to use the value of two TextBoxes to control the width and height of the ShapeNode in the diagram? Is there any sample code?

D wrote on Mar 19th, 2020 at 2:26am:
I want to input the X and Y coordinates of the upper left corner of the two TextBoxes to control the position of the image on the ShapeNode. Is there any sample code?


Just assign a numeric value from a TextBox to a Rect x, y, width, height value respectively and set that Rect as the selected node's bounds. For example:

Code
Select All
private void Button_Click(object sender, RoutedEventArgs e)
{
        // Check for selected node
	var node = diagram.ActiveItem as ShapeNode;
	if (node == null)
		return;

	double x = node.Bounds.X,
		y = node.Bounds.Y,
		w = node.Bounds.Width,
		h = node.Bounds.Height;

	// Get the new values from the 4 text boxes
	double newValue;
	if (double.TryParse(textBoxX.Text, out newValue))
		x = newValue;
	if (double.TryParse(textBoxY.Text, out newValue))
		y = newValue;
	if (double.TryParse(textBoxW.Text, out newValue))
		w = newValue;
	if (double.TryParse(textBoxH.Text, out newValue))
		h = newValue;

	// Change the node's position / dimensions
	node.SetBounds(new Rect(x, y, w, h), true, true);
} 



Regards,
Lyubo,
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #8 - Mar 19th, 2020 at 7:10am
Print Post  
I did what you said, and as a result, when I drag the picture in ShapeNode, the crosshairs also follow. This is not what I want. What I want is that when dragging the image in ShapeNode, the crosshairs still display in the center of the diagram. Smiley
what should I do? Is there any sample code?
  

3_19_4.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Operations in the diagram
Reply #9 - Mar 19th, 2020 at 7:59am
Print Post  
D wrote on Mar 19th, 2020 at 7:10am:
I did what you said, and as a result, when I drag the picture in ShapeNode, the crosshairs also follow. This is not what I want. What I want is that when dragging the image in ShapeNode, the crosshairs still display in the center of the diagram. Smiley
what should I do? Is there any sample code?


This is not what i suggested. Please check again the sample code above - you need to set mx and my variables to 0 coordinates. The //(r.Left + r.Right) / 2; //(r.Top + r.Bottom) / 2; part is commented out just for easier reference to see what part of the code was modified.

The code in your picture shows you set the crosshair to the center of the diagram document bounds, which may or may not correspond to the 0,0 location.

Regards,
Lyubo,
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #10 - Mar 19th, 2020 at 8:18am
Print Post  
SmileyThanks
However, no matter what operations you do in the diagram, such as scrolling the mouse wheel, dragging, etc., the crosshair is still in the center of the diagram and will not follow it.How can I achieve this?
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #11 - Mar 19th, 2020 at 10:05am
Print Post  
I want to implement this function. Do you have sample code? Smiley
  

3_19_5.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Operations in the diagram
Reply #12 - Mar 19th, 2020 at 12:54pm
Print Post  
Hi,

If you need a crosshair that's always positioned at the center of the viewport, you could modify the DrawForeground to calculate the position by considering the viewport size and not the diagram document size.

Or, much easier, if you need the crosshair to just be static and non-interactive, you can not draw on the diagram at all, and just overlay it over it with basic WPF shapes. The following example just places two Rectangle shapes in the form of the crosshair and sizes them agains the Ruler's container:

Code
Select All
<Grid>
  <diag:Ruler x:Name="ruler">
    <diag:Diagram x:Name="diagram" />
  </diag:Ruler>
  <Rectangle HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="0.5" Height="Auto" Stroke="Red" Margin="18" />
  <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="Auto" Height="0.5" Stroke="Red" Margin="18" />
</Grid> 



Regards,
Lyubo,
MindFusion
  

crosshair.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #13 - Mar 19th, 2020 at 1:26pm
Print Post  
Thanks Smiley
I want to hide the crosshair by pressing the left mouse button, and show it when I release it. How to achieve?
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Operations in the diagram
Reply #14 - Mar 19th, 2020 at 1:27pm
Print Post  
I want to control the zoom of the mouse wheel in the diagram. How to achieve this? Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 3 ... 5
Send TopicPrint