diff --git a/Example/examples/Clipping.js b/Example/examples/Clipping.js index 7a3573bb..23f41579 100644 --- a/Example/examples/Clipping.js +++ b/Example/examples/Clipping.js @@ -164,7 +164,7 @@ class TextClipping extends Component{ fontWeight="bold" fill="red" stroke="blue" - textAnchor="center" + textAnchor="middle" clipPath="url(#clip)" >NOT THE FACE ; diff --git a/Example/examples/G.js b/Example/examples/G.js index 57288fde..193a1e57 100644 --- a/Example/examples/G.js +++ b/Example/examples/G.js @@ -84,7 +84,7 @@ class GTransform extends Component{ y="75" stroke="#600" fill="#600" - textAnchor="center" + textAnchor="middle" > Text grouped with shapes diff --git a/Example/examples/Stroking.js b/Example/examples/Stroking.js index c62437f2..15aef522 100644 --- a/Example/examples/Stroking.js +++ b/Example/examples/Stroking.js @@ -76,7 +76,7 @@ class StrokeDashoffset extends Component{ fontWeight="bold" x="100" y="40" - textAnchor="center" + textAnchor="middle" strokeDasharray="100" strokeDashoffset="60" >STROKE diff --git a/Example/examples/Text.js b/Example/examples/Text.js index a20bca72..485e60ba 100644 --- a/Example/examples/Text.js +++ b/Example/examples/Text.js @@ -22,7 +22,7 @@ class TextExample extends Component{ x="50" y="9" fill="red" - textAnchor="center" + textAnchor="middle" >I love SVG! ; } @@ -81,7 +81,7 @@ class TextFill extends Component{ fontWeight="bold" x="100" y="20" - textAnchor="center" + textAnchor="middle" >FILL TEXT ; } @@ -109,7 +109,7 @@ class TextStroke extends Component{ fontWeight="bold" x="100" y="20" - textAnchor="center" + textAnchor="middle" >STROKE TEXT ; } @@ -148,7 +148,7 @@ const icon = 字 diff --git a/elements/G.js b/elements/G.js index d56c7fd6..b08eeb91 100644 --- a/elements/G.js +++ b/elements/G.js @@ -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; }, { diff --git a/elements/Gradient.js b/elements/Gradient.js index 73652692..0131411d 100644 --- a/elements/Gradient.js +++ b/elements/Gradient.js @@ -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`); } diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index ba30e2c3..6d44690d 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -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]); } ); } diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index 4d42d28d..14b670a6 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -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]); } ); } diff --git a/elements/Text.js b/elements/Text.js index e4a247d0..602b236a 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -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; diff --git a/elements/ViewBox.js b/elements/ViewBox.js index c21fc945..8fb69a75 100644 --- a/elements/ViewBox.js +++ b/elements/ViewBox.js @@ -20,6 +20,7 @@ class ViewBox extends Component{ x = viewbox.x; y = viewbox.y; } + return