diff --git a/packages/display/src/Bounds.js b/packages/display/src/Bounds.js index 1172d1b..1da4c70 100644 --- a/packages/display/src/Bounds.js +++ b/packages/display/src/Bounds.js @@ -151,15 +151,28 @@ /** * Adds sprite frame, transformed. * - * @param {PIXI.Transform} transform - TODO - * @param {number} x0 - TODO - * @param {number} y0 - TODO - * @param {number} x1 - TODO - * @param {number} y1 - TODO + * @param {PIXI.Transform} transform - transform to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame */ addFrame(transform, x0, y0, x1, y1) { - const matrix = transform.worldTransform; + this.addFrameMatrix(transform.worldTransform, x0, y0, x1, y1); + } + + /** + * Adds sprite frame, multiplied by matrix + * + * @param {PIXI.Matrix} matrix - matrix to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + */ + addFrameMatrix(matrix, x0, y0, x1, y1) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -248,7 +261,21 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - const matrix = transform.worldTransform; + this.addVerticesMatrix(transform.worldTransform, vertices, beginOffset, endOffset); + } + + /** + * Add an array of mesh vertices + * + * @param {PIXI.Matrix} matrix - mesh matrix + * @param {Float32Array} vertices - mesh coordinates in array + * @param {number} beginOffset - begin offset + * @param {number} endOffset - end offset, excluded + * @param {number} [padX] - x padding + * @param {number} [padY] - y padding + */ + addVerticesMatrix(matrix, vertices, beginOffset, endOffset, padX, padY) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -256,6 +283,9 @@ const tx = matrix.tx; const ty = matrix.ty; + padX = padX || 0; + padY = padY || 0; + let minX = this.minX; let minY = this.minY; let maxX = this.maxX; @@ -268,10 +298,10 @@ const x = (a * rawX) + (c * rawY) + tx; const y = (d * rawY) + (b * rawX) + ty; - minX = x < minX ? x : minX; - minY = y < minY ? y : minY; - maxX = x > maxX ? x : maxX; - maxY = y > maxY ? y : maxY; + minX = Math.min(minX, x - padX); + maxX = Math.max(maxX, x + padX); + minY = Math.min(minY, y - padY); + maxY = Math.max(maxY, y + padY); } this.minX = minX; @@ -326,6 +356,17 @@ } /** + * Adds other Bounds, multiplied by matrix. Bounds shouldn't be empty + * + * @param {PIXI.Bounds} bounds other bounds + * @param {PIXI.Matrix} matrix multiplicator + */ + addBoundsMatrix(bounds, matrix) + { + this.addFrameMatrix(matrix, bounds.minX, bounds.minY, bounds.maxX, bounds.maxY); + } + + /** * Adds other Bounds, masked with Rectangle * * @param {PIXI.Bounds} bounds - TODO @@ -351,4 +392,47 @@ this.maxY = _maxY > maxY ? _maxY : maxY; } } + + /** + * Pads bounds object, making it grow in all directions. + * + * @param {number} paddingX - The horizontal padding amount. + * @param {number} paddingY - The vertical padding amount. + */ + pad(paddingX, paddingY) + { + paddingX = paddingX || 0; + paddingY = paddingY || ((paddingY !== 0) ? paddingX : 0); + + if (!this.isEmpty()) + { + this.minX -= paddingX; + this.maxX += paddingX; + this.minY -= paddingY; + this.maxY += paddingY; + } + } + + /** + * Adds padded frame. (x0, y0) should be strictly less than (x1, y1) + * + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + * @param {number} padX - padding X + * @param {number} padY - padding Y + */ + addFramePad(x0, y0, x1, y1, padX, padY) + { + x0 -= padX; + y0 -= padY; + x1 += padX; + y1 += padY; + + this.minX = this.minX < x0 ? this.minX : x0; + this.maxX = this.maxX > x1 ? this.maxX : x1; + this.minY = this.minY < y0 ? this.minY : y0; + this.maxY = this.maxY > y1 ? this.maxY : y1; + } } diff --git a/packages/display/src/Bounds.js b/packages/display/src/Bounds.js index 1172d1b..1da4c70 100644 --- a/packages/display/src/Bounds.js +++ b/packages/display/src/Bounds.js @@ -151,15 +151,28 @@ /** * Adds sprite frame, transformed. * - * @param {PIXI.Transform} transform - TODO - * @param {number} x0 - TODO - * @param {number} y0 - TODO - * @param {number} x1 - TODO - * @param {number} y1 - TODO + * @param {PIXI.Transform} transform - transform to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame */ addFrame(transform, x0, y0, x1, y1) { - const matrix = transform.worldTransform; + this.addFrameMatrix(transform.worldTransform, x0, y0, x1, y1); + } + + /** + * Adds sprite frame, multiplied by matrix + * + * @param {PIXI.Matrix} matrix - matrix to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + */ + addFrameMatrix(matrix, x0, y0, x1, y1) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -248,7 +261,21 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - const matrix = transform.worldTransform; + this.addVerticesMatrix(transform.worldTransform, vertices, beginOffset, endOffset); + } + + /** + * Add an array of mesh vertices + * + * @param {PIXI.Matrix} matrix - mesh matrix + * @param {Float32Array} vertices - mesh coordinates in array + * @param {number} beginOffset - begin offset + * @param {number} endOffset - end offset, excluded + * @param {number} [padX] - x padding + * @param {number} [padY] - y padding + */ + addVerticesMatrix(matrix, vertices, beginOffset, endOffset, padX, padY) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -256,6 +283,9 @@ const tx = matrix.tx; const ty = matrix.ty; + padX = padX || 0; + padY = padY || 0; + let minX = this.minX; let minY = this.minY; let maxX = this.maxX; @@ -268,10 +298,10 @@ const x = (a * rawX) + (c * rawY) + tx; const y = (d * rawY) + (b * rawX) + ty; - minX = x < minX ? x : minX; - minY = y < minY ? y : minY; - maxX = x > maxX ? x : maxX; - maxY = y > maxY ? y : maxY; + minX = Math.min(minX, x - padX); + maxX = Math.max(maxX, x + padX); + minY = Math.min(minY, y - padY); + maxY = Math.max(maxY, y + padY); } this.minX = minX; @@ -326,6 +356,17 @@ } /** + * Adds other Bounds, multiplied by matrix. Bounds shouldn't be empty + * + * @param {PIXI.Bounds} bounds other bounds + * @param {PIXI.Matrix} matrix multiplicator + */ + addBoundsMatrix(bounds, matrix) + { + this.addFrameMatrix(matrix, bounds.minX, bounds.minY, bounds.maxX, bounds.maxY); + } + + /** * Adds other Bounds, masked with Rectangle * * @param {PIXI.Bounds} bounds - TODO @@ -351,4 +392,47 @@ this.maxY = _maxY > maxY ? _maxY : maxY; } } + + /** + * Pads bounds object, making it grow in all directions. + * + * @param {number} paddingX - The horizontal padding amount. + * @param {number} paddingY - The vertical padding amount. + */ + pad(paddingX, paddingY) + { + paddingX = paddingX || 0; + paddingY = paddingY || ((paddingY !== 0) ? paddingX : 0); + + if (!this.isEmpty()) + { + this.minX -= paddingX; + this.maxX += paddingX; + this.minY -= paddingY; + this.maxY += paddingY; + } + } + + /** + * Adds padded frame. (x0, y0) should be strictly less than (x1, y1) + * + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + * @param {number} padX - padding X + * @param {number} padY - padding Y + */ + addFramePad(x0, y0, x1, y1, padX, padY) + { + x0 -= padX; + y0 -= padY; + x1 += padX; + y1 += padY; + + this.minX = this.minX < x0 ? this.minX : x0; + this.maxX = this.maxX > x1 ? this.maxX : x1; + this.minY = this.minY < y0 ? this.minY : y0; + this.maxY = this.maxY > y1 ? this.maxY : y1; + } } diff --git a/packages/graphics/src/GraphicsGeometry.js b/packages/graphics/src/GraphicsGeometry.js index 75e1125..29aea22 100644 --- a/packages/graphics/src/GraphicsGeometry.js +++ b/packages/graphics/src/GraphicsGeometry.js @@ -1,4 +1,4 @@ -import { SHAPES, Point } from '@pixi/math'; +import { SHAPES, Point, Matrix } from '@pixi/math'; import { Bounds } from '@pixi/display'; import { BatchGeometry, BatchDrawCall, BaseTexture } from '@pixi/core'; import { DRAW_MODES, WRAP_MODES } from '@pixi/constants'; @@ -14,6 +14,7 @@ const BATCH_POOL = []; const DRAW_CALL_POOL = []; const tmpPoint = new Point(); +const tmpBounds = new Bounds(); /** * Map of fill commands for each shape type. @@ -782,126 +783,76 @@ */ calculateBounds() { - let minX = Infinity; - let maxX = -Infinity; + const bounds = this._bounds; + const sequenceBounds = tmpBounds; + let curMatrix = Matrix.IDENTITY; - let minY = Infinity; - let maxY = -Infinity; + this._bounds.clear(); + sequenceBounds.clear(); - if (this.graphicsData.length) + for (let i = 0; i < this.graphicsData.length; i++) { - let shape = null; - let x = 0; - let y = 0; - let w = 0; - let h = 0; + const data = this.graphicsData[i]; + const shape = data.shape; + const type = data.type; + const lineStyle = data.lineStyle; + const nextMatrix = data.matrix || Matrix.IDENTITY; + let lineWidth = 0.0; - for (let i = 0; i < this.graphicsData.length; i++) + if (lineStyle && lineStyle.visible) { - const data = this.graphicsData[i]; + const alignment = lineStyle.alignment; - const type = data.type; - const lineWidth = data.lineStyle ? data.lineStyle.width : 0; + lineWidth = lineStyle.width; - shape = data.shape; - - if (type === SHAPES.RECT || type === SHAPES.RREC) + if (type === SHAPES.POLY) { - x = shape.x - (lineWidth / 2); - y = shape.y - (lineWidth / 2); - w = shape.width + lineWidth; - h = shape.height + lineWidth; - - minX = x < minX ? x : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y < minY ? y : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if (type === SHAPES.CIRC) - { - x = shape.x; - y = shape.y; - w = shape.radius + (lineWidth / 2); - h = shape.radius + (lineWidth / 2); - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if (type === SHAPES.ELIP) - { - x = shape.x; - y = shape.y; - w = shape.width + (lineWidth / 2); - h = shape.height + (lineWidth / 2); - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; + lineWidth = lineWidth * (0.5 + Math.abs(0.5 - alignment)); } else { - // POLY - const points = shape.points; - let x2 = 0; - let y2 = 0; - let dx = 0; - let dy = 0; - let rw = 0; - let rh = 0; - let cx = 0; - let cy = 0; - - for (let j = 0; j + 2 < points.length; j += 2) - { - x = points[j]; - y = points[j + 1]; - x2 = points[j + 2]; - y2 = points[j + 3]; - dx = Math.abs(x2 - x); - dy = Math.abs(y2 - y); - h = lineWidth; - w = Math.sqrt((dx * dx) + (dy * dy)); - - if (w < 1e-9) - { - continue; - } - - rw = ((h / w * dy) + dx) / 2; - rh = ((h / w * dx) + dy) / 2; - cx = (x2 + x) / 2; - cy = (y2 + y) / 2; - - minX = cx - rw < minX ? cx - rw : minX; - maxX = cx + rw > maxX ? cx + rw : maxX; - - minY = cy - rh < minY ? cy - rh : minY; - maxY = cy + rh > maxY ? cy + rh : maxY; - } + lineWidth = lineWidth * Math.max(0, alignment); } } + + if (curMatrix !== nextMatrix) + { + if (!sequenceBounds.isEmpty()) + { + bounds.addBoundsMatrix(sequenceBounds, curMatrix); + sequenceBounds.clear(); + } + curMatrix = nextMatrix; + } + + if (type === SHAPES.RECT || type === SHAPES.RREC) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height, + lineWidth, lineWidth); + } + else if (type === SHAPES.CIRC) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x, shape.y, + shape.radius + lineWidth, shape.radius + lineWidth); + } + else if (type === SHAPES.ELIP) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x, shape.y, + shape.width + lineWidth, shape.height + lineWidth); + } + else + { + // adding directly to the bounds + bounds.addVerticesMatrix(curMatrix, shape.points, 0, shape.points.length, lineWidth, lineWidth); + } } - else + + if (!sequenceBounds.isEmpty()) { - minX = 0; - maxX = 0; - minY = 0; - maxY = 0; + bounds.addBoundsMatrix(sequenceBounds, curMatrix); } - const padding = this.boundsPadding; - - this._bounds.minX = minX - padding; - this._bounds.maxX = maxX + padding; - - this._bounds.minY = minY - padding; - this._bounds.maxY = maxY + padding; + bounds.pad(this.boundsPadding, this.boundsPadding); } /** diff --git a/packages/display/src/Bounds.js b/packages/display/src/Bounds.js index 1172d1b..1da4c70 100644 --- a/packages/display/src/Bounds.js +++ b/packages/display/src/Bounds.js @@ -151,15 +151,28 @@ /** * Adds sprite frame, transformed. * - * @param {PIXI.Transform} transform - TODO - * @param {number} x0 - TODO - * @param {number} y0 - TODO - * @param {number} x1 - TODO - * @param {number} y1 - TODO + * @param {PIXI.Transform} transform - transform to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame */ addFrame(transform, x0, y0, x1, y1) { - const matrix = transform.worldTransform; + this.addFrameMatrix(transform.worldTransform, x0, y0, x1, y1); + } + + /** + * Adds sprite frame, multiplied by matrix + * + * @param {PIXI.Matrix} matrix - matrix to apply + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + */ + addFrameMatrix(matrix, x0, y0, x1, y1) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -248,7 +261,21 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - const matrix = transform.worldTransform; + this.addVerticesMatrix(transform.worldTransform, vertices, beginOffset, endOffset); + } + + /** + * Add an array of mesh vertices + * + * @param {PIXI.Matrix} matrix - mesh matrix + * @param {Float32Array} vertices - mesh coordinates in array + * @param {number} beginOffset - begin offset + * @param {number} endOffset - end offset, excluded + * @param {number} [padX] - x padding + * @param {number} [padY] - y padding + */ + addVerticesMatrix(matrix, vertices, beginOffset, endOffset, padX, padY) + { const a = matrix.a; const b = matrix.b; const c = matrix.c; @@ -256,6 +283,9 @@ const tx = matrix.tx; const ty = matrix.ty; + padX = padX || 0; + padY = padY || 0; + let minX = this.minX; let minY = this.minY; let maxX = this.maxX; @@ -268,10 +298,10 @@ const x = (a * rawX) + (c * rawY) + tx; const y = (d * rawY) + (b * rawX) + ty; - minX = x < minX ? x : minX; - minY = y < minY ? y : minY; - maxX = x > maxX ? x : maxX; - maxY = y > maxY ? y : maxY; + minX = Math.min(minX, x - padX); + maxX = Math.max(maxX, x + padX); + minY = Math.min(minY, y - padY); + maxY = Math.max(maxY, y + padY); } this.minX = minX; @@ -326,6 +356,17 @@ } /** + * Adds other Bounds, multiplied by matrix. Bounds shouldn't be empty + * + * @param {PIXI.Bounds} bounds other bounds + * @param {PIXI.Matrix} matrix multiplicator + */ + addBoundsMatrix(bounds, matrix) + { + this.addFrameMatrix(matrix, bounds.minX, bounds.minY, bounds.maxX, bounds.maxY); + } + + /** * Adds other Bounds, masked with Rectangle * * @param {PIXI.Bounds} bounds - TODO @@ -351,4 +392,47 @@ this.maxY = _maxY > maxY ? _maxY : maxY; } } + + /** + * Pads bounds object, making it grow in all directions. + * + * @param {number} paddingX - The horizontal padding amount. + * @param {number} paddingY - The vertical padding amount. + */ + pad(paddingX, paddingY) + { + paddingX = paddingX || 0; + paddingY = paddingY || ((paddingY !== 0) ? paddingX : 0); + + if (!this.isEmpty()) + { + this.minX -= paddingX; + this.maxX += paddingX; + this.minY -= paddingY; + this.maxY += paddingY; + } + } + + /** + * Adds padded frame. (x0, y0) should be strictly less than (x1, y1) + * + * @param {number} x0 - left X of frame + * @param {number} y0 - top Y of frame + * @param {number} x1 - right X of frame + * @param {number} y1 - bottom Y of frame + * @param {number} padX - padding X + * @param {number} padY - padding Y + */ + addFramePad(x0, y0, x1, y1, padX, padY) + { + x0 -= padX; + y0 -= padY; + x1 += padX; + y1 += padY; + + this.minX = this.minX < x0 ? this.minX : x0; + this.maxX = this.maxX > x1 ? this.maxX : x1; + this.minY = this.minY < y0 ? this.minY : y0; + this.maxY = this.maxY > y1 ? this.maxY : y1; + } } diff --git a/packages/graphics/src/GraphicsGeometry.js b/packages/graphics/src/GraphicsGeometry.js index 75e1125..29aea22 100644 --- a/packages/graphics/src/GraphicsGeometry.js +++ b/packages/graphics/src/GraphicsGeometry.js @@ -1,4 +1,4 @@ -import { SHAPES, Point } from '@pixi/math'; +import { SHAPES, Point, Matrix } from '@pixi/math'; import { Bounds } from '@pixi/display'; import { BatchGeometry, BatchDrawCall, BaseTexture } from '@pixi/core'; import { DRAW_MODES, WRAP_MODES } from '@pixi/constants'; @@ -14,6 +14,7 @@ const BATCH_POOL = []; const DRAW_CALL_POOL = []; const tmpPoint = new Point(); +const tmpBounds = new Bounds(); /** * Map of fill commands for each shape type. @@ -782,126 +783,76 @@ */ calculateBounds() { - let minX = Infinity; - let maxX = -Infinity; + const bounds = this._bounds; + const sequenceBounds = tmpBounds; + let curMatrix = Matrix.IDENTITY; - let minY = Infinity; - let maxY = -Infinity; + this._bounds.clear(); + sequenceBounds.clear(); - if (this.graphicsData.length) + for (let i = 0; i < this.graphicsData.length; i++) { - let shape = null; - let x = 0; - let y = 0; - let w = 0; - let h = 0; + const data = this.graphicsData[i]; + const shape = data.shape; + const type = data.type; + const lineStyle = data.lineStyle; + const nextMatrix = data.matrix || Matrix.IDENTITY; + let lineWidth = 0.0; - for (let i = 0; i < this.graphicsData.length; i++) + if (lineStyle && lineStyle.visible) { - const data = this.graphicsData[i]; + const alignment = lineStyle.alignment; - const type = data.type; - const lineWidth = data.lineStyle ? data.lineStyle.width : 0; + lineWidth = lineStyle.width; - shape = data.shape; - - if (type === SHAPES.RECT || type === SHAPES.RREC) + if (type === SHAPES.POLY) { - x = shape.x - (lineWidth / 2); - y = shape.y - (lineWidth / 2); - w = shape.width + lineWidth; - h = shape.height + lineWidth; - - minX = x < minX ? x : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y < minY ? y : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if (type === SHAPES.CIRC) - { - x = shape.x; - y = shape.y; - w = shape.radius + (lineWidth / 2); - h = shape.radius + (lineWidth / 2); - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if (type === SHAPES.ELIP) - { - x = shape.x; - y = shape.y; - w = shape.width + (lineWidth / 2); - h = shape.height + (lineWidth / 2); - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; + lineWidth = lineWidth * (0.5 + Math.abs(0.5 - alignment)); } else { - // POLY - const points = shape.points; - let x2 = 0; - let y2 = 0; - let dx = 0; - let dy = 0; - let rw = 0; - let rh = 0; - let cx = 0; - let cy = 0; - - for (let j = 0; j + 2 < points.length; j += 2) - { - x = points[j]; - y = points[j + 1]; - x2 = points[j + 2]; - y2 = points[j + 3]; - dx = Math.abs(x2 - x); - dy = Math.abs(y2 - y); - h = lineWidth; - w = Math.sqrt((dx * dx) + (dy * dy)); - - if (w < 1e-9) - { - continue; - } - - rw = ((h / w * dy) + dx) / 2; - rh = ((h / w * dx) + dy) / 2; - cx = (x2 + x) / 2; - cy = (y2 + y) / 2; - - minX = cx - rw < minX ? cx - rw : minX; - maxX = cx + rw > maxX ? cx + rw : maxX; - - minY = cy - rh < minY ? cy - rh : minY; - maxY = cy + rh > maxY ? cy + rh : maxY; - } + lineWidth = lineWidth * Math.max(0, alignment); } } + + if (curMatrix !== nextMatrix) + { + if (!sequenceBounds.isEmpty()) + { + bounds.addBoundsMatrix(sequenceBounds, curMatrix); + sequenceBounds.clear(); + } + curMatrix = nextMatrix; + } + + if (type === SHAPES.RECT || type === SHAPES.RREC) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height, + lineWidth, lineWidth); + } + else if (type === SHAPES.CIRC) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x, shape.y, + shape.radius + lineWidth, shape.radius + lineWidth); + } + else if (type === SHAPES.ELIP) + { + sequenceBounds.addFramePad(shape.x, shape.y, shape.x, shape.y, + shape.width + lineWidth, shape.height + lineWidth); + } + else + { + // adding directly to the bounds + bounds.addVerticesMatrix(curMatrix, shape.points, 0, shape.points.length, lineWidth, lineWidth); + } } - else + + if (!sequenceBounds.isEmpty()) { - minX = 0; - maxX = 0; - minY = 0; - maxY = 0; + bounds.addBoundsMatrix(sequenceBounds, curMatrix); } - const padding = this.boundsPadding; - - this._bounds.minX = minX - padding; - this._bounds.maxX = maxX + padding; - - this._bounds.minY = minY - padding; - this._bounds.maxY = maxY + padding; + bounds.pad(this.boundsPadding, this.boundsPadding); } /** diff --git a/packages/graphics/test/index.js b/packages/graphics/test/index.js index fb74b25..d280e8d 100644 --- a/packages/graphics/test/index.js +++ b/packages/graphics/test/index.js @@ -127,9 +127,8 @@ graphics.moveTo(0, 0); graphics.lineTo(0, 10); - expect(graphics.width).to.be.below(1.00001); - expect(graphics.width).to.be.above(0.99999); - expect(graphics.height).to.be.equals(10); + expect(graphics.width).to.be.closeTo(1, 0.0001); + expect(graphics.height).to.be.closeTo(11, 0.0001); }); it('should return correct bounds - south', function () @@ -140,9 +139,8 @@ graphics.lineStyle(1); graphics.lineTo(0, -10); - expect(graphics.width).to.be.below(1.00001); - expect(graphics.width).to.be.above(0.99999); - expect(graphics.height).to.be.equals(10); + expect(graphics.width).to.be.closeTo(1, 0.0001); + expect(graphics.height).to.be.closeTo(11, 0.0001); }); it('should return correct bounds - east', function () @@ -153,8 +151,8 @@ graphics.lineStyle(1); graphics.lineTo(10, 0); - expect(graphics.height).to.be.equals(1); - expect(graphics.width).to.be.equals(10); + expect(graphics.height).to.be.closeTo(1, 0.0001); + expect(graphics.width).to.be.closeTo(11, 0.0001); }); it('should return correct bounds - west', function () @@ -165,9 +163,8 @@ graphics.lineStyle(1); graphics.lineTo(-10, 0); - expect(graphics.height).to.be.above(0.9999); - expect(graphics.height).to.be.below(1.0001); - expect(graphics.width).to.be.equals(10); + expect(graphics.height).to.be.closeTo(1, 0.0001); + expect(graphics.width).to.be.closeTo(11, 0.0001); }); it('should return correct bounds when stacked with circle', function () @@ -404,6 +401,40 @@ }); }); + describe('getBounds', function () + { + it('should use getBounds without stroke', function () + { + const graphics = new Graphics(); + + graphics.beginFill(0x0).drawRect(10, 20, 100, 200); + + const { x, y, width, height } = graphics.getBounds(); + + expect(x).to.equal(10); + expect(y).to.equal(20); + expect(width).to.equal(100); + expect(height).to.equal(200); + }); + + it('should use getBounds with stroke', function () + { + const graphics = new Graphics(); + + graphics + .lineStyle(4, 0xff0000) + .beginFill(0x0) + .drawRect(10, 20, 100, 200); + + const { x, y, width, height } = graphics.getBounds(); + + expect(x).to.equal(8); + expect(y).to.equal(18); + expect(width).to.equal(104); + expect(height).to.equal(204); + }); + }); + describe('drawCircle', function () { it('should have no gaps in line border', function ()