Applying a background image to the GraphCanvasComponent

The easiest way to set a background image on the graph is to set the GraphCanvasComponent over the image, e.g. like:

<mx:Canvas width="100%" height="100%">
    <mx:Image source="imagefile" width="100%" height="100%"/>
    <yworks:GraphCanvasComponent id="graphCanvas" width="100%" height="100% backgroundAlpha="0.0"/>
</mx:Canvas>

This image, however, is not part of the graph canvas and thus does not move or zoom together with the graph. It is also not printed or exported together with the graph. While this may be sufficient for a some cases (a logo, e.g.), drawing background images that should move or zoom together with the graph or should be printed, requires a little more effort:

yFiles FLEX 1.7 and higher: adding an IDisplayObjectCreator

Background images on the GraphCanvasComponent, e.g. for displaying a map or a grid, can be added by using an implementation of com.yworks.canvas.drawing.IDisplayObjectCreator. The following code shows a simple implementation which uses an embedded image as source:

/**
 * Paintable which draws an embedded gif image
 */
public class BackgroundCreator implements IDisplayObjectCreator
{

  [Embed(source="bg.gif")]
  private static var bgImg:Class;

  private var imgInstance:DisplayObject = new bgImg();

  public function createDisplayObject(context:IDisplayObjectContext):DisplayObject {
    updateLayout();
    return imgInstance;
  }

  public function updateDisplayObject(oldDisplayObject:DisplayObject,
                                      context:IDisplayObjectContext):DisplayObject {
    if (oldDisplayObject == imgInstance) {
      updateLayout();
      return oldDisplayObject;
    }
    return createDisplayObject(context);
  }
}

The method createDisplayObject returns a DisplayObject which should be added to the canvas. When a repaint is necessary the yFiles FLEX rendering mechanism calls updateDisplayObject. This method might either return a new DisplayObject or update the old one which is passed to the method as paramter oldDisplayObject.

As source image, all image formats supported by Adobe FLEX can be used without changing the syntax, i.e. not only bitmap based images as gif, jpg and png, but also scalable svg and swf images. See the Adobe FLEX documentation for the supported image formats.

Aside from drawing images one can also draw lines, circles, or text by creating an instance of YDisplayObject and use its YGraphics context's drawing methods.

To add the display object creator to the canvas, one has to add the IDisplayObjectCreator to the graph.If the image should be scaled and moved around with the graph, you also have to add a listener for changes of the viewport:

var obj:ICanvasObject = graphCanvas.addCanvasObject(
                                       new BackgroundCreator(),
                                       CanvasObjectDescriptor.getInstance(),
                                       graphCanvas.backgroundGroup);
graphCanvas.addEventListener(CanvasEvent.VIEW_PORT_CHANGED, function(event:Event):void {
      obj.dirty = true;
      graphCanvas.treePartiallyDirty = true;
      graphCanvas.invalidateDisplayList();
});
graphCanvas.addEventListener(CanvasEvent.ZOOM_CHANGED, function(event:Event):void {
      obj.dirty = true;
      graphCanvas.treePartiallyDirty = true;
      graphCanvas.invalidateDisplayList();
});

If one just wants to add a static background image, the image can be added the following way:

addDisplayObjectCreator( new BackgroundCreator(), graphCanvas.backgroundGroup );

yFiles FLEX 1.6 and lower: adding an IPaintable

With older yFiles FLEX versions painting background images on the GraphCanvasComponent, e.g. for displaying a map or a grid, can be achieved by using an implementation of com.yworks.canvas.drawing.IPaintable. The following code shows a simple implementation which uses an embedded image as source:

/**
 * Paintable which draws an embedded gif image
 */
public class BackgroundPaintable implements IPaintable
{

  [Embed(source="bg.gif")]
  private static var bgImg:Class;

  private var imgInstance:DisplayObject = new bgImg();

  public function paint(g:YGraphics, ctx:IPaintContext):void {
    g.drawImage( imgInstance,0,0,imgInstance.width,imgInstance.height );
  }

}

As source image, all image formats supported by Adobe FLEX can be used without changing the syntax, i.e. not only bitmap based images as gif, jpg and png, but also scalable svg and swf images. See the Adobe FLEX documentation for the supported image formats.

Aside from drawing images one can also draw lines, circles, or text in the paintables paint() method using YGraphics's drawing methods.

To add the paintable to the canvas, one has to add the paintable to the graph.If the image should be scaled and moved around with the graph, you also have to add a listener for changes of the viewport:

var obj:ICanvasObject = graphCanvas.addCanvasObject(
                                       new BackgroundPaintable(),
                                       CanvasObjectDescriptor.getInstance(),
                                       graphCanvas.backgroundGroup);
graphCanvas.addEventListener(CanvasEvent.VIEW_PORT_CHANGED, function(event:Event):void {
      obj.dirty = true;
      graphCanvas.treePartiallyDirty = true;
      graphCanvas.invalidateDisplayList();
});
graphCanvas.addEventListener(CanvasEvent.ZOOM_CHANGED, function(event:Event):void {
      obj.dirty = true;
      graphCanvas.treePartiallyDirty = true;
      graphCanvas.invalidateDisplayList();
});

If one just wants to add a static background image, the image can be added the following way:

graphCanvas.addPaintable( new BackgroundPaintable(), graphCanvas.backgroundGroup );