Skip to content
Permalink
Browse files

Add box-shadow rendering

  • Loading branch information...
eKoopmans committed Mar 25, 2017
1 parent e58fc69 commit 32b8d1c92656f05f6ff4d31977d1fd720c9d6a43
Showing with 55 additions and 0 deletions.
  1. +4 −0 src/nodeparser.js
  2. +8 −0 src/renderer.js
  3. +43 −0 src/renderers/canvas.js
@@ -330,6 +330,10 @@ NodeParser.prototype.paintElement = function(container) {
this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
}, this);

this.renderer.mask(bounds, function() {
this.renderer.renderShadows(container, bounds);
}, this);

this.renderer.clip(container.clip, function() {
this.renderer.renderBorders(container.borders.borders);
}, this);
@@ -44,6 +44,14 @@ Renderer.prototype.renderBackgroundColor = function(container, bounds) {
}
};

Renderer.prototype.renderShadows = function(container, bounds) {
var boxShadow = container.css('boxShadow');
if (boxShadow !== 'none') {
var shadows = boxShadow.split(/,(?![^(]*\))/);
this.shadow(bounds.left, bounds.top, bounds.width, bounds.height, shadows);
}
};

Renderer.prototype.renderBorders = function(borders) {
borders.forEach(this.renderBorder, this);
};
@@ -41,6 +41,39 @@ CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke,
this.ctx.stroke();
};

CanvasRenderer.prototype.shadow = function(left, top, width, height, shadows) {
var parseShadow = function(str) {
var propertyFilters = { color: /^(#|rgb|hsl|(?!(inset|initial|inherit))\D+)/i, inset: /^inset/i, px: /px$/i };
var pxPropertyNames = [ 'x', 'y', 'blur', 'spread' ];
var properties = str.split(/ (?![^(]*\))/);
var info = {};
for (var key in propertyFilters) {
info[key] = properties.filter(propertyFilters[key].test.bind(propertyFilters[key]));
info[key] = info[key].length === 0 ? null : info[key].length === 1 ? info[key][0] : info[key];
}
for (var i=0; i<info.px.length; i++) {
info[pxPropertyNames[i]] = parseInt(info.px[i]);
}
return info;
};
var drawShadow = function(shadow) {
var info = parseShadow(shadow);
if (!info.inset) {
context.shadowOffsetX = info.x;
context.shadowOffsetY = info.y;
context.shadowColor = info.color;
context.shadowBlur = info.blur;
context.fill();
}
};
var context = this.setFillStyle('white');
context.save();
context.beginPath();
context.rect(left, top, width, height);
shadows.forEach(drawShadow, this);
context.restore();
};

CanvasRenderer.prototype.drawShape = function(shape, color) {
this.shape(shape);
this.setFillStyle(color).fill();
@@ -76,6 +109,16 @@ CanvasRenderer.prototype.clip = function(shapes, callback, context) {
this.ctx.restore();
};

CanvasRenderer.prototype.mask = function(bounds, callback, context) {
var canvasBorderCCW = ["rect", this.canvas.width, 0, -this.canvas.width, this.canvas.height];
var boundsCW = ["rect", bounds.left, bounds.top, bounds.width, bounds.height];
this.ctx.save();
var shape = [canvasBorderCCW, boundsCW];
this.shape(shape).clip();
callback.call(context);
this.ctx.restore();
};

CanvasRenderer.prototype.shape = function(shape) {
this.ctx.beginPath();
shape.forEach(function(point, index) {

0 comments on commit 32b8d1c

Please sign in to comment.
You can’t perform that action at this time.