From fa1aea094abb32542ef0c0779cd4e36486088331 Mon Sep 17 00:00:00 2001 From: Horcrux Date: Thu, 21 Apr 2016 15:44:25 +0800 Subject: [PATCH] add clipping js code --- elements/ClipPath.js | 22 ++++++++++++++++++++++ elements/G.js | 10 +++++++++- elements/Gradient.js | 2 +- elements/LinearGradient.js | 4 ++-- elements/Path.js | 2 +- elements/RadialGradient.js | 4 ++-- elements/Svg.js | 2 +- elements/Symbol.js | 2 +- elements/Text.js | 4 ++-- elements/ViewBox.js | 2 +- lib/attributes.js | 9 +++++---- lib/{ => extract}/extractBrush.js | 0 lib/extract/extractClipping.js | 18 ++++++++++++++++++ lib/{ => extract}/extractFill.js | 14 ++++---------- lib/{ => extract}/extractProps.js | 10 ++++++++-- lib/{ => extract}/extractStroke.js | 2 +- lib/{ => extract}/extractText.js | 0 lib/{ => extract}/extractTransform.js | 0 lib/{ => extract}/extractViewbox.js | 0 19 files changed, 78 insertions(+), 29 deletions(-) create mode 100644 elements/ClipPath.js rename lib/{ => extract}/extractBrush.js (100%) create mode 100644 lib/extract/extractClipping.js rename lib/{ => extract}/extractFill.js (86%) rename lib/{ => extract}/extractProps.js (67%) rename lib/{ => extract}/extractStroke.js (97%) rename lib/{ => extract}/extractText.js (100%) rename lib/{ => extract}/extractTransform.js (100%) rename lib/{ => extract}/extractViewbox.js (100%) diff --git a/elements/ClipPath.js b/elements/ClipPath.js new file mode 100644 index 00000000..2410c657 --- /dev/null +++ b/elements/ClipPath.js @@ -0,0 +1,22 @@ +import React, { + Component, + PropTypes, + Children +} from 'react-native'; +import {NativeGroup} from './G'; + +class ClipPath extends Component{ + static displayName = 'ClipPath'; + static propTypes = { + id: PropTypes.string.isRequired + }; + + render() { + // TODO: 合并children路径 + // TODO: clip-rule + return ; + } +} + +export default ClipPath; + diff --git a/elements/G.js b/elements/G.js index e577c037..60593eb8 100644 --- a/elements/G.js +++ b/elements/G.js @@ -19,7 +19,13 @@ const transformProps = { originX: null, originY: null }; -import extractProps from '../lib/extractProps'; + +const clipProps = { + clipPath: null, + clipRule: null +}; + +import extractProps from '../lib/extract/extractProps'; class G extends Component{ static displayName = 'G'; @@ -28,6 +34,7 @@ class G extends Component{ return Children.map(this.props.children, child => cloneElement(child, { ...this.props, ...transformProps, + ...clipProps, ...child.props, id: null })); @@ -54,6 +61,7 @@ class G extends Component{ } } } + var NativeGroup = createReactNativeComponentClass({ validAttributes: GroupAttributes, uiViewClassName: 'RNSVGGroup' diff --git a/elements/Gradient.js b/elements/Gradient.js index 9c1ebbda..25c66602 100644 --- a/elements/Gradient.js +++ b/elements/Gradient.js @@ -4,7 +4,7 @@ import React, { Children } from 'react-native'; import {NativeGroup} from './G'; -import {set, remove} from '../lib/extractFill'; +import {set, remove} from '../lib/extract/extractFill'; import percentFactory from '../lib/percentFactory'; import percentToFloat from '../lib/percentToFloat'; import Stop from './Stop'; diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index d320742a..06464ed5 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -7,7 +7,7 @@ import React, { import stopsOpacity from '../lib/stopsOpacity'; import numberProp from '../lib/numberProp'; import Gradient from './Gradient'; -import {LINEAR_GRADIENT} from '../lib/extractBrush'; +import {LINEAR_GRADIENT} from '../lib/extract/extractBrush'; import {insertColorStopsIntoArray} from '../lib/insertProcessor'; function LinearGradientGenerator(stops, x1, y1, x2, y2) { @@ -73,4 +73,4 @@ class LinearGradient extends Gradient{ } export default LinearGradient; - +export {LinearGradientGenerator}; diff --git a/elements/Path.js b/elements/Path.js index a1832fc7..cad066d2 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -8,7 +8,7 @@ import React, { import Defs from './Defs'; import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass'; import calculateBoundingBox from '../lib/calculateBoundingBox'; -import extractProps from '../lib/extractProps'; +import extractProps from '../lib/extract/extractProps'; import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath'; import {PathAttributes} from '../lib/attributes'; diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index d1da5508..122bb300 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -6,7 +6,7 @@ import React, { import stopsOpacity from '../lib/stopsOpacity'; import numberProp from '../lib/numberProp'; import Gradient from './Gradient'; -import {RADIAL_GRADIENT} from '../lib/extractBrush'; +import {RADIAL_GRADIENT} from '../lib/extract/extractBrush'; import {insertDoubleColorStopsIntoArray} from '../lib/insertProcessor'; @@ -84,4 +84,4 @@ class RadialGradient extends Gradient{ } export default RadialGradient; - +export {RadialGradientGenerator}; diff --git a/elements/Svg.js b/elements/Svg.js index 74e484c1..8ac10727 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -6,7 +6,7 @@ import React, { View, requireNativeComponent } from 'react-native'; -import extractViewbox from '../lib/extractViewbox'; +import extractViewbox from '../lib/extract/extractViewbox'; import ViewBox from './ViewBox'; import _ from 'lodash'; diff --git a/elements/Symbol.js b/elements/Symbol.js index 9b4b6f70..2c58ff57 100644 --- a/elements/Symbol.js +++ b/elements/Symbol.js @@ -5,7 +5,7 @@ import React, { import ViewBox from './ViewBox'; import Defs from './Defs'; -import extractViewbox from '../lib/extractViewbox'; +import extractViewbox from '../lib/extract/extractViewbox'; class SymbolElement extends Component{ static displayName = 'Symbol'; static propType = { diff --git a/elements/Text.js b/elements/Text.js index 1578c9f6..27a5ee46 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -3,8 +3,8 @@ import React, { } from 'react-native'; import Defs from './Defs'; import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass'; -import extractProps from '../lib/extractProps'; -import extractText from '../lib/extractText'; +import extractProps from '../lib/extract/extractProps'; +import extractText from '../lib/extract/extractText'; import {TextAttributes} from '../lib/attributes'; import numberProp from '../lib/numberProp'; diff --git a/elements/ViewBox.js b/elements/ViewBox.js index dda03d32..0d6d4540 100644 --- a/elements/ViewBox.js +++ b/elements/ViewBox.js @@ -4,7 +4,7 @@ import React, { } from 'react-native'; import G from './G'; -import extractViewbox from '../lib/extractViewbox'; +import extractViewbox from '../lib/extract/extractViewbox'; class ViewBox extends Component{ static displayName = 'ViewBox'; static propType = { diff --git a/lib/attributes.js b/lib/attributes.js index cf182e43..4484ca0c 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -42,13 +42,14 @@ var NodeAttributes = { transform: { diff: arrayDiffer }, - opacity: true + opacity: true, + clipPath: { + diff: arrayDiffer + }, + clipRule: true }; var GroupAttributes = Object.assign({ - clipping: { - diff: arrayDiffer - } }, NodeAttributes); var RenderableAttributes = Object.assign({ diff --git a/lib/extractBrush.js b/lib/extract/extractBrush.js similarity index 100% rename from lib/extractBrush.js rename to lib/extract/extractBrush.js diff --git a/lib/extract/extractClipping.js b/lib/extract/extractClipping.js new file mode 100644 index 00000000..2624e51e --- /dev/null +++ b/lib/extract/extractClipping.js @@ -0,0 +1,18 @@ +import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath'; + +const clipRules = { + evenodd: 0, + nonzero: 1 +}; + +export default function (props) { + let {clipPath, clipRule} = props; + let clippingProps = {}; + + if (clipPath) { + clippingProps.clipPath = new SerializablePath(clipPath).toJSON(); + clippingProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1; + } + + return clippingProps; +} diff --git a/lib/extractFill.js b/lib/extract/extractFill.js similarity index 86% rename from lib/extractFill.js rename to lib/extract/extractFill.js index 605315e0..302fe9ed 100644 --- a/lib/extractFill.js +++ b/lib/extract/extractFill.js @@ -1,19 +1,13 @@ -import rgba from './rgba'; +import rgba from '../rgba'; +import {LinearGradientGenerator} from '../../elements/LinearGradient'; +import {RadialGradientGenerator} from '../../elements/RadialGradient'; import extractBrush from './extractBrush'; -import { - ART -} from 'react-native'; - -let { - LinearGradient, - RadialGradient - } = ART; let fillPatterns = {}; let fillReg = /^url\(#(\w+?)\)$/; function isGradient(obj) { - return obj instanceof LinearGradient || obj instanceof RadialGradient; + return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator; } function set(id, pattern) { diff --git a/lib/extractProps.js b/lib/extract/extractProps.js similarity index 67% rename from lib/extractProps.js rename to lib/extract/extractProps.js index 7d0948cb..59a28461 100644 --- a/lib/extractProps.js +++ b/lib/extract/extractProps.js @@ -1,6 +1,8 @@ import extractFill from './extractFill'; import extractStroke from './extractStroke'; import extractTransform from './extractTransform'; +import extractClipping from './extractClipping'; +import _ from 'lodash'; export default function(props, options = {stroke: true, join: true, transform: true, fill: true}) { if (props.visible === false) { @@ -12,12 +14,16 @@ export default function(props, options = {stroke: true, join: true, transform: t opacity: +props.opacity || 1 }; + if (props.clipPath) { + _.assign(extractedProps, extractClipping(props)); + } + if (options.stroke) { - Object.assign(extractedProps, extractStroke(props)); + _.assign(extractedProps, extractStroke(props)); } if (options.fill) { - Object.assign(extractedProps, extractFill.call(this, props)); + _.assign(extractedProps, extractFill.call(this, props)); } if (options.transform) { diff --git a/lib/extractStroke.js b/lib/extract/extractStroke.js similarity index 97% rename from lib/extractStroke.js rename to lib/extract/extractStroke.js index b6f53d24..2aa4cc6e 100644 --- a/lib/extractStroke.js +++ b/lib/extract/extractStroke.js @@ -1,4 +1,4 @@ -import rgba from './rgba'; +import rgba from '../rgba'; import extractBrush from './extractBrush'; let separator = /\s*,\s*/; diff --git a/lib/extractText.js b/lib/extract/extractText.js similarity index 100% rename from lib/extractText.js rename to lib/extract/extractText.js diff --git a/lib/extractTransform.js b/lib/extract/extractTransform.js similarity index 100% rename from lib/extractTransform.js rename to lib/extract/extractTransform.js diff --git a/lib/extractViewbox.js b/lib/extract/extractViewbox.js similarity index 100% rename from lib/extractViewbox.js rename to lib/extract/extractViewbox.js