zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-05 07:59:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Gradient supports percent value

Browse Source 
Gradient supports percent value
This commit is contained in:
Horcrux
2016-01-26 11:36:58 +08:00
parent da5a23c5dd
commit e181a1a546
12 changed files with 312 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
elements/LinearGradient.js
+17 -6
View File
@@ -9,9 +9,10 @@ let {
LinearGradient: ARTLinearGradient
} = ART;
import {set, remove} from '../lib/fillFilter';
import percentFactory from '../lib/percentFactory';
import percentToFloat from '../lib/percentToFloat';
import Stop from './Stop';
import Color from 'color';
let percentReg = /^(\-?\d+(?:\.\d+)?)(%?)$/;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
class LinearGradient extends Component{
static displayName = 'LinearGradient';
@@ -49,16 +50,26 @@ class LinearGradient extends Component{
let stops = {};
Children.forEach(this.props.children, child => {
if (child.type === Stop && child.props.stopColor && child.props.offset) {
// convert percent to float.
let matched = child.props.offset.match(percentReg);
let offset = matched[2] ? matched[1] / 100 : matched[1];
let offset = percentToFloat(child.props.offset);
// add stop
stops[offset] = Color(child.props.stopColor).alpha(+child.props.stopOpacity).rgbaString();
// TODO: convert percent to float.
set(this.id, new ARTLinearGradient(stops, x1, y1, x2, y2));
let factories = percentFactory(x1, y1, x2, y2);
if (factories) {
set(this.id, function (boundingBox) {
return new ARTLinearGradient(
stops,
factories[0](boundingBox.width),
factories[1](boundingBox.height),
factories[2](boundingBox.width),
factories[3](boundingBox.height)
);
});
} else {
set(this.id, new ARTLinearGradient(stops, x1, y1, x2, y2));
}
} else {
console.warn(`'LinearGradient' can only receive 'Stop' elements as children`);
}