Hi,

I need to implement some 'buttons' on a node, so I used some code I found on this forum to create 'child nodes' (see below), but if I size the button node to match the size of the image it seems to be getting clipped!

Have you any idea what's causing this, is the ShapeNode not a rectangle, or is it rounded (image appears to be rounded at top), or what?

Thanks

Brian

[code]
       virtual protected ShapeNode CreateButton(RectangleF rect, Image img, AttachToNode anchor, ButtonId id)
       {
           // This will create a child node to act as a button

           ShapeNode btn = _diagram.Factory.CreateShapeNode(rect);
           btn.HandlesStyle = MindFusion.Diagramming.HandlesStyle.Invisible;
           btn.Transparent = true;
           btn.Image = img;
           btn.ImageAlign = MindFusion.Drawing.ImageAlign.Center;
           btn.AttachTo(this, anchor);
           btn.Locked = true;
           btn.Visible = true;
           btn.IgnoreLayout = true;
           btn.Tag = id;

           this.SubordinateGroup.AutoDeleteItems = true;
           this.SubordinateGroup.Expandable = true;

           return btn;
       }
[/code]

Hi Stoyan,

I was already scaling the image dimensions, and had (I thought) already tried setting the Shape to a rectangle to no avail, but having tried it again this morning it seems to do the trick!

There is still some clipping to the left hand edge (losing a pixel width from a 13 x 13 pixel image) but by adding 0.1 to each dimension (after converting to document coordinates) that seems to fix the problem.

Thanks for your help.

Brian

Hi Brian,

Flowchart.NET deliberately aligns images to the on-screen pixel boundaries by choosing the integer pixel coordinates closest to the floating-point coordinates of the image. Unfortunately, that leads to the images seemingly changing their distance when displayed on screen.

If an image is not aligned to the physical pixel boundaries, the GDI+ DrawImage method renders it blurred, and we have actually implemented the alignment after customers complained about the smeared image appearance.

You could verify this with a similar code -

private void button1_Click(object sender, System.EventArgs e)
{
	diagram.DefaultShape = Shapes.Rectangle;
	diagram.ShapeText = "";
	diagram.AlignToGrid = false;
	ShapeNode main = diagram.Factory.CreateShapeNode(0, 0, 100, 100);

	for (int i = 0; i < 3; ++i)
	{
		ShapeNode btn = diagram.Factory.CreateShapeNode(3 + 12*i, 3, 10, 10);
		btn.AttachTo(main, AttachToNode.TopLeft);
		btn.Transparent = true;
		btn.Image = Image.FromFile(@"D:\Images\Icons\all-icons\ac-icons\ac0001\gif\ac0001-32.gif");
		btn.ImageAlign = ImageAlign.Center;
	}

	for (int i = 0; i < 3; ++i)
	{
		ShapeNode btn = diagram.Factory.CreateShapeNode(3 + 12 * i, 15, 10, 10);
		btn.AttachTo(main, AttachToNode.TopLeft);
		btn.CustomDraw = CustomDraw.Full;
	}
}

private void diagram_DrawNode(object sender, DrawNodeEventArgs e)
{
if (!e.Shadow)
{
Image img = Image.FromFile(@"D:\Images\Icons\all-icons\ac-icons\ac0001\gif\ac0001-32.gif");
e.Graphics.DrawImage(img, e.Bounds.X, e.Bounds.Y);
}
}
 

If you run this and move the main node, you will notice that the images on the first row always appear quite sharp, but the distance between them seems to change, while the images on the second row keep their distance, but appear blurred.

One option for you would be to switch MeasureUnit to Pixel, and after any node is modified, round its coordinates to their closest integer values.

Another option is to glue the smaller button images into a single large toolbar image. E.g.you could do that dynamically by creating a Bitmap object, calling Graphics.FromImage(the bitmap), and using Image.Draw to draw the smaller images. Then when you get the NodeClicked event for the toolbar node, check over what part of the large bitmap the mouse cursor is located and act accordingly.

I hope that helps,
Stoyan

