Node BackgroundImage Trimming

Hi,

In my application I have a GoNode containing background image. My question is, how can I trim this image as it’s shown in the right side of the picture, when image is dragged around, or it’s outside part of the node can be shown as dotted (but not necessary).

Some code would be very helpful…Big%20smile

Thanks in advance.

When Node “c” is dragged, you want the image to be part of that, but you also want the image to be draggable within (and clipped to the bounds of) the background rectangle?

Yes Jake, exactly.
When Node “c” is dragged, I want the image to be part of that, it should be resizable, draggable within the node, but outside part could be dotted (if possible) which tells that image cannot be outside the node.

Thanks for your effort…

This will get you closer. This doesn’t do the dotted line outside the box, but it does do the clipping.



public class ClippedImage : GoImage {

public override void Paint(Graphics g, GoView view) {

RectangleF rect = this.Bounds;

ClippedNode node = this.Parent as ClippedNode;

if (node != null) {

GoShape bg = node.Background;

if (bg != null) rect = bg.Bounds;

}



// handle clipping, if bounds is different from actual polygon

bool clipping = true; //this.Clipping;

Region oldClip = null;

Region newClip = null;



if (clipping) {

// intersect rect with clipping rect

RectangleF cliprect = IntersectionRect(rect, g.ClipBounds);

oldClip = g.Clip;

newClip = new Region(cliprect);

g.Clip = newClip;

}



base.Paint(g, view);



if (clipping && oldClip != null)

g.Clip = oldClip;

if (newClip != null)

newClip.Dispose();



}

internal static RectangleF IntersectionRect(RectangleF a, RectangleF b) {

float maxx = Math.Max(a.X, b.X);

float maxy = Math.Max(a.Y, b.Y);

float minr = Math.Min(a.X + a.Width, b.X + b.Width);

float minb = Math.Min(a.Y + a.Height, b.Y + b.Height);

return new RectangleF(maxx, maxy, Math.Max(0, minr - maxx), Math.Max(0, minb - maxy));

}

}



Just change “ClippedNode” to your node class and make sure it has a Background property.



Here’s what it looks like:







Note that nothing limits the image from being dragged outisde the Background (see the node on the right)… you’ll have to add that logic.

To get the dotted shadow rectangle:



add this to your node initialization:



GoRectangle shadowRect = new GoRectangle();

shadowRect.Brush = null;

shadowRect.Selectable = false;

Pen pen = new Pen(Color.Gray);

pen.DashStyle = DashStyle.Dot;

shadowRect.Pen = pen;

this.Add(shadowRect);

AddChildName(“shadow”, shadowRect);



and this property:



public GoShape ShadowRect {

get {

return this.FindChild(“shadow”) as GoShape;

}

}



and this to your node’s LayoutChildren:



GoShape shadow = this.ShadowRect;

GoImage image = this.Image;

if (shadow != null && image != null) {

shadow.Bounds = image.Bounds;

}



This is what I need Tongue

Thanks Jake, thanks for your effort!