Hi,

Set Diagram.BackBrush to Black brush and apply a semi-transparency mask from a DrawForeground event hander. Same principle as demonstrated here: https://mindfusion.eu/Forum/YaBB.pl?num=1584493773/33#33.

Regards,
Lyubo
MindFusion

Lyubo, I'm waiting for your answer to this question.

Yes, you are right. I have changed it. Now the code is as follows. But it failed to achieve the effect of screenshot 11.jpg, screenshot 22.jpg and screenshot 33.jpg above. What changes do I need to make?
xaml:
<diag:Diagram x:Name="diagram"
AllowDrop="True"
VerticalAlignment="Top"
HorizontalAlignment="Left"
DefaultShape="RoundRect"
Behavior="Pan"
PreviewMouseWheel="diagram_PreviewMouseWheel" GridSizeX="15" GridSizeY="15" RestrictItemsToBounds="InsideOnly" RightButtonActions="None"
Bounds="-600,-600,1500,1500" MouseWheel="diagram_MouseWheel" NodeDoubleClicked="diagram_NodeDoubleClicked" DrawNode="diagram_DrawNode"
BackBrush="Black" DrawForeground="diagram_DrawForeground"
>
</diag:Diagram>

cs:
private void diagram_DrawForeground(object sender, DiagramEventArgs e)
{
if (overlayNode == null)
return;
var graphics = e.Graphics;
var clip = new CombinedGeometry(
GeometryCombineMode.Exclude,
new RectangleGeometry(diagram.Bounds),
new RectangleGeometry(overlayNode.Bounds));

var translate = new TranslateTransform(-diagram.Bounds.X, -diagram.Bounds.Y);
graphics.PushTransform(translate);
graphics.PushClip(clip);
graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, diagram.Bounds);
graphics.Pop();
graphics.Pop();
}

Yes, I tried it, but it still fails. I know it is my problem, please guide me.
private void diagram_DrawForeground(object sender, DiagramEventArgs e)
{
if (overlayNode == null)
return;
var graphics = e.Graphics;
var clip = new CombinedGeometry(
GeometryCombineMode.Exclude,
new RectangleGeometry(diagram.Bounds),
new RectangleGeometry(overlayNode.Bounds));

var translate = new TranslateTransform(-diagram.Bounds.X, -diagram.Bounds.Y);
graphics.PushTransform(translate);
graphics.PushClip(clip);
graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, diagram.Bounds);
graphics.Pop();
graphics.Pop();
}

private void diagram_NodeModifying(object sender, NodeValidationEventArgs e)
{
diagram.InvalidateForeground();
}

I tried it, it still doesn't work
xaml:
<diag:Diagram x:Name="diagram"
AllowDrop="True"
VerticalAlignment="Top"
HorizontalAlignment="Left"
DefaultShape="RoundRect"
Behavior="Pan"
PreviewMouseWheel="diagram_PreviewMouseWheel" GridSizeX="15" GridSizeY="15" RestrictItemsToBounds="InsideOnly" RightButtonActions="None"
Bounds="-600,-600,1500,1500" MouseWheel="diagram_MouseWheel" NodeDoubleClicked="diagram_NodeDoubleClicked" DrawNode="diagram_DrawNode"
BackBrush="Black" DrawForeground="diagram_DrawForeground" NodeModifying="diagram_NodeModifying"
>
</diag:Diagram>
cs:
private void diagram_DrawNode(object sender, DrawNodeEventArgs e)
{
if (e.Node != imageNode)
return;

var graphics = e.Graphics;
var clip = new CombinedGeometry(
GeometryCombineMode.Exclude,
new RectangleGeometry(imageNode.Bounds),
new RectangleGeometry(overlayNode.Bounds));
var translate = new TranslateTransform(-imageNode.Bounds.X, -imageNode.Bounds.Y);
graphics.PushTransform(translate);
graphics.PushClip(clip);
graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, imageNode.Bounds);
graphics.Pop();
graphics.Pop();
}

private void diagram_DrawForeground(object sender, DiagramEventArgs e)
{
if (overlayNode == null)
return;
var graphics = e.Graphics;
var clip = new CombinedGeometry(
GeometryCombineMode.Exclude,
new RectangleGeometry(diagram.Bounds),
new RectangleGeometry(overlayNode.Bounds));

// var translate = new TranslateTransform(-diagram.Bounds.X, -diagram.Bounds.Y);
// graphics.PushTransform(translate);
graphics.PushClip(clip);
graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, diagram.Bounds);
//graphics.Pop();
graphics.Pop();
}

private void diagram_NodeModifying(object sender, NodeValidationEventArgs e)
{
diagram.InvalidateForeground();
}

I even commented out the method DrawNode, but it doesn't work either.
private void diagram_DrawNode(object sender, DrawNodeEventArgs e)
{
//if (e.Node != imageNode)
// return;

//var graphics = e.Graphics;
//var clip = new CombinedGeometry(
// GeometryCombineMode.Exclude,
// new RectangleGeometry(imageNode.Bounds),
// new RectangleGeometry(overlayNode.Bounds));
//var translate = new TranslateTransform(-imageNode.Bounds.X, -imageNode.Bounds.Y);
//graphics.PushTransform(translate);
//graphics.PushClip(clip);
//graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, imageNode.Bounds);
//graphics.Pop();
//graphics.Pop();
}

Is there something wrong?

Hi, Lyubo.

What I want is the effect of these screenshots. The area where overlayNode and diagram intersect is displayed in black. Areas where overlayNode does not intersect diagram are displayed transparently. But does not affect the interaction between imageNode and overlayNode. I used the above code, the program runs normally, but it does not achieve the effect I want: the diagram is not transparent. May I ask what changes need to be made?

Hi,

I'm not entirely sure why you were expecting an answer as a solution to the above case was already provided. There is an opacity mask over the whole diagram and to achieve the exact effect in the above picture, all you needed to do was change the color of the semi-transparent layer. In my test, changing the color to that in the following snippet produces the effect in the attached screenshot:

Color.FromArgb(120, 200, 200, 200) 

Additionally, as pointed out, you need to make sure that the diagram foreground is redrawn after changes that would affect the transparency layer.

The code sample we provided uses overlayNode as bounds for the non-transparent portion of the mask, but it can be any other rectangle that is defined in your requirements. It's meant as a guide on how to achieve a particular effect, not to be the actual source code of your application.

Regards,
Lyubo
MindFusion