Hi Brian,

I haven't noticed the images changing their size in my test, but that could depend on the screen resolution as well. The control honors the DPI stored with an image, so it also multiplies the image size by the image_dpi / screen_dpi value. This usually leads to a floating-point size, which we just pass to DrawImage.

I suppose you might go with the custom-drawing approach, as for the nodes on the second row from my test code above. This will let you use the graphics.DrawImage(image, x, y) method, which should preserve the image size. If you wish to align the image to the screen's pixel boundaries, you can use the alignedDocPos point value -

Point alignedDevPos = Utilities.DocToDevice(graphics, new PointF(x, y));
PointF alignedDocPos = Utilities.DeviceToDoc(graphics, alignedDevPos);

I could not reproduce the images changing their size, but this could depend on the image size and the exact coordinates you are using. If you save your diagram to xml and email the file to support@mindfusion.eu, we can try to improve the built-in pixel alignment.

I hope that helps,
Stoyan

Hi Stoyan,

I modified your code (see below) to make the nodes the same size as the images, and to butt them up to each other (like a toolbar), and although the images were clipped they were consistent (didn't change when I dragged the parent node).

I then changed the AlignToGrid setting to true (which is what I want for the main nodes) and the button images started clipping differently depending on where I dragged the parent node, giving the impression that the buttons are moving! I guess the child nodes are all being aligned to the grid independantly, and so ARE moving in relation to the parent. Is there any way to keep them fixed to the parent and only align the parent to the grid?

Thanks.

Brian

        private void Test()
        {
            diagram1.DrawNode += new DrawNodeEventHandler(diagram1_DrawNode);
            diagram1.DefaultShape = Shapes.Rectangle;
            diagram1.ShapeText = "";
            diagram1.AlignToGrid = true;// false;
            ShapeNode main = diagram1.Factory.CreateShapeNode(0, 0, 100, 100);

            // image is 16 x 16 pixels
            Size sizButton = new Size(16, 16);

            // get size of toolbar buttons in document coordinates
            Rectangle imgRect = new Rectangle(0, 0, sizButton.Width, sizButton.Height);
            RectangleF buttonRectF = diagramView1.ClientToDoc(imgRect);

            for (int i = 0; i < 3; ++i)
            {
                ShapeNode btn = diagram1.Factory.CreateShapeNode(3 + (buttonRectF.Width * i), 3, buttonRectF.Width, buttonRectF.Height);
                btn.AttachTo(main, AttachToNode.TopLeft);
                //btn.Transparent = false;
                btn.Transparent = true;
                btn.Brush = new MindFusion.Drawing.SolidBrush(Color.Red);
                btn.Image = Properties.Resources.button;// Image.FromFile(@"D:\Images\Icons\all-icons\ac-icons\ac0001\gif\ac0001-32 .gif");
                btn.ImageAlign = ImageAlign.Center;
            }

            for (int i = 0; i < 3; ++i)
            {
                ShapeNode btn = diagram1.Factory.CreateShapeNode(3 + 12 * i, 15, imgRect.Width, imgRect.Height);
                btn.AttachTo(main, AttachToNode.TopLeft);
                btn.CustomDraw = CustomDraw.Full;
            }
        }

        void diagram1_DrawNode(object sender, DrawNodeEventArgs e)
        {
            if (!e.Shadow)
            {
                Image img = Properties.Resources.button;// Image.FromFile(@"D:\Images\Icons\all-icons\ac-icons\ac0001\gif\ac0001-32 .gif");
                e.Graphics.DrawImage(img, e.Bounds.X, e.Bounds.Y);
            }
        }
 

Hi Stoyan,

I decided to go with your suggestion of aligning the grid size to the pixel boundaries, and this seems to have done the trick - although I still needed to adust the button rectangles by 0.1 after converting to document units in order to prevent clipping. :/

Your suggestion of adding a property to specify if the image should be rendered on exact pixel boundaries sounds like a useful option, but in this situation I don't think the blurred images would be acceptable. :/

Thanks for all your help.

Brian