diff --git a/Circle.js b/Circle.js index a5957a6..03e2e37 100644 --- a/Circle.js +++ b/Circle.js @@ -92,7 +92,6 @@ export default class ProgressCircle extends Component { radius={size / 2} startAngle={0} endAngle={(indeterminate ? 1.8 : 2) * Math.PI} - direction={direction} stroke={borderColor || color} strokeWidth={borderWidth} />) : false} diff --git a/README.md b/README.md index be4ef79..1df8a61 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,13 @@ Progress indicators and spinners for React Native using ReactART. ![progress-demo](https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif) -**Note: Full android support will come when ReactART is ported to android.** - ## Installation `$ npm install react-native-progress --save` ### ReactART based components -To use the `Pie` or `Circle` components, you need to include the ART library in your project. +To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included. #### For CocoaPod users: @@ -100,17 +98,6 @@ All of the props under *Properties* in addition to the following: ## [Changelog](https://github.com/oblador/react-native-progress/releases) -## Todo - - [x] Progress bar - - [x] Circular progress indicator - - [x] Pie progress indicator - - [x] Animation - - [x] Indeterminate state - - [x] Progress percentage text - - [ ] Optional color change on success/failure - - [x] Snail/rainbow style spinners - - [ ] Safari style navigation progress bar - ## Thanks To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name. diff --git a/Shapes/Arc.js b/Shapes/Arc.js index 45ad2c7..afe0b4f 100644 --- a/Shapes/Arc.js +++ b/Shapes/Arc.js @@ -12,7 +12,6 @@ const CIRCLE = Math.PI * 2; function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) { let startAngle = startAngleArg; let endAngle = endAngleArg; - const arcMethod = direction === 'counter-clockwise' ? 'counterArc' : 'arc'; if (endAngle - startAngle >= CIRCLE) { endAngle = CIRCLE + (endAngle % CIRCLE); } else { @@ -21,31 +20,29 @@ function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) { startAngle = startAngle % CIRCLE; const angle = startAngle > endAngle ? CIRCLE - startAngle + endAngle : endAngle - startAngle; - - let path = ART.Path(); - if (angle >= CIRCLE) { - path + return ART.Path() .moveTo(x + radius, y) - [arcMethod](0, radius * 2, radius, radius) - [arcMethod](0, radius * -2, radius, radius) + .arc(0, radius * 2, radius, radius) + .arc(0, radius * -2, radius, radius) .close(); - } else { - const directionFactor = direction === 'counter-clockwise' ? -1 : 1; - endAngle *= directionFactor; - startAngle *= directionFactor; - const startSine = Math.sin(startAngle); - const startCosine = Math.cos(startAngle); - const endSine = Math.sin(endAngle); - const endCosine = Math.cos(endAngle); - const deltaSine = endSine - startSine; - const deltaCosine = endCosine - startCosine; - - path - .moveTo(x + radius * (1 + startSine), y + radius - radius * startCosine) - [arcMethod](radius * deltaSine, radius * -deltaCosine, radius, radius, angle > Math.PI); } - return path; + + const directionFactor = direction === 'counter-clockwise' ? -1 : 1; + endAngle *= directionFactor; + startAngle *= directionFactor; + const startSine = Math.sin(startAngle); + const startCosine = Math.cos(startAngle); + const endSine = Math.sin(endAngle); + const endCosine = Math.cos(endAngle); + const deltaSine = endSine - startSine; + const deltaCosine = endCosine - startCosine; + + const arcFlag = angle > Math.PI ? 1 : 0; + const reverseFlag = direction === 'counter-clockwise' ? 0 : 1; + + return `M${x + radius * (1 + startSine)} ${y + radius - radius * startCosine} + A${radius} ${radius} 0 ${arcFlag} ${reverseFlag} ${x + radius * (1 + endSine)} ${y + radius - radius * endCosine}`; } export default class Arc extends Component { diff --git a/Shapes/Sector.js b/Shapes/Sector.js index 108250e..10bc752 100644 --- a/Shapes/Sector.js +++ b/Shapes/Sector.js @@ -10,24 +10,25 @@ import { ART } from 'react-native'; const CIRCLE = Math.PI * 2; function makeSectorPath(x, y, angle, radius) { - let path = ART.Path() - .moveTo(x, y) - .move(radius, 0); - if (angle >= CIRCLE) { - path + return ART.Path() + .moveTo(x, y) + .move(radius, 0) .arc(0, radius * 2, radius, radius) - .arc(0, radius * -2, radius, radius); - } else { - const sine = Math.sin(angle); - const cosine = Math.cos(angle); - - path - .arc(radius * sine, -radius * (cosine - 1), radius, radius, angle > Math.PI) - .line(-radius * sine, radius * cosine); + .arc(0, radius * -2, radius, radius) + .close(); } - path.close(); - return path; + + const startAngle = Math.PI / 2 - angle; + const endAngle = Math.PI / 2; + const arcFlag = angle > Math.PI ? 1 : 0; + const centerX = x + radius; + const centerY = y + radius; + + return `M${centerX} ${centerY} + L${centerX + Math.cos(startAngle) * radius} ${centerY - Math.sin(startAngle) * radius} + A${radius} ${radius} 0 ${arcFlag} 0 ${centerX + Math.cos(endAngle) * radius} ${centerY - Math.sin(endAngle) * radius} + L${centerX} ${centerY}`; } export default class Sector extends Component {