window.multigraph.util.namespace("window.multigraph.graphics.canvas", function (ns) {
"use strict";
/**
* @module multigraph
* @submodule canvas
*/
ns.mixin.add(function (ns) {
/**
* Renders the title using the Canvas driver.
*
* @method render
* @for Title
* @chainable
* @param {HTMLCanvasObject} context
* @author jrfrimme
*/
ns.Title.respondsTo("render", function (context) {
var Point = window.multigraph.math.Point,
graph = this.graph(),
border = this.border(),
padding = this.padding(),
pointBase = this.base(),
text = this.text(),
backgroundColor = this.color().toRGBA(this.opacity()),
h = text.origHeight(),
w = text.origWidth(),
ax = (0.5 * w + padding + border) * (this.anchor().x() + 1),
ay = (0.5 * h + padding + border) * (this.anchor().y() + 1),
base;
if (this.frame() === "padding") {
base = new Point(
(pointBase.x() + 1) * (graph.paddingBox().width() / 2) - graph.plotarea().margin().left(),
(pointBase.y() + 1) * (graph.paddingBox().height() / 2) - graph.plotarea().margin().bottom()
);
} else {
base = new Point(
(pointBase.x() + 1) * (graph.plotBox().width() / 2),
(pointBase.y() + 1) * (graph.plotBox().height() / 2)
);
}
context.save();
context.fillStyle = "rgba(0, 0, 0, 1)";
context.transform(1, 0, 0, -1, 0, 2 * base.y());
context.transform(1, 0, 0, 1, base.x(), base.y());
context.transform(1, 0, 0, 1, this.position().x(), -this.position().y());
context.transform(1, 0, 0, 1, -ax, ay);
// border
if (border > 0) {
context.save();
context.transform(1, 0, 0, -1, 0, 0);
context.strokeStyle = this.bordercolor().toRGBA();
context.lineWidth = border;
context.strokeRect(
border / 2,
border / 2,
w + (2 * padding) + border,
h + (2 * padding) + border
);
context.restore();
}
// background
context.save();
context.transform(1, 0, 0, -1, 0, 0);
context.strokeStyle = backgroundColor;
context.fillStyle = backgroundColor;
context.fillRect(
border,
border,
w + (2 * padding),
h + (2 * padding)
);
context.restore();
// text
context.font = this.fontSize() + " sans-serif";
context.fillText(text.string(), border + padding, -(border + padding));
context.restore();
});
});
});