sch_test/mxclient/js/util/mxXmlCanvas2D.js

1218 lines
28 KiB
JavaScript

/**
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
* Class: mxXmlCanvas2D
*
* Base class for all canvases. The following methods make up the public
* interface of the canvas 2D for all painting in mxGraph:
*
* - <save>, <restore>
* - <scale>, <translate>, <rotate>
* - <setAlpha>, <setFillAlpha>, <setStrokeAlpha>, <setFillColor>, <setGradient>,
* <setStrokeColor>, <setStrokeWidth>, <setDashed>, <setDashPattern>, <setLineCap>,
* <setLineJoin>, <setMiterLimit>
* - <setFontColor>, <setFontBackgroundColor>, <setFontBorderColor>, <setFontSize>,
* <setFontFamily>, <setFontStyle>
* - <setShadow>, <setShadowColor>, <setShadowAlpha>, <setShadowOffset>
* - <rect>, <roundrect>, <ellipse>, <image>, <text>
* - <begin>, <moveTo>, <lineTo>, <quadTo>, <curveTo>
* - <stroke>, <fill>, <fillAndStroke>
*
* <mxAbstractCanvas2D.arcTo> is an additional method for drawing paths. This is
* a synthetic method, meaning that it is turned into a sequence of curves by
* default. Subclassers may add native support for arcs.
*
* Constructor: mxXmlCanvas2D
*
* Constructs a new abstract canvas.
*/
function mxXmlCanvas2D(root)
{
mxAbstractCanvas2D.call(this);
/**
* Variable: root
*
* Reference to the container for the SVG content.
*/
this.root = root;
// Writes default settings;
this.writeDefaults();
};
/**
* Extends mxAbstractCanvas2D
*/
mxUtils.extend(mxXmlCanvas2D, mxAbstractCanvas2D);
/**
* Variable: textEnabled
*
* Specifies if text output should be enabled. Default is true.
*/
mxXmlCanvas2D.prototype.textEnabled = true;
/**
* Variable: compressed
*
* Specifies if the output should be compressed by removing redundant calls.
* Default is true.
*/
mxXmlCanvas2D.prototype.compressed = true;
/**
* Function: writeDefaults
*
* Writes the rendering defaults to <root>:
*/
mxXmlCanvas2D.prototype.writeDefaults = function()
{
var elem;
// Writes font defaults
elem = this.createElement('fontfamily');
elem.setAttribute('family', mxConstants.DEFAULT_FONTFAMILY);
this.root.appendChild(elem);
elem = this.createElement('fontsize');
elem.setAttribute('size', mxConstants.DEFAULT_FONTSIZE);
this.root.appendChild(elem);
// Writes shadow defaults
elem = this.createElement('shadowcolor');
elem.setAttribute('color', mxConstants.SHADOWCOLOR);
this.root.appendChild(elem);
elem = this.createElement('shadowalpha');
elem.setAttribute('alpha', mxConstants.SHADOW_OPACITY);
this.root.appendChild(elem);
elem = this.createElement('shadowoffset');
elem.setAttribute('dx', mxConstants.SHADOW_OFFSET_X);
elem.setAttribute('dy', mxConstants.SHADOW_OFFSET_Y);
this.root.appendChild(elem);
};
/**
* Function: format
*
* Returns a formatted number with 2 decimal places.
*/
mxXmlCanvas2D.prototype.format = function(value)
{
return parseFloat(parseFloat(value).toFixed(2));
};
/**
* Function: createElement
*
* Creates the given element using the owner document of <root>.
*/
mxXmlCanvas2D.prototype.createElement = function(name)
{
return this.root.ownerDocument.createElement(name);
};
/**
* Function: save
*
* Saves the drawing state.
*/
mxXmlCanvas2D.prototype.save = function()
{
if (this.compressed)
{
mxAbstractCanvas2D.prototype.save.apply(this, arguments);
}
this.root.appendChild(this.createElement('save'));
};
/**
* Function: restore
*
* Restores the drawing state.
*/
mxXmlCanvas2D.prototype.restore = function()
{
if (this.compressed)
{
mxAbstractCanvas2D.prototype.restore.apply(this, arguments);
}
this.root.appendChild(this.createElement('restore'));
};
/**
* Function: scale
*
* Scales the output.
*
* Parameters:
*
* scale - Number that represents the scale where 1 is equal to 100%.
*/
mxXmlCanvas2D.prototype.scale = function(value)
{
var elem = this.createElement('scale');
elem.setAttribute('scale', value);
this.root.appendChild(elem);
};
/**
* Function: translate
*
* Translates the output.
*
* Parameters:
*
* dx - Number that specifies the horizontal translation.
* dy - Number that specifies the vertical translation.
*/
mxXmlCanvas2D.prototype.translate = function(dx, dy)
{
var elem = this.createElement('translate');
elem.setAttribute('dx', this.format(dx));
elem.setAttribute('dy', this.format(dy));
this.root.appendChild(elem);
};
/**
* Function: rotate
*
* Rotates and/or flips the output around a given center. (Note: Due to
* limitations in VML, the rotation cannot be concatenated.)
*
* Parameters:
*
* theta - Number that represents the angle of the rotation (in degrees).
* flipH - Boolean indicating if the output should be flipped horizontally.
* flipV - Boolean indicating if the output should be flipped vertically.
* cx - Number that represents the x-coordinate of the rotation center.
* cy - Number that represents the y-coordinate of the rotation center.
*/
mxXmlCanvas2D.prototype.rotate = function(theta, flipH, flipV, cx, cy)
{
var elem = this.createElement('rotate');
if (theta != 0 || flipH || flipV)
{
elem.setAttribute('theta', this.format(theta));
elem.setAttribute('flipH', (flipH) ? '1' : '0');
elem.setAttribute('flipV', (flipV) ? '1' : '0');
elem.setAttribute('cx', this.format(cx));
elem.setAttribute('cy', this.format(cy));
this.root.appendChild(elem);
}
};
/**
* Function: setAlpha
*
* Sets the current alpha.
*
* Parameters:
*
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2D.prototype.setAlpha = function(value)
{
if (this.compressed)
{
if (this.state.alpha == value)
{
return;
}
mxAbstractCanvas2D.prototype.setAlpha.apply(this, arguments);
}
var elem = this.createElement('alpha');
elem.setAttribute('alpha', this.format(value));
this.root.appendChild(elem);
};
/**
* Function: setFillAlpha
*
* Sets the current fill alpha.
*
* Parameters:
*
* value - Number that represents the new fill alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2D.prototype.setFillAlpha = function(value)
{
if (this.compressed)
{
if (this.state.fillAlpha == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFillAlpha.apply(this, arguments);
}
var elem = this.createElement('fillalpha');
elem.setAttribute('alpha', this.format(value));
this.root.appendChild(elem);
};
/**
* Function: setStrokeAlpha
*
* Sets the current stroke alpha.
*
* Parameters:
*
* value - Number that represents the new stroke alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)
{
if (this.compressed)
{
if (this.state.strokeAlpha == value)
{
return;
}
mxAbstractCanvas2D.prototype.setStrokeAlpha.apply(this, arguments);
}
var elem = this.createElement('strokealpha');
elem.setAttribute('alpha', this.format(value));
this.root.appendChild(elem);
};
/**
* Function: setFillColor
*
* Sets the current fill color.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setFillColor = function(value)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.compressed)
{
if (this.state.fillColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFillColor.apply(this, arguments);
}
var elem = this.createElement('fillcolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
};
/**
* Function: setGradient
*
* Sets the gradient. Note that the coordinates may be ignored by some implementations.
*
* Parameters:
*
* color1 - Hexadecimal representation of the start color.
* color2 - Hexadecimal representation of the end color.
* x - X-coordinate of the gradient region.
* y - y-coordinate of the gradient region.
* w - Width of the gradient region.
* h - Height of the gradient region.
* direction - One of <mxConstants.DIRECTION_NORTH>, <mxConstants.DIRECTION_EAST>,
* <mxConstants.DIRECTION_SOUTH> or <mxConstants.DIRECTION_WEST>.
* alpha1 - Optional alpha of the start color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
* alpha2 - Optional alpha of the end color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2D.prototype.setGradient = function(color1, color2, x, y, w, h, direction, alpha1, alpha2)
{
if (color1 != null && color2 != null)
{
mxAbstractCanvas2D.prototype.setGradient.apply(this, arguments);
var elem = this.createElement('gradient');
elem.setAttribute('c1', color1);
elem.setAttribute('c2', color2);
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
// Default direction is south
if (direction != null)
{
elem.setAttribute('direction', direction);
}
if (alpha1 != null)
{
elem.setAttribute('alpha1', alpha1);
}
if (alpha2 != null)
{
elem.setAttribute('alpha2', alpha2);
}
this.root.appendChild(elem);
}
};
/**
* Function: setStrokeColor
*
* Sets the current stroke color.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setStrokeColor = function(value)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.compressed)
{
if (this.state.strokeColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setStrokeColor.apply(this, arguments);
}
var elem = this.createElement('strokecolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
};
/**
* Function: setStrokeWidth
*
* Sets the current stroke width.
*
* Parameters:
*
* value - Numeric representation of the stroke width.
*/
mxXmlCanvas2D.prototype.setStrokeWidth = function(value)
{
if (this.compressed)
{
if (this.state.strokeWidth == value)
{
return;
}
mxAbstractCanvas2D.prototype.setStrokeWidth.apply(this, arguments);
}
var elem = this.createElement('strokewidth');
elem.setAttribute('width', this.format(value));
this.root.appendChild(elem);
};
/**
* Function: setDashed
*
* Enables or disables dashed lines.
*
* Parameters:
*
* value - Boolean that specifies if dashed lines should be enabled.
* value - Boolean that specifies if the stroke width should be ignored
* for the dash pattern. Default is false.
*/
mxXmlCanvas2D.prototype.setDashed = function(value, fixDash)
{
if (this.compressed)
{
if (this.state.dashed == value)
{
return;
}
mxAbstractCanvas2D.prototype.setDashed.apply(this, arguments);
}
var elem = this.createElement('dashed');
elem.setAttribute('dashed', (value) ? '1' : '0');
if (fixDash != null)
{
elem.setAttribute('fixDash', (fixDash) ? '1' : '0');
}
this.root.appendChild(elem);
};
/**
* Function: setDashPattern
*
* Sets the current dash pattern. Default is '3 3'.
*
* Parameters:
*
* value - String that represents the dash pattern, which is a sequence of
* numbers defining the length of the dashes and the length of the spaces
* between the dashes. The lengths are relative to the line width - a length
* of 1 is equals to the line width.
*/
mxXmlCanvas2D.prototype.setDashPattern = function(value)
{
if (this.compressed)
{
if (this.state.dashPattern == value)
{
return;
}
mxAbstractCanvas2D.prototype.setDashPattern.apply(this, arguments);
}
var elem = this.createElement('dashpattern');
elem.setAttribute('pattern', value);
this.root.appendChild(elem);
};
/**
* Function: setLineCap
*
* Sets the line cap. Default is 'flat' which corresponds to 'butt' in SVG.
*
* Parameters:
*
* value - String that represents the line cap. Possible values are flat, round
* and square.
*/
mxXmlCanvas2D.prototype.setLineCap = function(value)
{
if (this.compressed)
{
if (this.state.lineCap == value)
{
return;
}
mxAbstractCanvas2D.prototype.setLineCap.apply(this, arguments);
}
var elem = this.createElement('linecap');
elem.setAttribute('cap', value);
this.root.appendChild(elem);
};
/**
* Function: setLineJoin
*
* Sets the line join. Default is 'miter'.
*
* Parameters:
*
* value - String that represents the line join. Possible values are miter,
* round and bevel.
*/
mxXmlCanvas2D.prototype.setLineJoin = function(value)
{
if (this.compressed)
{
if (this.state.lineJoin == value)
{
return;
}
mxAbstractCanvas2D.prototype.setLineJoin.apply(this, arguments);
}
var elem = this.createElement('linejoin');
elem.setAttribute('join', value);
this.root.appendChild(elem);
};
/**
* Function: setMiterLimit
*
* Sets the miter limit. Default is 10.
*
* Parameters:
*
* value - Number that represents the miter limit.
*/
mxXmlCanvas2D.prototype.setMiterLimit = function(value)
{
if (this.compressed)
{
if (this.state.miterLimit == value)
{
return;
}
mxAbstractCanvas2D.prototype.setMiterLimit.apply(this, arguments);
}
var elem = this.createElement('miterlimit');
elem.setAttribute('limit', value);
this.root.appendChild(elem);
};
/**
* Function: setFontColor
*
* Sets the current font color. Default is '#000000'.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setFontColor = function(value)
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.compressed)
{
if (this.state.fontColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontColor.apply(this, arguments);
}
var elem = this.createElement('fontcolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
}
};
/**
* Function: setFontBackgroundColor
*
* Sets the current font background color.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.compressed)
{
if (this.state.fontBackgroundColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontBackgroundColor.apply(this, arguments);
}
var elem = this.createElement('fontbackgroundcolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
}
};
/**
* Function: setFontBorderColor
*
* Sets the current font border color.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setFontBorderColor = function(value)
{
if (this.textEnabled)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.compressed)
{
if (this.state.fontBorderColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontBorderColor.apply(this, arguments);
}
var elem = this.createElement('fontbordercolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
}
};
/**
* Function: setFontSize
*
* Sets the current font size. Default is <mxConstants.DEFAULT_FONTSIZE>.
*
* Parameters:
*
* value - Numeric representation of the font size.
*/
mxXmlCanvas2D.prototype.setFontSize = function(value)
{
if (this.textEnabled)
{
if (this.compressed)
{
if (this.state.fontSize == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontSize.apply(this, arguments);
}
var elem = this.createElement('fontsize');
elem.setAttribute('size', value);
this.root.appendChild(elem);
}
};
/**
* Function: setFontFamily
*
* Sets the current font family. Default is <mxConstants.DEFAULT_FONTFAMILY>.
*
* Parameters:
*
* value - String representation of the font family. This handles the same
* values as the CSS font-family property.
*/
mxXmlCanvas2D.prototype.setFontFamily = function(value)
{
if (this.textEnabled)
{
if (this.compressed)
{
if (this.state.fontFamily == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontFamily.apply(this, arguments);
}
var elem = this.createElement('fontfamily');
elem.setAttribute('family', value);
this.root.appendChild(elem);
}
};
/**
* Function: setFontStyle
*
* Sets the current font style.
*
* Parameters:
*
* value - Numeric representation of the font family. This is the sum of the
* font styles from <mxConstants>.
*/
mxXmlCanvas2D.prototype.setFontStyle = function(value)
{
if (this.textEnabled)
{
if (value == null)
{
value = 0;
}
if (this.compressed)
{
if (this.state.fontStyle == value)
{
return;
}
mxAbstractCanvas2D.prototype.setFontStyle.apply(this, arguments);
}
var elem = this.createElement('fontstyle');
elem.setAttribute('style', value);
this.root.appendChild(elem);
}
};
/**
* Function: setShadow
*
* Enables or disables shadows.
*
* Parameters:
*
* value - Boolean that specifies if shadows should be enabled.
*/
mxXmlCanvas2D.prototype.setShadow = function(value)
{
if (this.compressed)
{
if (this.state.shadow == value)
{
return;
}
mxAbstractCanvas2D.prototype.setShadow.apply(this, arguments);
}
var elem = this.createElement('shadow');
elem.setAttribute('enabled', (value) ? '1' : '0');
this.root.appendChild(elem);
};
/**
* Function: setShadowColor
*
* Sets the current shadow color. Default is <mxConstants.SHADOWCOLOR>.
*
* Parameters:
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2D.prototype.setShadowColor = function(value)
{
if (this.compressed)
{
if (value == mxConstants.NONE)
{
value = null;
}
if (this.state.shadowColor == value)
{
return;
}
mxAbstractCanvas2D.prototype.setShadowColor.apply(this, arguments);
}
var elem = this.createElement('shadowcolor');
elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
this.root.appendChild(elem);
};
/**
* Function: setShadowAlpha
*
* Sets the current shadows alpha. Default is <mxConstants.SHADOW_OPACITY>.
*
* Parameters:
*
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2D.prototype.setShadowAlpha = function(value)
{
if (this.compressed)
{
if (this.state.shadowAlpha == value)
{
return;
}
mxAbstractCanvas2D.prototype.setShadowAlpha.apply(this, arguments);
}
var elem = this.createElement('shadowalpha');
elem.setAttribute('alpha', value);
this.root.appendChild(elem);
};
/**
* Function: setShadowOffset
*
* Sets the current shadow offset.
*
* Parameters:
*
* dx - Number that represents the horizontal offset of the shadow.
* dy - Number that represents the vertical offset of the shadow.
*/
mxXmlCanvas2D.prototype.setShadowOffset = function(dx, dy)
{
if (this.compressed)
{
if (this.state.shadowDx == dx && this.state.shadowDy == dy)
{
return;
}
mxAbstractCanvas2D.prototype.setShadowOffset.apply(this, arguments);
}
var elem = this.createElement('shadowoffset');
elem.setAttribute('dx', dx);
elem.setAttribute('dy', dy);
this.root.appendChild(elem);
};
/**
* Function: rect
*
* Puts a rectangle into the drawing buffer.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the rectangle.
* y - Number that represents the y-coordinate of the rectangle.
* w - Number that represents the width of the rectangle.
* h - Number that represents the height of the rectangle.
*/
mxXmlCanvas2D.prototype.rect = function(x, y, w, h)
{
var elem = this.createElement('rect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
this.root.appendChild(elem);
};
/**
* Function: roundrect
*
* Puts a rounded rectangle into the drawing buffer.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the rectangle.
* y - Number that represents the y-coordinate of the rectangle.
* w - Number that represents the width of the rectangle.
* h - Number that represents the height of the rectangle.
* dx - Number that represents the horizontal rounding.
* dy - Number that represents the vertical rounding.
*/
mxXmlCanvas2D.prototype.roundrect = function(x, y, w, h, dx, dy)
{
var elem = this.createElement('roundrect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
elem.setAttribute('dx', this.format(dx));
elem.setAttribute('dy', this.format(dy));
this.root.appendChild(elem);
};
/**
* Function: ellipse
*
* Puts an ellipse into the drawing buffer.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the ellipse.
* y - Number that represents the y-coordinate of the ellipse.
* w - Number that represents the width of the ellipse.
* h - Number that represents the height of the ellipse.
*/
mxXmlCanvas2D.prototype.ellipse = function(x, y, w, h)
{
var elem = this.createElement('ellipse');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
this.root.appendChild(elem);
};
/**
* Function: image
*
* Paints an image.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the image.
* y - Number that represents the y-coordinate of the image.
* w - Number that represents the width of the image.
* h - Number that represents the height of the image.
* src - String that specifies the URL of the image.
* aspect - Boolean indicating if the aspect of the image should be preserved.
* flipH - Boolean indicating if the image should be flipped horizontally.
* flipV - Boolean indicating if the image should be flipped vertically.
*/
mxXmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
{
src = this.converter.convert(src);
// LATER: Add option for embedding images as base64.
var elem = this.createElement('image');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
elem.setAttribute('src', src);
elem.setAttribute('aspect', (aspect) ? '1' : '0');
elem.setAttribute('flipH', (flipH) ? '1' : '0');
elem.setAttribute('flipV', (flipV) ? '1' : '0');
this.root.appendChild(elem);
};
/**
* Function: begin
*
* Starts a new path and puts it into the drawing buffer.
*/
mxXmlCanvas2D.prototype.begin = function()
{
this.root.appendChild(this.createElement('begin'));
this.lastX = 0;
this.lastY = 0;
};
/**
* Function: moveTo
*
* Moves the current path the given point.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the point.
* y - Number that represents the y-coordinate of the point.
*/
mxXmlCanvas2D.prototype.moveTo = function(x, y)
{
var elem = this.createElement('move');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
this.root.appendChild(elem);
this.lastX = x;
this.lastY = y;
};
/**
* Function: lineTo
*
* Draws a line to the given coordinates.
*
* Parameters:
*
* x - Number that represents the x-coordinate of the endpoint.
* y - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2D.prototype.lineTo = function(x, y)
{
var elem = this.createElement('line');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
this.root.appendChild(elem);
this.lastX = x;
this.lastY = y;
};
/**
* Function: quadTo
*
* Adds a quadratic curve to the current path.
*
* Parameters:
*
* x1 - Number that represents the x-coordinate of the control point.
* y1 - Number that represents the y-coordinate of the control point.
* x2 - Number that represents the x-coordinate of the endpoint.
* y2 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2D.prototype.quadTo = function(x1, y1, x2, y2)
{
var elem = this.createElement('quad');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
elem.setAttribute('x2', this.format(x2));
elem.setAttribute('y2', this.format(y2));
this.root.appendChild(elem);
this.lastX = x2;
this.lastY = y2;
};
/**
* Function: curveTo
*
* Adds a bezier curve to the current path.
*
* Parameters:
*
* x1 - Number that represents the x-coordinate of the first control point.
* y1 - Number that represents the y-coordinate of the first control point.
* x2 - Number that represents the x-coordinate of the second control point.
* y2 - Number that represents the y-coordinate of the second control point.
* x3 - Number that represents the x-coordinate of the endpoint.
* y3 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2D.prototype.curveTo = function(x1, y1, x2, y2, x3, y3)
{
var elem = this.createElement('curve');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
elem.setAttribute('x2', this.format(x2));
elem.setAttribute('y2', this.format(y2));
elem.setAttribute('x3', this.format(x3));
elem.setAttribute('y3', this.format(y3));
this.root.appendChild(elem);
this.lastX = x3;
this.lastY = y3;
};
/**
* Function: close
*
* Closes the current path.
*/
mxXmlCanvas2D.prototype.close = function()
{
this.root.appendChild(this.createElement('close'));
};
/**
* Function: text
*
* Paints the given text. Possible values for format are empty string for
* plain text and html for HTML markup. Background and border color as well
* as clipping is not available in plain text labels for VML. HTML labels
* are not available as part of shapes with no foreignObject support in SVG
* (eg. IE9, IE10).
*
* Parameters:
*
* x - Number that represents the x-coordinate of the text.
* y - Number that represents the y-coordinate of the text.
* w - Number that represents the available width for the text or 0 for automatic width.
* h - Number that represents the available height for the text or 0 for automatic height.
* str - String that specifies the text to be painted.
* align - String that represents the horizontal alignment.
* valign - String that represents the vertical alignment.
* wrap - Boolean that specifies if word-wrapping is enabled. Requires w > 0.
* format - Empty string for plain text or 'html' for HTML markup.
* overflow - Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
* clip - Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
* rotation - Number that specifies the angle of the rotation around the anchor point of the text.
* dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
*/
mxXmlCanvas2D.prototype.text = function(x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)
{
if (this.textEnabled && str != null)
{
if (mxUtils.isNode(str))
{
str = mxUtils.getOuterHtml(str);
}
var elem = this.createElement('text');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
elem.setAttribute('w', this.format(w));
elem.setAttribute('h', this.format(h));
elem.setAttribute('str', str);
if (align != null)
{
elem.setAttribute('align', align);
}
if (valign != null)
{
elem.setAttribute('valign', valign);
}
elem.setAttribute('wrap', (wrap) ? '1' : '0');
if (format == null)
{
format = '';
}
elem.setAttribute('format', format);
if (overflow != null)
{
elem.setAttribute('overflow', overflow);
}
if (clip != null)
{
elem.setAttribute('clip', (clip) ? '1' : '0');
}
if (rotation != null)
{
elem.setAttribute('rotation', rotation);
}
if (dir != null)
{
elem.setAttribute('dir', dir);
}
this.root.appendChild(elem);
}
};
/**
* Function: stroke
*
* Paints the outline of the current drawing buffer.
*/
mxXmlCanvas2D.prototype.stroke = function()
{
this.root.appendChild(this.createElement('stroke'));
};
/**
* Function: fill
*
* Fills the current drawing buffer.
*/
mxXmlCanvas2D.prototype.fill = function()
{
this.root.appendChild(this.createElement('fill'));
};
/**
* Function: fillAndStroke
*
* Fills the current drawing buffer and its outline.
*/
mxXmlCanvas2D.prototype.fillAndStroke = function()
{
this.root.appendChild(this.createElement('fillstroke'));
};