<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-draw-engine-SvgExporter'>/**
|
</span> * A utility class for exporting a {@link Ext.draw.Surface Surface} to a string
|
* that may be saved or used for processing on the server.
|
*
|
* @singleton
|
*/
|
Ext.define('Ext.draw.engine.SvgExporter', function(){
|
var commaRe = /,/g,
|
fontRegex = /(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)\s('*.*'*)/,
|
rgbColorRe = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
|
rgbaColorRe = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,([\d\.]+)\)/g,
|
surface, len, width, height,
|
|
init = function(s){
|
surface = s;
|
len = surface.length;
|
width = surface.width;
|
height = surface.height;
|
},
|
spriteProcessor = {
|
path: function(sprite){
|
|
var attr = sprite.attr,
|
path = attr.path,
|
pathString = '',
|
props, p, pLen;
|
|
if (Ext.isArray(path[0])) {
|
pLen = path.length;
|
for (p = 0; p < pLen; p++) {
|
pathString += path[p].join(' ');
|
}
|
} else if (Ext.isArray(path)) {
|
pathString = path.join(' ');
|
} else {
|
pathString = path.replace(commaRe,' ');
|
}
|
|
props = toPropertyString({
|
d: pathString,
|
fill: attr.fill || 'none',
|
stroke: attr.stroke,
|
'fill-opacity': attr.opacity,
|
'stroke-width': attr['stroke-width'],
|
'stroke-opacity': attr['stroke-opacity'],
|
"z-index": attr.zIndex,
|
transform: sprite.matrix.toSvg()
|
});
|
|
return '<path ' + props + '/>';
|
},
|
text: function(sprite){
|
|
// TODO
|
// implement multi line support (@see Svg.js tuneText)
|
|
var attr = sprite.attr,
|
match = fontRegex.exec(attr.font),
|
size = (match && match[1]) || "12",
|
// default font family is Arial
|
family = (match && match[3]) || 'Arial',
|
text = attr.text,
|
factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 4,
|
tspanString = '',
|
props;
|
|
sprite.getBBox();
|
tspanString += '<tspan x="' + (attr.x || '') + '" dy="';
|
tspanString += (size/factor)+'">';
|
tspanString += Ext.htmlEncode(text) + '</tspan>';
|
|
|
props = toPropertyString({
|
x: attr.x,
|
y: attr.y,
|
'font-size': size,
|
'font-family': family,
|
'font-weight': attr['font-weight'],
|
'text-anchor': attr['text-anchor'],
|
// if no fill property is set it will be black
|
fill: attr.fill || '#000',
|
'fill-opacity': attr.opacity,
|
transform: sprite.matrix.toSvg()
|
});
|
|
|
|
return '<text '+ props + '>' + tspanString + '</text>';
|
},
|
rect: function(sprite){
|
|
var attr = sprite.attr,
|
props = toPropertyString({
|
x: attr.x,
|
y: attr.y,
|
rx: attr.rx,
|
ry: attr.ry,
|
width: attr.width,
|
height: attr.height,
|
fill: attr.fill || 'none',
|
'fill-opacity': attr.opacity,
|
stroke: attr.stroke,
|
'stroke-opacity': attr['stroke-opacity'],
|
'stroke-width':attr['stroke-width'],
|
transform: sprite.matrix && sprite.matrix.toSvg()
|
});
|
|
return '<rect ' + props + '/>';
|
},
|
circle: function(sprite){
|
|
var attr = sprite.attr,
|
props = toPropertyString({
|
cx: attr.x,
|
cy: attr.y,
|
r: attr.radius,
|
fill: attr.translation.fill || attr.fill || 'none',
|
'fill-opacity': attr.opacity,
|
stroke: attr.stroke,
|
'stroke-opacity': attr['stroke-opacity'],
|
'stroke-width':attr['stroke-width'],
|
transform: sprite.matrix.toSvg()
|
});
|
|
return '<circle ' + props + ' />';
|
},
|
image: function(sprite){
|
|
var attr = sprite.attr,
|
props = toPropertyString({
|
x: attr.x - (attr.width/2 >> 0),
|
y: attr.y - (attr.height/2 >> 0),
|
width: attr.width,
|
height: attr.height,
|
'xlink:href': attr.src,
|
transform: sprite.matrix.toSvg()
|
});
|
|
return '<image ' + props + ' />';
|
}
|
},
|
svgHeader = function(){
|
var svg = '<?xml version="1.0" standalone="yes"?>';
|
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
|
return svg;
|
},
|
svgContent = function(){
|
var svg = '<svg width="'+width+'px" height="'+height+'px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">',
|
defs = '', item, itemsLen, items, gradient,
|
getSvgString, colorstops, stop,
|
coll, keys, colls, k, kLen, key, collI, i, j, stopsLen, sortedItems, za, zb;
|
|
items = surface.items.items;
|
itemsLen = items.length;
|
|
|
getSvgString = function(node){
|
|
var childs = node.childNodes,
|
childLength = childs.length,
|
i = 0,
|
attrLength,
|
j,
|
svgString = '', child, attr, tagName, attrItem;
|
|
for(; i < childLength; i++){
|
child = childs[i];
|
attr = child.attributes;
|
tagName = child.tagName;
|
|
svgString += '<' +tagName;
|
|
for(j = 0, attrLength = attr.length; j < attrLength; j++){
|
attrItem = attr.item(j);
|
svgString += ' '+attrItem.name+'="'+attrItem.value+'"';
|
}
|
|
svgString += '>';
|
|
if(child.childNodes.length > 0){
|
svgString += getSvgString(child);
|
}
|
|
svgString += '</' + tagName + '>';
|
|
}
|
return svgString;
|
};
|
|
|
if(surface.getDefs){
|
defs = getSvgString(surface.getDefs());
|
}else{
|
// IE
|
coll = surface.gradientsColl;
|
if (coll) {
|
keys = coll.keys;
|
colls = coll.items;
|
k = 0;
|
kLen = keys.length;
|
}
|
|
for (; k < kLen; k++) {
|
key = keys[k];
|
collI = colls[k];
|
|
gradient = surface.gradientsColl.getByKey(key);
|
defs += '<linearGradient id="' + key + '" x1="0" y1="0" x2="1" y2="1">';
|
|
var color = gradient.colors.replace(rgbColorRe, 'rgb($1|$2|$3)');
|
color = color.replace(rgbaColorRe, 'rgba($1|$2|$3|$4)')
|
colorstops = color.split(',');
|
for(i=0, stopsLen = colorstops.length; i < stopsLen; i++){
|
stop = colorstops[i].split(' ');
|
color = Ext.draw.Color.fromString(stop[1].replace(/\|/g,','));
|
defs += '<stop offset="'+stop[0]+'" stop-color="' + color.toString() + '" stop-opacity="1"></stop>';
|
}
|
defs += '</linearGradient>';
|
}
|
}
|
|
svg += '<defs>' + defs + '</defs>';
|
|
// thats the background rectangle
|
svg += spriteProcessor.rect({
|
attr: {
|
width: '100%',
|
height: '100%',
|
fill: '#fff',
|
stroke: 'none',
|
opacity: '0'
|
}
|
});
|
|
// Sort the items (stable sort guaranteed)
|
sortedItems = new Array(itemsLen);
|
for(i = 0; i < itemsLen; i++){
|
sortedItems[i] = i;
|
}
|
sortedItems.sort(function (a, b) {
|
za = items[a].attr.zIndex || 0;
|
zb = items[b].attr.zIndex || 0;
|
if (za == zb) {
|
return a - b;
|
}
|
return za - zb;
|
});
|
|
for(i = 0; i < itemsLen; i++){
|
item = items[sortedItems[i]];
|
if(!item.attr.hidden){
|
svg += spriteProcessor[item.type](item);
|
}
|
}
|
|
svg += '</svg>';
|
|
return svg;
|
},
|
toPropertyString = function(obj){
|
var propString = '',
|
key;
|
|
for(key in obj){
|
|
if(obj.hasOwnProperty(key) && obj[key] != null){
|
propString += key +'="'+ obj[key]+'" ';
|
}
|
|
}
|
|
return propString;
|
};
|
|
return {
|
singleton: true,
|
|
<span id='Ext-draw-engine-SvgExporter-method-generate'> /**
|
</span> * Exports the passed surface to a SVG string representation
|
* @param {Ext.draw.Surface} surface The surface to export
|
* @param {Object} [config] Any configuration for the export. Currently this is
|
* unused but may provide more options in the future
|
* @return {String} The SVG as a string
|
*/
|
generate: function(surface, config){
|
config = config || {};
|
init(surface);
|
return svgHeader() + svgContent();
|
}
|
};
|
});</pre>
|
</body>
|
</html>
|
