From db437f895017cd582620486a45d20a11a8280f28 Mon Sep 17 00:00:00 2001 From: MoyuScript Date: Sat, 15 Feb 2014 00:31:48 +0200 Subject: [PATCH] Fix background position rendering --- src/renderer.js | 21 ++++++++++----------- src/renderers/canvas.js | 8 ++++---- tests/cases/background/clip.html | 8 +++++++- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/renderer.js b/src/renderer.js index ea10b64..3224ccd 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -24,10 +24,10 @@ Renderer.prototype.renderImage = function(container, bounds, borderData, image) ); }; -Renderer.prototype.renderBackground = function(container, bounds) { +Renderer.prototype.renderBackground = function(container, bounds, borderData) { if (bounds.height > 0 && bounds.width > 0) { this.renderBackgroundColor(container, bounds); - this.renderBackgroundImage(container, bounds); + this.renderBackgroundImage(container, bounds, borderData); } }; @@ -48,14 +48,14 @@ Renderer.prototype.renderBorder = function(data) { } }; -Renderer.prototype.renderBackgroundImage = function(container, bounds) { +Renderer.prototype.renderBackgroundImage = function(container, bounds, borderData) { var backgroundImages = container.parseBackgroundImages(); backgroundImages.reverse().forEach(function(backgroundImage, index, arr) { switch(backgroundImage.method) { case "url": var image = this.images.get(backgroundImage.args[0]); if (image) { - this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1)); + this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1), borderData); } else { log("Error loading background-image", backgroundImage.args[0]); } @@ -64,7 +64,7 @@ Renderer.prototype.renderBackgroundImage = function(container, bounds) { case "gradient": var gradientImage = this.images.get(backgroundImage.value); if (gradientImage) { - this.renderBackgroundGradient(gradientImage, bounds); + this.renderBackgroundGradient(gradientImage, bounds, borderData); } else { log("Error loading background-image", backgroundImage.args[0]); } @@ -77,25 +77,24 @@ Renderer.prototype.renderBackgroundImage = function(container, bounds) { }, this); }; -Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index) { +Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index, borderData) { var size = container.parseBackgroundSize(bounds, imageContainer.image, index); var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size); var repeat = container.parseBackgroundRepeat(index); -// image = resizeImage(image, backgroundSize); switch (repeat) { case "repeat-x": case "repeat no-repeat": - this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left, bounds.top + position.top, 99999, imageContainer.image.height); + this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, imageContainer.image.height, borderData); break; case "repeat-y": case "no-repeat repeat": - this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left, bounds.top, imageContainer.image.width, 99999); + this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], imageContainer.image.width, 99999, borderData); break; case "no-repeat": - this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left, bounds.top + position.top, imageContainer.image.width, imageContainer.image.height); + this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], imageContainer.image.width, imageContainer.image.height, borderData); break; default: - this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}); + this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]); break; } }; diff --git a/src/renderers/canvas.js b/src/renderers/canvas.js index c9e5480..208c0d2 100644 --- a/src/renderers/canvas.js +++ b/src/renderers/canvas.js @@ -76,7 +76,7 @@ CanvasRenderer.prototype.text = function(text, left, bottom) { this.ctx.fillText(text, left, bottom); }; -CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height) { +CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) { var shape = [ ["line", Math.round(left), Math.round(top)], ["line", Math.round(left + width), Math.round(top)], @@ -84,12 +84,12 @@ CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgr ["line", Math.round(left), Math.round(height + top)] ]; this.clip(shape, function() { - this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds); + this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds, borderData[3], borderData[0]); }, this); }; -CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds) { - var offsetX = Math.round(bounds.left + backgroundPosition.left), offsetY = Math.round(bounds.top + backgroundPosition.top); +CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) { + var offsetX = Math.round(bounds.left + backgroundPosition.left + borderLeft), offsetY = Math.round(bounds.top + backgroundPosition.top + borderTop); this.setFillStyle(this.ctx.createPattern(this.resizeImage(imageContainer, size), "repeat")); this.ctx.translate(offsetX, offsetY); this.ctx.fill(); diff --git a/tests/cases/background/clip.html b/tests/cases/background/clip.html index 00bbb22..4e6b2c8 100644 --- a/tests/cases/background/clip.html +++ b/tests/cases/background/clip.html @@ -41,7 +41,6 @@ -
@@ -49,6 +48,13 @@
+
+
+
+
+
+
+