// The Bounding Box object function derive(v0, v1, v2, v3, t) { return Math.pow(1 - t, 3) * v0 + 3 * Math.pow(1 - t, 2) * t * v1 + 3 * (1 - t) * Math.pow(t, 2) * v2 + Math.pow(t, 3) * v3; } /** * A bounding box is an enclosing box that describes the smallest measure within which all the points lie. * It is used to calculate the bounding box of a glyph or text path. * * On initialization, x1/y1/x2/y2 will be NaN. Check if the bounding box is empty using `isEmpty()`. * * @exports opentype.BoundingBox * @class * @constructor */ function BoundingBox() { this.x1 = Number.NaN; this.y1 = Number.NaN; this.x2 = Number.NaN; this.y2 = Number.NaN; } /** * Returns true if the bounding box is empty, that is, no points have been added to the box yet. */ BoundingBox.prototype.isEmpty = function() { return isNaN(this.x1) || isNaN(this.y1) || isNaN(this.x2) || isNaN(this.y2); }; /** * Add the point to the bounding box. * The x1/y1/x2/y2 coordinates of the bounding box will now encompass the given point. * @param {number} x - The X coordinate of the point. * @param {number} y - The Y coordinate of the point. */ BoundingBox.prototype.addPoint = function(x, y) { if (typeof x === 'number') { if (isNaN(this.x1) || isNaN(this.x2)) { this.x1 = x; this.x2 = x; } if (x < this.x1) { this.x1 = x; } if (x > this.x2) { this.x2 = x; } } if (typeof y === 'number') { if (isNaN(this.y1) || isNaN(this.y2)) { this.y1 = y; this.y2 = y; } if (y < this.y1) { this.y1 = y; } if (y > this.y2) { this.y2 = y; } } }; /** * Add a X coordinate to the bounding box. * This extends the bounding box to include the X coordinate. * This function is used internally inside of addBezier. * @param {number} x - The X coordinate of the point. */ BoundingBox.prototype.addX = function(x) { this.addPoint(x, null); }; /** * Add a Y coordinate to the bounding box. * This extends the bounding box to include the Y coordinate. * This function is used internally inside of addBezier. * @param {number} y - The Y coordinate of the point. */ BoundingBox.prototype.addY = function(y) { this.addPoint(null, y); }; /** * Add a Bézier curve to the bounding box. * This extends the bounding box to include the entire Bézier. * @param {number} x0 - The starting X coordinate. * @param {number} y0 - The starting Y coordinate. * @param {number} x1 - The X coordinate of the first control point. * @param {number} y1 - The Y coordinate of the first control point. * @param {number} x2 - The X coordinate of the second control point. * @param {number} y2 - The Y coordinate of the second control point. * @param {number} x - The ending X coordinate. * @param {number} y - The ending Y coordinate. */ BoundingBox.prototype.addBezier = function(x0, y0, x1, y1, x2, y2, x, y) { // This code is based on http://nishiohirokazu.blogspot.com/2009/06/how-to-calculate-bezier-curves-bounding.html // and https://github.com/icons8/svg-path-bounding-box const p0 = [x0, y0]; const p1 = [x1, y1]; const p2 = [x2, y2]; const p3 = [x, y]; this.addPoint(x0, y0); this.addPoint(x, y); for (let i = 0; i <= 1; i++) { const b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; const a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; const c = 3 * p1[i] - 3 * p0[i]; if (a === 0) { if (b === 0) continue; const t = -c / b; if (0 < t && t < 1) { if (i === 0) this.addX(derive(p0[i], p1[i], p2[i], p3[i], t)); if (i === 1) this.addY(derive(p0[i], p1[i], p2[i], p3[i], t)); } continue; } const b2ac = Math.pow(b, 2) - 4 * c * a; if (b2ac < 0) continue; const t1 = (-b + Math.sqrt(b2ac)) / (2 * a); if (0 < t1 && t1 < 1) { if (i === 0) this.addX(derive(p0[i], p1[i], p2[i], p3[i], t1)); if (i === 1) this.addY(derive(p0[i], p1[i], p2[i], p3[i], t1)); } const t2 = (-b - Math.sqrt(b2ac)) / (2 * a); if (0 < t2 && t2 < 1) { if (i === 0) this.addX(derive(p0[i], p1[i], p2[i], p3[i], t2)); if (i === 1) this.addY(derive(p0[i], p1[i], p2[i], p3[i], t2)); } } }; /** * Add a quadratic curve to the bounding box. * This extends the bounding box to include the entire quadratic curve. * @param {number} x0 - The starting X coordinate. * @param {number} y0 - The starting Y coordinate. * @param {number} x1 - The X coordinate of the control point. * @param {number} y1 - The Y coordinate of the control point. * @param {number} x - The ending X coordinate. * @param {number} y - The ending Y coordinate. */ BoundingBox.prototype.addQuad = function(x0, y0, x1, y1, x, y) { const cp1x = x0 + 2 / 3 * (x1 - x0); const cp1y = y0 + 2 / 3 * (y1 - y0); const cp2x = cp1x + 1 / 3 * (x - x0); const cp2y = cp1y + 1 / 3 * (y - y0); this.addBezier(x0, y0, cp1x, cp1y, cp2x, cp2y, x, y); }; export default BoundingBox;