From 58a14c9b5a7547f63edceff4ec3b1517ad12a155 Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 15:21:32 +0800 Subject: [PATCH 1/6] add shadow --- modes/canvas/base.js | 8 ++++++++ modes/canvas/shape.js | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/modes/canvas/base.js b/modes/canvas/base.js index 592f0e8..e28f403 100644 --- a/modes/canvas/base.js +++ b/modes/canvas/base.js @@ -156,6 +156,14 @@ var Base = Class(Node, { return this.invalidate(); }, + shadow: function(color, blur, x, y) { + this._shadow = color ? new Color(color).toString() : null; + this._shadowBlur = (blur != null) ? blur : 3; + this._shadowOffsetX = (x != null) ? x : 0; + this._shadowOffsetY = (y != null) ? y: 0; + return this.invalidate(); + } + // Rendering element_renderTo: Node.prototype.renderTo, diff --git a/modes/canvas/shape.js b/modes/canvas/shape.js index a896523..55ec5ea 100644 --- a/modes/canvas/shape.js +++ b/modes/canvas/shape.js @@ -46,6 +46,7 @@ module.exports = Class(Base, { var commands = this._commands, fill = this._fill, stroke = this._stroke, + shadow = this._shadow, dash = this._strokeDash; context.beginPath(); @@ -69,6 +70,13 @@ module.exports = Class(Base, { for (var i = 0, l = commands.length; i < l; i++) commands[i](context); + if (shadow) { + context.shadowColor = shadow; + context.shadowBlur = this._shadowBlur; + context.shadowOffsetX = this._shadowOffsetX; + context.shadowOffsetY = this._shadowOffsetY; + } + if (fill){ var m = this._fillTransform; if (m){ @@ -82,6 +90,7 @@ module.exports = Class(Base, { context.fill(); } } + if (stroke){ context.strokeStyle = stroke; context.lineWidth = this._strokeWidth; From e6eb87611b89d4a0e04ae096ee2add8dddd3a0f7 Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 16:00:03 +0800 Subject: [PATCH 2/6] missing comma --- modes/canvas/base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modes/canvas/base.js b/modes/canvas/base.js index e28f403..4544dcc 100644 --- a/modes/canvas/base.js +++ b/modes/canvas/base.js @@ -162,7 +162,7 @@ var Base = Class(Node, { this._shadowOffsetX = (x != null) ? x : 0; this._shadowOffsetY = (y != null) ? y: 0; return this.invalidate(); - } + }, // Rendering From be9d93d4148aed1131754d965e498c4b91ebf066 Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 16:36:00 +0800 Subject: [PATCH 3/6] clear shadow when draw over. --- modes/canvas/shape.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/modes/canvas/shape.js b/modes/canvas/shape.js index 55ec5ea..187fe6e 100644 --- a/modes/canvas/shape.js +++ b/modes/canvas/shape.js @@ -90,7 +90,7 @@ module.exports = Class(Base, { context.fill(); } } - + if (stroke){ context.strokeStyle = stroke; context.lineWidth = this._strokeWidth; @@ -98,6 +98,13 @@ module.exports = Class(Base, { context.lineJoin = this._strokeJoin; context.stroke(); } + + if (shadow) { + context.shadowColor = 0; + context.shadowOffsetX = 0; + context.shadowOffsetY = 0; + context.shadowBlur = 0; + } } }); From 99ac23c180630bc4aa5fb2eda13ddaee7cf9d4fc Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 19:18:58 +0800 Subject: [PATCH 4/6] add sag shadow support --- modes/svg/base.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/modes/svg/base.js b/modes/svg/base.js index d445fe7..f8ca7a5 100644 --- a/modes/svg/base.js +++ b/modes/svg/base.js @@ -16,16 +16,31 @@ module.exports = Class(Node, { }, _place: function(){ + console.log('_place', this.shadowFilter); if (this.parentNode){ this._injectBrush('fill'); this._injectBrush('stroke'); + this._injectShadow(); } else { this._ejectBrush('fill'); this._ejectBrush('stroke'); + this._ejectShadow(); } return this; }, + _injectShadow: function() { + if (!this.parentNode) return; + if (this.shadowFilter) this.parentNode.defs.appendChild(this.shadowFilter); + }, + + _ejectShadow: function() { + var shadowFilter = this.shadowFilter; + if (shadowFilter && shadowFilter.parentNode) { + shadowFilter.parentNode.removeChild(shadowFilter); + } + }, + _injectBrush: function(type){ if (!this.parentNode) return; var brush = type == 'fill' ? this.fillBrush : this.strokeBrush; @@ -225,6 +240,45 @@ module.exports = Class(Node, { element.setAttribute('stroke-dasharray', dash.join(',')); } this._setColor('stroke', color); + return this; + }, + + shadow: function(color, blur, x, y) { + var element = this.element; + + this._ejectShadow(); + + var filter = createElement('filter'); + filter.setAttribute('id', 'shadowfilter' + this.uid); + filter.setAttribute('x', '-20%'); + filter.setAttribute('y', '-20%'); + filter.setAttribute('width', '200%'); + filter.setAttribute('height', '200%'); + + var offset = createElement('feOffset'); + offset.setAttribute('result', 'offOut'); + offset.setAttribute('in', 'SourceAlpha'); + offset.setAttribute('dx', x / 2); + offset.setAttribute('dy', y / 2); + + var gaussianBlur = createElement('feGaussianBlur'); + gaussianBlur.setAttribute('result', 'blurOut'); + gaussianBlur.setAttribute('in', 'offOut'); + gaussianBlur.setAttribute('stdDeviation', blur / 2); + + var blend = createElement('feBlend'); + blend.setAttribute('in', 'SourceGraphic'); + blend.setAttribute('in2', 'blurOut'); + blend.setAttribute('mode', 'normal'); + filter.appendChild(offset); + filter.appendChild(gaussianBlur); + filter.appendChild(blend); + + this.shadowFilter = filter; + this._injectShadow(); + + element.setAttribute('filter', 'url(#shadowfilter' + this.uid + ')'); + return this; } From f11bdbbda3ee9632d5bce8cb4ce1b52e7eb39480 Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 19:20:36 +0800 Subject: [PATCH 5/6] add shadow resolution resize --- modes/canvas/base.js | 8 +++++--- modes/canvas/shape.js | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/modes/canvas/base.js b/modes/canvas/base.js index 4544dcc..f50bad2 100644 --- a/modes/canvas/base.js +++ b/modes/canvas/base.js @@ -157,10 +157,12 @@ var Base = Class(Node, { }, shadow: function(color, blur, x, y) { + var resolution = typeof window !== 'undefined' && window.devicePixelRatio || 1; + this._shadow = color ? new Color(color).toString() : null; - this._shadowBlur = (blur != null) ? blur : 3; - this._shadowOffsetX = (x != null) ? x : 0; - this._shadowOffsetY = (y != null) ? y: 0; + this._shadowBlur = ((blur != null) ? blur : 3) * resolution; + this._shadowOffsetX = ((x != null) ? x : 0) * resolution; + this._shadowOffsetY = ((y != null) ? y: 0) * resolution; return this.invalidate(); }, diff --git a/modes/canvas/shape.js b/modes/canvas/shape.js index 187fe6e..1b5b9a6 100644 --- a/modes/canvas/shape.js +++ b/modes/canvas/shape.js @@ -69,7 +69,7 @@ module.exports = Class(Base, { for (var i = 0, l = commands.length; i < l; i++) commands[i](context); - + if (shadow) { context.shadowColor = shadow; context.shadowBlur = this._shadowBlur; @@ -98,7 +98,7 @@ module.exports = Class(Base, { context.lineJoin = this._strokeJoin; context.stroke(); } - + if (shadow) { context.shadowColor = 0; context.shadowOffsetX = 0; From 9d4f5367a7915cb8df25548fcdcdd9cd393877d9 Mon Sep 17 00:00:00 2001 From: undeadpark Date: Mon, 14 Dec 2015 19:35:26 +0800 Subject: [PATCH 6/6] remove debug log --- modes/svg/base.js | 1 - 1 file changed, 1 deletion(-) diff --git a/modes/svg/base.js b/modes/svg/base.js index f8ca7a5..5274d22 100644 --- a/modes/svg/base.js +++ b/modes/svg/base.js @@ -16,7 +16,6 @@ module.exports = Class(Node, { }, _place: function(){ - console.log('_place', this.shadowFilter); if (this.parentNode){ this._injectBrush('fill'); this._injectBrush('stroke');