(UTC)
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Diagram transparency (Read 7732 times)
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Diagram transparency
Nov 5th, 2014 at 9:48am
Print Post  
Hi,
Is there a way to set the diagram background to transparent? (I mean the whole diagram, not just nodes)
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #1 - Nov 5th, 2014 at 11:07am
Print Post  
Hi,

Call diagram.setBackBrush("transparent"); This will show the color of the container div used for scrolling.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #2 - Nov 5th, 2014 at 12:42pm
Print Post  
Thanks Stoyan, that nearly worked -  I think my diagram background is now transparent but now there are some parts of my shape that are not transparent.

The shape I have built should be similar to your built-in IsoProcess shape.
  
mindfusion3.png (Attachment deleted)
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #3 - Nov 5th, 2014 at 12:55pm
Print Post  
Weird, it only seems to be the last node that doesn't get the transparency set (my previous screenshot only had one element ie. it was the first and last)
  
mindfusion4.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #4 - Nov 5th, 2014 at 1:39pm
Print Post  
That might be some kind of selection frame, what happens if you call node.setSelected(false) for it? Or try setting Behavior to Modify and moving the last node to see if there's isn't some rectangular node behind it.
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #5 - Nov 6th, 2014 at 6:01am
Print Post  
setting node.setSelected(false) has no effect, I don't think the node is selected anyway because I don't see handles.

Using behaviour modify:
1. Clicking the node, it get selected but still has the background.
2. As soon as I move the node it disappears
3. I can't deselect the node after but that may be unrelated.

This is a custom shape node and it happens when I set diagram.setBackBrush("transparent");
  
mindfusion1_001.png (Attachment deleted)
mindfusion2_001.png (Attachment deleted)
mindfusion3_001.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #6 - Nov 6th, 2014 at 8:58am
Print Post  
Could you post your Shape definition and node set-up code?
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #7 - Nov 6th, 2014 at 9:31am
Print Post  
I am using this routine to build my nodes:

Code (Javascript)
Select All
        function CreateShape(bounds, nodeName){

            var arrowShape = new MindFusion.Diagramming.Shape(
                                    {outline: 'M0,100 L90,100 L100,50 L90,0 L0,0 L10,50 L0,100 Z',
                                     id: 'MyProcessShape'
                                    });

            var brush1 =
            {
             type: "LinearGradientBrush",
             color1: "White",
             color2: "#203870",
             angle: 90
            };

            var diagramNode = diagram.getFactory().createShapeNode(bounds);
            diagramNode.setText(nodeName);
            diagramNode.setBrush(brush1);
            diagramNode.setShape(arrowShape);

            var Font = MindFusion.Drawing.Font;
            diagramNode.setFont(new Font("Arial", 8 * 25.44 / 72, false, false));

            return diagramNode;
        }
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #8 - Nov 6th, 2014 at 10:36am
Print Post  
This does not show the rectangle for me, could you also post the diagram initialization code in case there's some Diagram property affecting that?
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #9 - Nov 6th, 2014 at 2:18pm
Print Post  
No problem, code attached
  
Code.zip (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #10 - Nov 6th, 2014 at 7:36pm
Print Post  
It turns out our developers have only recently added support for transparent background, now I've managed to reproduce this with last released version 2.1. V2.1 doesn't call context.clearRect but only fill("transparent") in your case, which does nothing, so you are seeing the remains of the original rectangular node shape.

This should work fine if you use the beta version here:
http://mindfusion.eu/Forum/YaBB.pl?num=1413273502

We should be releasing v2.2 in a couple of days. If you can't wait, you might also work around that by replacing Canvas.drawBackground with this version:

Code
Select All
MindFusion.Drawing.Canvas.drawBackground = function() {
    this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
};


The standard function does more things like filling with backBrush and drawing backgroundImage, but that should do if you only need the transparent background.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #11 - Nov 7th, 2014 at 1:18pm
Print Post  
Thanks Stoyan, should this go somewhere special? I put this code in document.ready and it's still the same.

Code (Javascript)
Select All
            diagram.setBackBrush("transparent");
            MindFusion.Drawing.Canvas.drawBackground = function() {
                this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
            };
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Diagram transparency
Reply #12 - Nov 7th, 2014 at 5:56pm
Print Post  
Actually replace it in Diagram.prototype:

Code
Select All
MindFusion.Diagramming.Diagram.prototype.drawBackground = function ()
{
	this.context.clearRect(0, 0, this.bounds.width, this.bounds.height);
};


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: Diagram transparency
Reply #13 - Nov 10th, 2014 at 11:31am
Print Post  
That worked perfectly, thanks Stoyan.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge