From fc0f844539accfbbed1a13ad009e0529fa4680e6 Mon Sep 17 00:00:00 2001 From: terurou Date: Sat, 16 Mar 2019 13:56:29 +0900 Subject: [PATCH 1/3] Implement linear-gradient, radial-gradient and dummy-pattern in SVGGraphics. --- src/display/svg.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/src/display/svg.js b/src/display/svg.js index bdc22df50..a1bb78322 100644 --- a/src/display/svg.js +++ b/src/display/svg.js @@ -429,6 +429,7 @@ SVGGraphics = (function SVGGraphicsClosure() { var LINE_JOIN_STYLES = ['miter', 'round', 'bevel']; var clipCount = 0; var maskCount = 0; + var shadingCount = 0; SVGGraphics.prototype = { save: function SVGGraphics_save() { @@ -593,6 +594,15 @@ SVGGraphics = (function SVGGraphicsClosure() { case OPS.setStrokeRGBColor: this.setStrokeRGBColor(args[0], args[1], args[2]); break; + case OPS.setStrokeColorN: + this.setStrokeColorN(args); + break; + case OPS.setFillColorN: + this.setFillColorN(args); + break; + case OPS.shadingFill: + this.shadingFill(args[0]); + break; case OPS.setDash: this.setDash(args[0], args[1]); break; @@ -936,6 +946,91 @@ SVGGraphics = (function SVGGraphicsClosure() { this.current.tspan = this.svgFactory.createElement('svg:tspan'); this.current.xcoords = []; }, + setStrokeColorN: function SVGGraphics_setStrokeColorN(args) { + this.endPathcurrent.strokeColor = this._makeColorN_Pattern(args); + }, + setFillColorN: function SVGGraphics_setFillColorN(args) { + this.current.fillColor = this._makeColorN_Pattern(args); + }, + shadingFill: function SVGGraphics_shadingFill(args) { + var viewport = this.viewport; + var width = viewport.width; + var height = viewport.height; + var inv = Util.inverseTransform(this.transformMatrix); + var bl = Util.applyTransform([0, 0], inv); + var br = Util.applyTransform([0, height], inv); + var ul = Util.applyTransform([width, 0], inv); + var ur = Util.applyTransform([width, height], inv); + var x0 = Math.min(bl[0], br[0], ul[0], ur[0]); + var y0 = Math.min(bl[1], br[1], ul[1], ur[1]); + var x1 = Math.max(bl[0], br[0], ul[0], ur[0]); + var y1 = Math.max(bl[1], br[1], ul[1], ur[1]); + + var rect = this.svgFactory.createElement('svg:rect'); + rect.setAttributeNS(null, 'x', x0); + rect.setAttributeNS(null, 'y', y0); + rect.setAttributeNS(null, 'width', x1 - x0); + rect.setAttributeNS(null, 'height', y1 - y0); + rect.setAttributeNS(null, 'fill', this._makeShadingPattern(args)); + this._ensureTransformGroup().appendChild(rect); + }, + _makeColorN_Pattern: function SVGGraphics_makeColorN_Pattern(args) { + if (args[0] === 'TilingPattern') { + warn('Unimplemented: TilingPattern'); + return null; + } + return this._makeShadingPattern(args); + }, + _makeShadingPattern: function SVGGraphics_makeShadingPattern(args) { + switch (args[0]) { + case 'RadialAxial': + var shadingId = 'shading' + shadingCount++; + var colorStops = args[2]; + var gradient = this.svgFactory.createElement('svg:linearGradient'); + gradient.setAttributeNS(null, 'id', shadingId); + gradient.setAttributeNS(null, 'gradientUnits', 'userSpaceOnUse'); + switch (args[1]) { + case 'axial': + var point0 = args[3]; + var point1 = args[4]; + gradient.setAttributeNS(null, 'x1', point0[0]); + gradient.setAttributeNS(null, 'y1', point0[1]); + gradient.setAttributeNS(null, 'x2', point1[0]); + gradient.setAttributeNS(null, 'y2', point1[1]); + break; + case 'radial': + var focalPoint = args[3]; + var circlePoint = args[4]; + var focalRadius = args[5]; + var circleRadius = args[6]; + gradient.setAttributeNS(null, 'cx', circlePoint[0]); + gradient.setAttributeNS(null, 'cy', circlePoint[1]); + gradient.setAttributeNS(null, 'r', circleRadius); + gradient.setAttributeNS(null, 'fx', focalPoint[0]); + gradient.setAttributeNS(null, 'fy', focalPoint[1]); + gradient.setAttributeNS(null, 'fr', focalRadius); + break; + default: + throw new Error('Unknown RadialAxial type: ' + args[1]); + } + for (var i = 0, ilen = colorStops.length; i < ilen; ++i) { + var cs = colorStops[i]; + var stop = this.svgFactory.createElement('svg:stop'); + stop.setAttributeNS(null, 'offset', cs[0]); + stop.setAttributeNS(null, 'stop-color', cs[1]); + gradient.appendChild(stop); + } + this.defs.appendChild(gradient); + return 'url(#' + shadingId + ')'; + case 'Mesh': + warn('Unimplemented: Mesh'); + return null; + case 'Dummy': + return 'hotpink'; + default: + throw new Error('Unknown IR type: ' + args[0]); + } + }, setDash: function SVGGraphics_setDash(dashArray, dashPhase) { this.current.dashArray = dashArray; this.current.dashPhase = dashPhase; From c970a4b6ae56e389afaae5ffec8b9802273111a6 Mon Sep 17 00:00:00 2001 From: terurou Date: Sat, 16 Mar 2019 23:21:56 +0900 Subject: [PATCH 2/3] Fix copy-paste mistake. --- src/display/svg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/display/svg.js b/src/display/svg.js index a1bb78322..a33a7cf9d 100644 --- a/src/display/svg.js +++ b/src/display/svg.js @@ -947,7 +947,7 @@ SVGGraphics = (function SVGGraphicsClosure() { this.current.xcoords = []; }, setStrokeColorN: function SVGGraphics_setStrokeColorN(args) { - this.endPathcurrent.strokeColor = this._makeColorN_Pattern(args); + this.current.strokeColor = this._makeColorN_Pattern(args); }, setFillColorN: function SVGGraphics_setFillColorN(args) { this.current.fillColor = this._makeColorN_Pattern(args); From 9c70a3831c13f2025f17024618b5e31ddfddcece Mon Sep 17 00:00:00 2001 From: terurou Date: Sun, 17 Mar 2019 10:57:16 +0900 Subject: [PATCH 3/3] Fix to use radicalGradient. --- src/display/svg.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/display/svg.js b/src/display/svg.js index a33a7cf9d..f76e70c98 100644 --- a/src/display/svg.js +++ b/src/display/svg.js @@ -986,13 +986,14 @@ SVGGraphics = (function SVGGraphicsClosure() { case 'RadialAxial': var shadingId = 'shading' + shadingCount++; var colorStops = args[2]; - var gradient = this.svgFactory.createElement('svg:linearGradient'); - gradient.setAttributeNS(null, 'id', shadingId); - gradient.setAttributeNS(null, 'gradientUnits', 'userSpaceOnUse'); + var gradient; switch (args[1]) { case 'axial': var point0 = args[3]; var point1 = args[4]; + gradient = this.svgFactory.createElement('svg:linearGradient'); + gradient.setAttributeNS(null, 'id', shadingId); + gradient.setAttributeNS(null, 'gradientUnits', 'userSpaceOnUse'); gradient.setAttributeNS(null, 'x1', point0[0]); gradient.setAttributeNS(null, 'y1', point0[1]); gradient.setAttributeNS(null, 'x2', point1[0]); @@ -1003,6 +1004,9 @@ SVGGraphics = (function SVGGraphicsClosure() { var circlePoint = args[4]; var focalRadius = args[5]; var circleRadius = args[6]; + gradient = this.svgFactory.createElement('svg:radialGradient'); + gradient.setAttributeNS(null, 'id', shadingId); + gradient.setAttributeNS(null, 'gradientUnits', 'userSpaceOnUse'); gradient.setAttributeNS(null, 'cx', circlePoint[0]); gradient.setAttributeNS(null, 'cy', circlePoint[1]); gradient.setAttributeNS(null, 'r', circleRadius);