Author: Christian Lopes
Date: 2010-11-18 14:18:56 -0800 (Thu, 18 Nov 2010)
New Revision: 22907
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/converters/SVGExporter.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Images.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/NodeRenderer.as
Log:
Added node images to SVG (needs more tests and other improvements).
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/converters/SVGExporter.as
===================================================================
---
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/converters/SVGExporter.as
2010-11-18 21:14:23 UTC (rev 22906)
+++
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/converters/SVGExporter.as
2010-11-18 22:18:56 UTC (rev 22907)
@@ -35,6 +35,7 @@
import flare.vis.data.EdgeSprite;
import flare.vis.data.NodeSprite;
+ import flash.display.BitmapData;
import flash.display.CapsStyle;
import flash.display.DisplayObject;
import flash.filters.BitmapFilter;
@@ -42,17 +43,23 @@
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextField;
+ import flash.utils.ByteArray;
+ import mx.graphics.codec.PNGEncoder;
+ import mx.utils.Base64Encoder;
+
import org.cytoscapeweb.model.data.ConfigVO;
import org.cytoscapeweb.model.data.VisualStyleVO;
import org.cytoscapeweb.util.Anchors;
import org.cytoscapeweb.util.ArrowShapes;
import org.cytoscapeweb.util.Fonts;
+ import org.cytoscapeweb.util.Images;
import org.cytoscapeweb.util.LineStyles;
import org.cytoscapeweb.util.NodeShapes;
import org.cytoscapeweb.util.Utils;
import org.cytoscapeweb.util.VisualProperties;
import org.cytoscapeweb.view.components.GraphView;
+ import org.cytoscapeweb.view.render.ImageCache;
/**
* Class that generates an SGV image from the network.
@@ -70,6 +77,7 @@
private var _scale:Number;
private var _shiftX:Number;
private var _shiftY:Number;
+ private var _imgCache:ImageCache = ImageCache.instance;
// ========[ PUBLIC PROPERTIES
]============================================================
@@ -121,7 +129,8 @@
// Create the root element:
var svg:String = '<?xml version="1.0" standalone="no"?>' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>' +
- '<svg width="'+w+'px" height="'+h+'px" x="0px"
y="0px" viewBox="0 0 '+w+' '+h+'" version="1.1"
xmlns="http://www.w3.org/2000/svg";>';
+ '<svg width="'+w+'px" height="'+h+'px" x="0px"
y="0px" viewBox="0 0 '+w+' '+h+'" ' +
+ 'version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>';
// Draw the background:
var bgColor:String =
Utils.rgbColorAsString(_style.getValue(VisualProperties.BACKGROUND_COLOR));
@@ -264,6 +273,8 @@
var sortedNodes:Array = sortByZOrder(nodes);
var c:String, lc:String, a:Number, lw:Number;
var w:Number, h:Number;
+ var nodeSvgShape:String;
+ var img:BitmapData;
for each (var n:NodeSprite in sortedNodes) {
if (!n.visible || n.alpha === 0) continue;
@@ -297,9 +308,39 @@
a = n.alpha;
w = (n.width - n.lineWidth) * _scale;
h = (n.height - n.lineWidth) * _scale;
+
+ svg += '<g fill="'+c+'" fill-opacity="'+a+'" stroke="'+lc+'"
stroke-linejoin="round" stroke-width="'+lw+'" stroke-linecap="butt"
stroke-opacity="'+a+'">';
- svg += '<g fill="'+c+'" fill-opacity="'+a+'" stroke="'+lc+'"
stroke-linejoin="round" stroke-width="'+lw+'" stroke-linecap="butt"
stroke-opacity="'+a+'">';
- svg += drawNodeShape(n.shape, np.x, np.y, w, h);
+ // Basic node shape
+ svg += (nodeSvgShape = drawNodeShape(n.shape, np.x, np.y, w,
h));
+
+ // Node image, if any:
+ img = _imgCache.getImage(n.props.imageUrl);
+
+ if (img != null) {
+ // Rescale image:
+ var bmpSize:Number = Math.min(img.height, img.width);
+ var scale:Number = w/bmpSize;
+ img = Images.resizeBitmap(img, scale);
+
+ // Encode as PNG and get bytes as Base64:
+ var encoder:PNGEncoder = new PNGEncoder();
+ var ba:ByteArray = encoder.encode(img);
+ var b64Enc:Base64Encoder = new Base64Encoder();
+ b64Enc.encodeBytes(ba);
+ var b64:String = b64Enc.toString();
+ var mimeType:String = 'image/PNG';// TODO
+
+ svg += '<clipPath id="clipNode_'+n.data.id+'">';
+ svg += nodeSvgShape;
+ svg += '</clipPath>';
+ svg += '<g clip-path="url(#clipNode_'+n.data.id+')">';
+ svg += '<g transform="matrix(1, 0, 0, 1, '+(np.x-w/2)+',
'+(np.y-h/2)+')">';
+ svg += '<image x="0" y="0" width="'+img.width+'"
height="'+img.height+'" xlink:href="data:'+mimeType+';base64,'+b64+'"/>';
+ svg += '</g>';
+ svg += '</g>';
+ }
+
svg += '</g>';
}
Modified: cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Images.as
===================================================================
--- cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Images.as
2010-11-18 21:14:23 UTC (rev 22906)
+++ cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Images.as
2010-11-18 22:18:56 UTC (rev 22907)
@@ -75,16 +75,16 @@
return bd;
}
-// private function resizeBitmap(bd:BitmapData,
scale:Number):BitmapData {
-// var matrix:Matrix = new Matrix();
-// matrix.scale(scale, scale);
-//
-// var bd2:BitmapData = new BitmapData(bd.width * scale, bd.height
* scale, true, 0x000000);
-// bd2.draw(bd, matrix, null, null, null, true);
-//
-// var bmp:Bitmap = new Bitmap(bd2, PixelSnapping.NEVER, true);
-//
-// return bmp.bitmapData;
-// }
+ public static function resizeBitmap(bd:BitmapData,
scale:Number):BitmapData {
+ var matrix:Matrix = new Matrix();
+ matrix.scale(scale, scale);
+
+ var bd2:BitmapData = new BitmapData(bd.width * scale, bd.height *
scale, true, 0x000000);
+ bd2.draw(bd, matrix, null, null, null, true);
+
+ var bmp:Bitmap = new Bitmap(bd2, PixelSnapping.NEVER, true);
+
+ return bmp.bitmapData;
+ }
}
}
\ No newline at end of file
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/NodeRenderer.as
===================================================================
---
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/NodeRenderer.as
2010-11-18 21:14:23 UTC (rev 22906)
+++
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/NodeRenderer.as
2010-11-18 22:18:56 UTC (rev 22907)
@@ -32,7 +32,6 @@
import flare.vis.data.DataSprite;
import flare.vis.data.render.ShapeRenderer;
- import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
@@ -45,7 +44,6 @@
import org.cytoscapeweb.ApplicationFacade;
import org.cytoscapeweb.model.ConfigProxy;
import org.cytoscapeweb.model.GraphProxy;
- import org.cytoscapeweb.util.Images;
import org.cytoscapeweb.util.NodeShapes;
@@ -163,10 +161,9 @@
var bd:BitmapData = _imgCache.getImage(url);
if (bd != null) {
- var maxZoom:Number = configProxy.maxZoom;
-
// Reduce the image, if it is too large, to avoid some
rendering issues:
// const MAX_BMP_SCALE:uint = 30;
+// var maxZoom:Number = configProxy.maxZoom;
// var zoom:Number = graphProxy.zoom;
// var maxBmpSize:Number = size * zoom * MAX_BMP_SCALE;
//
@@ -178,15 +175,12 @@
// TODO: only if "tofit_cropping" option:
// bd = Images.resizeBitmapToFit(bd, size*maxZoom,
size*maxZoom);
var bmpSize:Number = Math.min(bd.height, bd.width);
-
- var scale:Number = size/bmpSize;
+ var scale:Number = size/bmpSize;
var m:Matrix = new Matrix();
m.scale(scale, scale);
m.translate(-(bd.width*scale)/2, -(bd.height*scale)/2);
- var b:Bitmap = new Bitmap();
-
d.graphics.beginBitmapFill(bd, m, false, true);
drawShape(d, d.shape, size);
d.graphics.endFill();
--
You received this message because you are subscribed to the Google Groups
"cytoscape-cvs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/cytoscape-cvs?hl=en.
