Thank you, Lyubo, for teaching me how to convert the image size to MeasureUni for charts, but I don’t need it at this time. Let me tell you my current situation: if I use imageNode.ImageAlign = ImageAlign.BottomRight; the result is only showing the BottomRight of the node, obviously this is not what I want, I want the whole picture to be displayed. If I use imageNode.ImageAlign = ImageAlign.Fit; the result is that the node contains extra space in addition to the image, which is not the result I want. What I want is the size of imageNode is the size of imageNode.Image. And the bottom and right sides of the picture coincide with the bottom and right sides of another node overlayNode. Please give me sample code.I need it urgently.

Thanks a lot
At present, I do n’t have enough knowledge about this. I need you to teach me a little bit more. The code block in the screenshot reminds me that I cannot use this code correctly. What type of myImage is this? How can I solve the problem that this code cannot be used?

Thank you very much, Lyubo.
At present, I have achieved the effect of screenshot 1, but I have not made the bottom and right sides of the overlayNode coincide with the bottom and right sides of the imageNode. I know the reason is definitely that I have not adjusted the size of the overlayNode or need some other operating. Please tell me what needs to be changed in the code.

// width and height are just some arbitrary values, change as per your requirements
var overlayNodeWidth = 200;
var overlayNodeHeight = 200;

overlayNode = diagram.Factory.CreateShapeNode(imageNode.Bounds.Right - overlayNodeWidth,
  imageNode.Bounds.Bottom - overlayNodeHeight, overlayNodeWidth, overlayNodeHeight);

// rest of your code 

Hi,

Add the following just after the node assignment in your DoubleClick handler:

if (node.MasterGroup != null)
    node = node.MasterGroup.MainItem as DiagramNode; 

That way all double clicks on the attached node will move the master node instead.

Regards,
Lyubo
MindFusion

This function:
private void diagram_MouseWheel (object sender, MouseWheelEventArgs e)
{
var zoomRect = diagram.Viewport;
if (e.Delta <0)
zoomRect.Inflate (10, 10);
else
zoomRect.Inflate (-10, -10);
diagram.ZoomToRect (zoomRect, true);
}

I would like to ask why the image cannot be reduced from the center point of the center line after being reduced to a certain extent. Instead, the picture swings up, down, left and right. However, at this time, if you enlarge the picture again, it will become a picture that swings up, down, left, and right, instead of the picture I want to zoom in and out at the midpoint of the crosshairs. What changes do I need to make in this code block?

Thank you very much, Lyubo.
Does your implementation of PreviewMouseScroll event look like this:
private void diagram_PreviewMouseWheel (object sender, MouseWheelEventArgs e)
{
var zoomRect = diagram.Viewport;
if (diagram.Bounds.Width> = zoomRect.Width && diagram.Bounds.Height> = zoomRect.Height)
diagram.ZoomToRect (zoomRect, true);
if (e.Delta <0)
zoomRect.Inflate (10, 10);
else
zoomRect.Inflate (-10, -10);
diagram.ZoomToRect (zoomRect, true);
e.Handled = true;
}

I currently want to use the values ​​of the two TextBoxes as the length and width of the overlayNode. The code is as follows:
private void RibbonButton_Click (object sender, RoutedEventArgs e)
{
if (overlayNode == null)
return;

double x = overlayNode.Bounds.X,
y = overlayNode.Bounds.Y;
// Get the new values ​​from the 2 text boxes
double newValue;
if (double.TryParse (textBoxX.Text, out newValue))
x = newValue;
if (double.TryParse (textBoxY.Text, out newValue))
y = newValue;
var newBounds = new Rect (imageNode.Bounds.Right-x, imageNode.Bounds.Bottom-y, x, y);
// Change the node's position / dimensions
overlayNode.SetBounds (newBounds, true, true);
}

The result is that the overlayNode has only changed, but no transparency effect has occurred in its size range. The transparency effect is still the 200 size set previously, and I want to remove the border of the overlayNode. What changes do I need to make?