zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 14:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove useless double stops

Browse Source
This commit is contained in:
Horcrux
2016-04-21 23:06:08 +08:00
parent 67e66aa4de
commit 936a10ddb8
8 changed files with 60 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Example/examples/Gradients.js
View File

@@ -9,7 +9,8 @@ import Svg, {
Stop,
Ellipse,
Circle,
Text
Text,
Rect
} from 'react-native-art-svg';
class LinearGradientHorizontal extends Component{
@@ -87,6 +88,11 @@ class RadialGradientExample extends Component{
stopColor="#000"
stopOpacity="1"
/>
<Stop
offset="0.7"
stopColor="#0f0"
stopOpacity="1"
/>
<Stop
offset="1"
stopColor="#83a"
@@ -178,6 +184,32 @@ class FillGradientWithOpacity extends Component{
}
}
class FillGradientInRect extends Component{
static title = 'Fill a radial gradient inside a rect';
render() {
return <Svg
height="150"
width="300"
>
<Defs>
<RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<Stop
offset="0%"
stopColor="#fff"
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor="#00f"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Rect x="0" y="0" width="300" height="150" fill="url(#grad)" />
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -199,7 +231,8 @@ const samples = [
RadialGradientExample,
RadialGradientPercent,
RadialGradientPart,
FillGradientWithOpacity
FillGradientWithOpacity,
FillGradientInRect
];
export {

35
README.md
View File

@@ -1,40 +1,23 @@
### react-native-art-svg
### react-native-svg
------------------------
`react-native-art-svg` is built to provide a SVG interface to react native on both iOS and Android which is based on *ART*
`react-native-svg` is built to provide a SVG interface to react native on both iOS and Android
#### Features
1. Supports most of SVG elements and properties(Rect, Circle, Line, Polyline, Polygon, G ...).
2. 100% based on ReactNative`s ART library
3. Easy to convert SVG code into ReactNative code.
2. Easy to convert SVG code into ReactNative code.
![example](./screenShoots/art-svg.gif)
#### Install
`npm install react-native-art-svg`
```
npm install react-native-svg --save
rnpm link react-native-svg
```
##### On iOS we should add import `ART` library into your project
To add ART.xcodeproj find the file located in react-native/Libraries/ART/ART.xcodeproj and just drag it over to the Libraries section in XCode. That should look like so
![Add ART.xcodeproj to Libraries](./screenShoots/addXcodeproj.png)
Next we’ll link the binary.
With the root project selected on the left, select `Build Phases` from the center view. There will be a section called “Link Binary With Libraries”, expand it, press the + and select `libART.a`
Like so
![Link binary](./screenShoots/linkBinary.png)
([Getting react art running on react native](http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/))
##### On android
react-native\`s `ART` for android is shipped within react-native@0.18.0
#### Usage
@@ -57,7 +40,7 @@ import Svg,{
Use,
Defs,
Stop
} from 'react-native-art-svg';
} from 'react-native-svg';
class SvgExample extends Component {
render() {

8
android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java
View File

@@ -204,13 +204,7 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
private static void parseGradientStops(float[] value, int stopsCount, float[] stops, int[] stopsColors, int startColorsPosition) {
int startStops = value.length - stopsCount;
for (int i = 0; i < stopsCount; i++) {
int half = stopsCount / 2;
// stops keep in a order like this
// 0 1 2 3 4 9 8 7 6 5
stops[i] = value[startStops + (i < half ? i : (half + (stopsCount - i) - 1))];
stops[i] = value[startStops + i];
stopsColors[i] = Color.argb(
(int) (value[startColorsPosition + i * 4 + 3] * 255),
(int) (value[startColorsPosition + i * 4] * 255),

2
elements/LinearGradient.js
View File

@@ -8,7 +8,7 @@ import stopsOpacity from '../lib/stopsOpacity';
import numberProp from '../lib/numberProp';
import Gradient from './Gradient';
import {LINEAR_GRADIENT} from '../lib/extract/extractBrush';
import {insertColorStopsIntoArray} from '../lib/insertProcessor';
import insertColorStopsIntoArray from '../lib/insertProcessor';
function LinearGradientGenerator(stops, x1, y1, x2, y2) {
var type = LINEAR_GRADIENT;

4
elements/RadialGradient.js
View File

@@ -7,7 +7,7 @@ import stopsOpacity from '../lib/stopsOpacity';
import numberProp from '../lib/numberProp';
import Gradient from './Gradient';
import {RADIAL_GRADIENT} from '../lib/extract/extractBrush';
import {insertDoubleColorStopsIntoArray} from '../lib/insertProcessor';
import insertColorStopsIntoArray from '../lib/insertProcessor';
function RadialGradientGenerator(stops, fx, fy, rx, ry, cx, cy) {
@@ -33,7 +33,7 @@ function RadialGradientGenerator(stops, fx, fy, rx, ry, cx, cy) {
// 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];
insertDoubleColorStopsIntoArray(stops, brushData, 7);
insertColorStopsIntoArray(stops, brushData, 7, 0.5);
this._brush = brushData;
}

26
lib/insertProcessor.js
View File

@@ -9,7 +9,7 @@ function insertColorIntoArray(color, targetArray, atIndex) {
targetArray[atIndex + 3] = c[3];
}
function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
function insertColorsIntoArray(stops, targetArray, atIndex) {
let i = 0;
if ('length' in stops) {
@@ -19,9 +19,6 @@ function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
}
} else {
let sorted = _.sortBy(_.map(stops, (value, key) => ({key, value})), 'key');
if (reverse) {
sorted.reverse();
}
sorted.forEach(({value:stop}) => {
insertColorIntoArray(stop, targetArray, atIndex + i * 4);
@@ -31,25 +28,25 @@ function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
return atIndex + i * 4;
}
function insertColorStopsIntoArray(stops, targetArray, atIndex) {
function insertColorStopsIntoArray(stops, targetArray, atIndex, multi = 1) {
let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
insertOffsetsIntoArray(stops, targetArray, lastIndex, 1, false);
insertOffsetsIntoArray(stops, targetArray, lastIndex, multi, false);
}
function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
function insertOffsetsIntoArray(stops, targetArray, atIndex, multi) {
let offsetNumber;
let i = 0;
let arr = [];
if ('length' in stops) {
while (i < stops.length) {
offsetNumber = i / (stops.length - 1) * multi;
targetArray[atIndex + i] = reverse ? 1 - offsetNumber : offsetNumber;
targetArray[atIndex + i] = offsetNumber;
i++;
}
} else {
_.forEach(stops, (stop, offsetString) => {
offsetNumber = (+offsetString) * multi;
arr.push(reverse ? 1 - offsetNumber : offsetNumber);
arr.push(offsetNumber);
i++;
});
arr.sort();
@@ -58,14 +55,5 @@ function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
return atIndex + i;
}
function insertDoubleColorStopsIntoArray(stops, targetArray, atIndex) {
let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
lastIndex = insertColorsIntoArray(stops, targetArray, lastIndex, true);
lastIndex = insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, false);
insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, true);
}
export {
insertDoubleColorStopsIntoArray,
insertColorStopsIntoArray
}
export default insertColorStopsIntoArray;

6
package.json
View File

@@ -1,7 +1,7 @@
{
"version": "1.1.1",
"name": "react-native-art-svg",
"description": "react native svg library based on `ART`",
"version": "1.0.0",
"name": "react-native-svg",
"description": "react native svg library",
"repository": {
"type": "git",
"url": "https://github.com/magicismight/react-native-art-svg"