zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-19 21:45:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix text context and complete gradient js code

Browse Source
This commit is contained in:
Horcrux
2016-04-26 22:08:54 +08:00
parent 1baf00c034
commit 902bdcb1d0
17 changed files with 72 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Example/examples/Clipping.js
View File

@@ -164,7 +164,7 @@ class TextClipping extends Component{
fontWeight="bold"
fill="red"
stroke="blue"
textAnchor="center"
textAnchor="middle"
clipPath="url(#clip)"
>NOT THE FACE</Text>
</Svg>;

2
Example/examples/G.js
View File

@@ -84,7 +84,7 @@ class GTransform extends Component{
y="75"
stroke="#600"
fill="#600"
textAnchor="center"
textAnchor="middle"
>
Text grouped with shapes</Text>
</G>

2
Example/examples/Stroking.js
View File

@@ -76,7 +76,7 @@ class StrokeDashoffset extends Component{
fontWeight="bold"
x="100"
y="40"
textAnchor="center"
textAnchor="middle"
strokeDasharray="100"
strokeDashoffset="60"
>STROKE</Text>

8
Example/examples/Text.js
View File

@@ -22,7 +22,7 @@ class TextExample extends Component{
x="50"
y="9"
fill="red"
textAnchor="center"
textAnchor="middle"
>I love SVG!</Text>
</Svg>;
}
@@ -81,7 +81,7 @@ class TextFill extends Component{
fontWeight="bold"
x="100"
y="20"
textAnchor="center"
textAnchor="middle"
>FILL TEXT</Text>
</Svg>;
}
@@ -109,7 +109,7 @@ class TextStroke extends Component{
fontWeight="bold"
x="100"
y="20"
textAnchor="center"
textAnchor="middle"
>STROKE TEXT</Text>
</Svg>;
}
@@ -148,7 +148,7 @@ const icon = <Svg
y="2"
fontSize="14"
fontWeight="bold"
textAnchor="center"
textAnchor="middle"
fill="none"
stroke="blue"
>字</Text>

6
elements/G.js
View File

@@ -9,7 +9,7 @@ import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/
import Defs from './Defs';
import _ from 'lodash';
import {GroupAttributes} from '../lib/attributes';
import {numberProp, shapeProps} from '../lib/props';
import {numberProp, contextProps, textProps} from '../lib/props';
import extractProps from '../lib/extract/extractProps';
@@ -19,11 +19,11 @@ class G extends Component{
static childContextTypes = {
svgId: numberProp,
isInGroup: PropTypes.bool,
...shapeProps
...contextProps
};
getChildContext = () => {
return _.reduce(shapeProps, (props, value, key) => {
return _.reduce(contextProps, (props, value, key) => {
props[key] = this.props[key];
return props;
}, {

11
elements/Gradient.js
View File

@@ -5,7 +5,6 @@ import React, {
} from 'react-native';
import {NativeGroup} from './G';
import {set, remove} from '../lib/extract/patterns';
import percentFactory from '../lib/percentFactory';
import percentToFloat from '../lib/percentToFloat';
import Stop from './Stop';
import Color from 'color';
@@ -28,7 +27,7 @@ class RadialGradient extends Component{
remove(this.id);
};
render(distanceProps, fromPercent, fromNumber) {
render(generator) {
let stops = {};
Children.forEach(this.props.children, child => {
if (child.type === Stop && child.props.stopColor && child.props.offset) {
@@ -37,13 +36,7 @@ class RadialGradient extends Component{
// add stop
stops[offset] = Color(child.props.stopColor).alpha(+child.props.stopOpacity);
let factories = percentFactory(...distanceProps);
if (factories) {
set(this.id, fromPercent.bind(null, factories, stops));
} else {
set(this.id, fromNumber.bind(null, stops));
}
set(this.id, generator.bind(null, stops));
} else {
console.warn(`'RadialGradient' can only receive 'Stop' elements as children`);
}

36
elements/LinearGradient.js
View File

@@ -11,26 +11,7 @@ import {LINEAR_GRADIENT} from '../lib/extract/extractBrush';
import insertColorStopsIntoArray from '../lib/insertProcessor';
function LinearGradientGenerator(stops, x1, y1, x2, y2) {
var type = LINEAR_GRADIENT;
if (arguments.length < 5) {
var angle = ((x1 == null) ? 270 : x1) * Math.PI / 180;
var x = Math.cos(angle);
var y = -Math.sin(angle);
var l = (Math.abs(x) + Math.abs(y)) / 2;
x *= l; y *= l;
x1 = 0.5 - x;
x2 = 0.5 + x;
y1 = 0.5 - y;
y2 = 0.5 + y;
this._bb = true;
} else {
this._bb = false;
}
var brushData = [type, +x1, +y1, +x2, +y2];
var brushData = [LINEAR_GRADIENT, x1, y1, x2, y2];
insertColorStopsIntoArray(stops, brushData, 5);
this._brush = brushData;
}
@@ -53,20 +34,9 @@ class LinearGradient extends Gradient{
x2,
y2
} = this.props;
let gradientProps = [x1, y1, x2, y2];
return super.render(
gradientProps,
function (factories, stops, boundingBox, opacity) {
return new LinearGradientGenerator(
stopsOpacity(stops, opacity),
factories[0](boundingBox.width),
factories[1](boundingBox.height),
factories[2](boundingBox.width),
factories[3](boundingBox.height)
);
},
function (stops, opacity) {
return new LinearGradientGenerator(stopsOpacity(stops, opacity), ...gradientProps);
(stops, opacity) => {
return new LinearGradientGenerator(stopsOpacity(stops, opacity), ...[x1, y1, x2, y2]);
}
);
}

43
elements/RadialGradient.js
View File

@@ -11,28 +11,7 @@ import insertColorStopsIntoArray from '../lib/insertProcessor';
function RadialGradientGenerator(stops, fx, fy, rx, ry, cx, cy) {
if (ry == null) {
ry = rx;
}
if (cx == null) {
cx = fx;
}
if (cy == null) {
cy = fy;
}
if (fx == null) {
// As a convenience we allow the whole radial gradient to cover the
// bounding box. We should consider dropping this API.
fx = fy = rx = ry = cx = cy = 0.5;
this._bb = true;
} else {
this._bb = false;
}
// The ART API expects the radial gradient to be repeated at the edges.
// To simulate this we render the gradient twice as large and add double
// color stops. Ideally this API would become more restrictive so that this
// extra work isn't needed.
var brushData = [RADIAL_GRADIENT, +fx, +fy, +rx * 2, +ry * 2, +cx, +cy];
var brushData = [RADIAL_GRADIENT, fx, fy, rx, ry, cx, cy];
insertColorStopsIntoArray(stops, brushData, 7, 0.5);
this._brush = brushData;
}
@@ -60,24 +39,10 @@ class RadialGradient extends Gradient{
cy,
r
} = this.props;
let gradientProps = [fx, fy, rx || r, ry || r, cx, cy];
return super.render(
gradientProps,
function (factories, stops, boundingBox, opacity) {
let {x1,y1,width, height} = boundingBox;
return new RadialGradientGenerator(
stopsOpacity(stops, opacity),
x1 + factories[0](width),
y1 + factories[1](height),
factories[2](width),
factories[3](height),
x1 + factories[4](width),
y1 + factories[5](height)
);
},
function (stops, opacity) {
return new RadialGradientGenerator(stopsOpacity(stops, opacity), ...gradientProps);
(stops, opacity) => {
return new RadialGradientGenerator(stopsOpacity(stops, opacity), ...[fx, fy, rx || r, ry || r, cx, cy]);
}
);
}

27
elements/Text.js
View File

@@ -1,24 +1,41 @@
import React, {
Component
Component,
PropTypes
} from 'react-native';
import Defs from './Defs';
import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
import extractProps from '../lib/extract/extractProps';
import extractText from '../lib/extract/extractText';
import {TextAttributes} from '../lib/attributes';
import {numberProp} from '../lib/props';
import {numberProp, textProps, fillProps, strokeProps, pathProps} from '../lib/props';
class Text extends Component{
static displayName = 'Text';
static propTypes = {
x: numberProp,
y: numberProp,
dx: numberProp,
dy: numberProp
dy: numberProp,
...textProps,
...fillProps,
...strokeProps,
...pathProps
};
static contextTypes = {
...textProps,
...fillProps,
...strokeProps,
isInGroup: PropTypes.bool
};
render() {
let {props} = this;
if (this.context.isInGroup) {
props = _.defaults(this.context, props, {
isInGroup: null
});
}
let x = 0;
if (props.x) {
x = props.dx ? +props.x + (+props.dx) : +props.x;

1
elements/ViewBox.js
View File

@@ -20,6 +20,7 @@ class ViewBox extends Component{
x = viewbox.x;
y = viewbox.y;
}
return <G
{...this.props}
x={x}

35
lib/extract/extractBrush.js
View File

@@ -4,41 +4,11 @@ const LINEAR_GRADIENT = 1;
const RADIAL_GRADIENT = 2;
const PATTERN = 3;
function applyBoundingBoxToBrushData(brushData, props) {
let type = brushData[0];
let width = +props.width;
let height = +props.height;
if (type === LINEAR_GRADIENT) {
brushData[1] *= width;
brushData[2] *= height;
brushData[3] *= width;
brushData[4] *= height;
} else if (type === RADIAL_GRADIENT) {
brushData[1] *= width;
brushData[2] *= height;
brushData[3] *= width;
brushData[4] *= height;
brushData[5] *= width;
brushData[6] *= height;
} else if (type === PATTERN) {
// todo
}
}
export default function (colorOrBrush, props) {
export default function (colorOrBrush) {
if (!colorOrBrush) {
return null;
}
if (colorOrBrush._brush) {
if (colorOrBrush._bb) {
// The legacy API for Gradients allow for the bounding box to be used
// as a convenience for specifying gradient positions. This should be
// deprecated. It's not properly implemented in canvas mode. ReactART
// doesn't handle update to the bounding box correctly. That's why we
// mutate this so that if it's reused, we reuse the same resolved box.
applyBoundingBoxToBrushData(colorOrBrush._brush, props);
colorOrBrush._bb = false;
}
return colorOrBrush._brush;
}
@@ -48,5 +18,6 @@ export default function (colorOrBrush, props) {
export {
LINEAR_GRADIENT,
RADIAL_GRADIENT
RADIAL_GRADIENT,
PATTERN
}

8
lib/extract/extractFill.js
View File

@@ -7,13 +7,13 @@ const fillRules = {
nonzero: 1
};
function fillFilter(props, dimensions) {
function fillFilter(props) {
let {fill} = props;
if (fill === 'none') {
return null;
} else if (fill) {
return patterns(fill, +props.fillOpacity, dimensions, props.svgId);
return patterns(fill, +props.fillOpacity, props.svgId);
} else if (props.fill === undefined) {
let fillOpacity = +props.fillOpacity;
if (isNaN(fillOpacity)) {
@@ -25,8 +25,8 @@ function fillFilter(props, dimensions) {
}
}
export default function(props, dimensions) {
let fill = extractBrush(fillFilter(props, dimensions), props);
export default function(props) {
let fill = extractBrush(fillFilter(props), props);
let fillRule = fillRules[props.fillRule] === 0 ? 0 : 1;
return {

6
lib/extract/extractProps.js
View File

@@ -14,18 +14,16 @@ export default function(props, options = {stroke: true, join: true, transform: t
opacity: +props.opacity || 1
};
let dimensions = this.getBoundingBox ? this.getBoundingBox() : null;
if (props.clipPath) {
_.assign(extractedProps, extractClipping(props));
}
if (options.stroke) {
_.assign(extractedProps, extractStroke(props, dimensions));
_.assign(extractedProps, extractStroke(props));
}
if (options.fill) {
_.assign(extractedProps, extractFill(props, dimensions));
_.assign(extractedProps, extractFill(props));
}
if (options.transform) {

8
lib/extract/extractStroke.js
View File

@@ -15,7 +15,7 @@ const joins = {
round: 1
};
function strokeFilter(props, dimensions) {
function strokeFilter(props) {
let strokeWidth = +props.strokeWidth;
let {stroke} = props;
if (!strokeWidth && !stroke) {
@@ -39,7 +39,7 @@ function strokeFilter(props, dimensions) {
// TODO: propTypes check
return {
stroke: patterns(stroke, +props.strokeOpacity, dimensions, props.svgId),
stroke: patterns(stroke, +props.strokeOpacity, props.svgId),
strokeLinecap: caps[props.strokeLinecap] || 0,
strokeLinejoin: joins[props.strokeLinejoin] || 0,
strokeDasharray: strokeDasharray || null,
@@ -48,8 +48,8 @@ function strokeFilter(props, dimensions) {
};
}
export default function(props, dimensions) {
let strokeProps = strokeFilter(props, dimensions);
export default function(props) {
let strokeProps = strokeFilter(props);
return strokeProps ? {
...strokeProps,

6
lib/extract/extractText.js
View File

@@ -76,9 +76,9 @@ function extractFont(font) {
}
const anchord = {
right: 1,
center: 2,
left: 0
end: 1,
middle: 2,
start: 0
};
export default function(props) {

6
lib/extract/patterns.js
View File

@@ -23,7 +23,7 @@ export {
remove
}
export default function(patternSting, opacity, dimensions, svgId) {
export default function(patternSting, opacity, svgId) {
if (isGradient(patternSting)) {
return patternSting;
}
@@ -40,12 +40,8 @@ export default function(patternSting, opacity, dimensions, svgId) {
let pattern = patterns[patternName];
if (pattern) {
if (pattern.length === 2) {
return pattern(dimensions, opacity);
} else {
return pattern(opacity);
}
}
return null;
}

17
lib/props.js
View File

@@ -26,8 +26,14 @@ const strokeProps = {
};
const textProps = {
textAnchor: PropTypes.oneOf(['right', 'center', 'left']),
path: PropTypes.string
textAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
path: PropTypes.string,
fontFamily: PropTypes.string,
fontSize: numberProp,
fontWeight: PropTypes.string,
fontStyle: PropTypes.string,
font: PropTypes.object,
lines: numberProp
};
const transformProps = {
@@ -78,13 +84,14 @@ const rectProps = {
ry: numberProp
};
const shapeProps = {
const contextProps = {
...circleProps,
...ellipseProps,
...lineProps,
...rectProps,
...fillProps,
...strokeProps
...strokeProps,
...textProps
};
export {
@@ -98,6 +105,6 @@ export {
ellipseProps,
lineProps,
rectProps,
shapeProps,
contextProps,
pathProps
}