From 9a410936a379c9e160460d0b2e9520b35643c0ad Mon Sep 17 00:00:00 2001 From: James Zhang Date: Tue, 15 Sep 2020 22:30:00 +0800 Subject: [PATCH 1/2] Support absolute offset --- src/graphic/Style.js | 40 ++++++++++++++++++++++++++++- test/barGradient.html | 58 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 test/barGradient.html diff --git a/src/graphic/Style.js b/src/graphic/Style.js index 42280d35d..f4065c609 100644 --- a/src/graphic/Style.js +++ b/src/graphic/Style.js @@ -38,6 +38,44 @@ function createLinearGradient(ctx, obj, rect) { return canvasGradient; } +function transformAbsoluteOffset(offset, absolute, obj, rect) { + var x = obj.x == null ? 0 : obj.x; + var x2 = obj.x2 == null ? 1 : obj.x2; + var y = obj.y == null ? 0 : obj.y; + var y2 = obj.y2 == null ? 0 : obj.y2; + + if (!obj.global) { + x = x * rect.width + rect.x; + x2 = x2 * rect.width + rect.x; + y = y * rect.height + rect.y; + y2 = y2 * rect.height + rect.y; + } + + // Fix NaN when rect is Infinity + x = isNaN(x) ? 0 : x; + x2 = isNaN(x2) ? 1 : x2; + y = isNaN(y) ? 0 : y; + y2 = isNaN(y2) ? 0 : y2; + var length = Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2)); + + if (absolute === 'start' | absolute === 'end') { + if (length === 0) { + return 0; + } + if (isFinite(offset)) { + if (absolute === 'start') { + return Math.min(Math.max(offset / length, 0), 1); + } + else if (absolute === 'end') { + return Math.min(Math.max((length - offset) / length, 0), 1); + } + throw new Error('absolute must to be \'start\' or \'end\'' + offset); + } + throw new Error('offset need to be finite:' + offset); + } + return offset; +} + function createRadialGradient(ctx, obj, rect) { var width = rect.width; var height = rect.height; @@ -477,7 +515,7 @@ Style.prototype = { var colorStops = obj.colorStops; for (var i = 0; i < colorStops.length; i++) { canvasGradient.addColorStop( - colorStops[i].offset, colorStops[i].color + transformAbsoluteOffset(colorStops[i].offset, colorStops[i].absolute, obj, rect), colorStops[i].color ); } return canvasGradient; diff --git a/test/barGradient.html b/test/barGradient.html new file mode 100644 index 000000000..0d5654a07 --- /dev/null +++ b/test/barGradient.html @@ -0,0 +1,58 @@ + + + + + Bar Animation + + + + + + + \ No newline at end of file From d1e8955bb7376d4dedc0eb0779821a9dbbbe60b0 Mon Sep 17 00:00:00 2001 From: James Zhang Date: Tue, 15 Sep 2020 22:51:28 +0800 Subject: [PATCH 2/2] Fix title --- test/barGradient.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/barGradient.html b/test/barGradient.html index 0d5654a07..f481e618b 100644 --- a/test/barGradient.html +++ b/test/barGradient.html @@ -2,7 +2,7 @@ - Bar Animation + Bar Gradient