Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to use the mask (Read 2557 times)
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
How to use the mask
Apr 9th, 2020 at 3:25pm
Print Post  
Hi All,

I am currently evaluating the wpf drawing component, and I must say that I am impressed.

However, there is one thing, I am using diagram to create node A and node B. Node A has already done the transparency effect.

I want the diagram to be as transparent as node A. But at the moment I have not been able to do it.

Any assistance will be greatly appreciated.

Cheers,

Jack
  

NodeA_B.png ( 87 KB | 126 Downloads )
NodeA_B.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use the mask
Reply #1 - Apr 10th, 2020 at 5:12am
Print Post  
Hello,

Use the code already provided in this thread: https://mindfusion.eu/Forum/YaBB.pl?num=1586159696

Code
Select All
<diag:Ruler x:Name="ruler" Unit="Millimeter" Grid.Row="1">
    <diag:Diagram x:Name="diagram" Behavior="PanAndModify" Bounds="-600,-600,1500,1500" MeasureUnit="Millimeter" BackBrush="Black"
        DrawForeground="diagram_DrawForeground"NodeModifying="diagram_NodeModifying"/>
</diag:Ruler> 



Code
Select All
private void diagram_DrawForeground(object sender, DiagramEventArgs e)
{
	if (overlayNode == null) // overlayNode is the smaller node in the diagram
		return;
	var graphics = e.Graphics;
	var clip = new CombinedGeometry(
		GeometryCombineMode.Exclude,
		new RectangleGeometry(diagram.Bounds),
		new RectangleGeometry(overlayNode.Bounds));

	graphics.PushClip(clip);
	graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 200, 200, 200)), null, diagram.Bounds);
	graphics.Pop();
}

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



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


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: How to use the mask
Reply #2 - Apr 10th, 2020 at 7:32am
Print Post  
I have tried many times. What is puzzling is that once the program is run, it then returns immediately after entering diagram_DrawForeground and does not respond to the diagram_NodeModifying event.. May I ask Lyubo, can you tell me your email account? I want to send you the project I'm working on now, help me see where it's done wrong, and wonder why I didn't make the diagram semi-transparent.
private void diagram_DrawForeground(object sender, DiagramEventArgs e)
{
if (overlayNode == null) // overlayNode is the smaller node in the diagram
return;
var graphics = e.Graphics;
var clip = new CombinedGeometry(
GeometryCombineMode.Exclude,
new RectangleGeometry(diagram.Bounds),
new RectangleGeometry(overlayNode.Bounds));

graphics.PushClip(clip);
graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 200, 200, 200)), null, diagram.Bounds);
graphics.Pop();
}

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

//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();
//}
  

4_10.png ( 260 KB | 119 Downloads )
4_10.png
4_10_1.png ( 153 KB | 124 Downloads )
4_10_1.png
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: How to use the mask
Reply #3 - Apr 10th, 2020 at 7:47am
Print Post  
Please send me your test program to let me know why I still can't achieve the mask effect of screenshot opacity_001.png.
  

opacity_001_001.png ( 227 KB | 120 Downloads )
opacity_001_001.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use the mask
Reply #4 - Apr 10th, 2020 at 8:42am
Print Post  
Hello,

It appears you're creating your nodes at a later time. You need to invalidate the diagram's foreground after you've created your nodes, to trigger a repaint. Calling diagram.InvalidateForeground(); after creating your nodes will do that.

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


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: How to use the mask
Reply #5 - Apr 10th, 2020 at 9:04am
Print Post  
Yes, you are right. After my WPF program runs, I first execute the diagram_DrawForeground and then create the node.When creating a node, naturally calls diagram. InvalidateForeground ();Causes the reexecution of the diagram_DrawForeground.How do I invalidate the diagram_DrawForeground while the WPF program is running?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to use the mask
Reply #6 - Apr 10th, 2020 at 10:27am
Print Post  
Hello,

The foreground is invalidated by calling diagram.InvalidateForeground();. If you call it after creating your overlayNode, it will cause a repaint and apply the opacity mask as then overlayNode will not be null as was in your screenshot.

You can download a simple application that shows how to achieve this (and the requests from your several other threads) here: https://mindfusion.eu/_samples/ZoomExample.zip

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


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: How to use the mask
Reply #7 - Apr 10th, 2020 at 12:44pm
Print Post  
Smiley Smiley Smiley Smiley Smiley Smiley
Thank you very much. I did everything you said.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint