diff --git a/CHANGELOG.md b/CHANGELOG.md index aec615b..2c85496 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ### Changelog ### #### v1.0.0-alpha4 - TBD #### + * Add support for radial-gradients * Fix logging option (#1302) * Add support for rendering webgl canvas content (#646) * Fix external SVG loading with proxies (#802) diff --git a/docs/features.md b/docs/features.md index b6af7e1..7c0cd74 100644 --- a/docs/features.md +++ b/docs/features.md @@ -11,6 +11,7 @@ Below is a list of all the supported CSS properties and values. - background-image - url() - linear-gradient() + - radial-gradient() - background-origin - background-position - background-size @@ -68,7 +69,6 @@ These CSS properties are **NOT** currently supported - [filter](https://github.com/niklasvh/html2canvas/issues/493) - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085) - [list-style](https://github.com/niklasvh/html2canvas/issues/177) - - radial-gradient() - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162) - word-break - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258) diff --git a/src/Gradient.js b/src/Gradient.js index 78aa405..a197dbd 100644 --- a/src/Gradient.js +++ b/src/Gradient.js @@ -32,19 +32,10 @@ export type ColorStop = { stop: number }; -export type LinearGradient = { +export interface Gradient { type: GradientType, - direction: Direction, colorStops: Array -}; - -export type RadialGradient = { - type: GradientType, - shape: RadialGradientShapeType, - center: Point, - radius: Point, - colorStops: Array -}; +} export const GRADIENT_TYPE = { LINEAR_GRADIENT: 0, @@ -68,11 +59,44 @@ const LENGTH_FOR_POSITION = { bottom: new Length('100%') }; +export class LinearGradient implements Gradient { + type: GradientType; + colorStops: Array; + direction: Direction; + + constructor(colorStops: Array, direction: Direction) { + this.type = GRADIENT_TYPE.LINEAR_GRADIENT; + this.colorStops = colorStops; + this.direction = direction; + } +} + +export class RadialGradient implements Gradient { + type: GradientType; + colorStops: Array; + shape: RadialGradientShapeType; + center: Point; + radius: Point; + + constructor( + colorStops: Array, + shape: RadialGradientShapeType, + center: Point, + radius: Point + ) { + this.type = GRADIENT_TYPE.RADIAL_GRADIENT; + this.colorStops = colorStops; + this.shape = shape; + this.center = center; + this.radius = radius; + } +} + export const parseGradient = ( container: NodeContainer, {args, method, prefix}: BackgroundSource, bounds: Bounds -): ?LinearGradient | RadialGradient => { +): ?Gradient => { if (method === 'linear-gradient') { return parseLinearGradient(args, bounds, !!prefix); } else if (method === 'gradient' && args[0] === 'linear') { @@ -83,10 +107,11 @@ export const parseGradient = ( !!prefix ); } else if (method === 'radial-gradient') { - if (prefix === '-webkit-') { - args = transformWebkitRadialGradientArgs(args); - } - return parseRadialGradient(container, args, bounds); + return parseRadialGradient( + container, + prefix === '-webkit-' ? transformWebkitRadialGradientArgs(args) : args, + bounds + ); } else if (method === 'gradient' && args[0] === 'radial') { return parseRadialGradient( container, @@ -176,11 +201,7 @@ const parseLinearGradient = ( bounds.height * 2 ); - return { - type: GRADIENT_TYPE.LINEAR_GRADIENT, - direction, - colorStops: parseColorStops(args, firstColorStopIndex, lineLength) - }; + return new LinearGradient(parseColorStops(args, firstColorStopIndex, lineLength), direction); }; const parseRadialGradient = ( @@ -238,13 +259,12 @@ const parseRadialGradient = ( bounds ); - return { - type: GRADIENT_TYPE.RADIAL_GRADIENT, + return new RadialGradient( + parseColorStops(args, m ? 1 : 0, Math.min(gradientRadius.x, gradientRadius.y)), shape, - center: gradientCenter, - radius: gradientRadius, - colorStops: parseColorStops(args, m ? 1 : 0, Math.min(gradientRadius.x, gradientRadius.y)) - }; + gradientCenter, + gradientRadius + ); }; const calculateGradientDirection = (radian: number, bounds: Bounds): Direction => {