Comments (3)
nuttylord
commented on May 27, 2024
2
mess around with the maths in src/clockface.js
Heres my attempt at it that works pretty well.
i made changes to lines 15, 16, 40, 46, 47 and 49
import React, { PureComponent, PropTypes } from 'react';
import { G, Circle, Text, Line } from 'react-native-svg';
import range from 'lodash.range';
export default class ClockFace extends PureComponent {
static propTypes = {
r: PropTypes.number,
stroke: PropTypes.string,
}
render() {
const { r, stroke } = this.props;
const faceRadius = r - 2;
const textRadius = r - 20;
return (
<G>
{
range(48).map(i => {
const cos = Math.cos(2 * Math.PI / 48 * i);
const sin = Math.sin(2 * Math.PI / 48 * i);
return (
<Line
key={i}
stroke={stroke}
strokeWidth={i % 2 === 0 ? 2 : 1}
x1={cos * faceRadius}
y1={sin * faceRadius}
x2={cos * (faceRadius - 7)}
y2={sin * (faceRadius - 7)}
/>
);
})
}
<G transform={{translate: "0, -9"}}>
{
range(24).map((h, i) => (
<Text
key={i}
fill={stroke}
fontSize="11"
textAnchor="middle"
x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.33 + Math.PI / 4)}
y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.33 + Math.PI / 4)}
>
{ h }
</Text>
))
}
</G>
</G>
);
}
}
from react-native-circular-slider.
Brian-Duggan
commented on May 27, 2024
1
I had been looking for a 24 hour clock as well. Big thanks to @nuttylord for his work. I made my own version of it that is a 24 hour clock that runs in an AM/PM fashion so it's 12 at the top and 12 at the bottom with h iterating from 1 to 11 on each side. Well technically it's h iterating from 0 to 11, then when it's actually output in the Text 1 is added to h to give it the proper formatting. I did it fairly sloppily so let me know if you can make it cleaner, but for now the bottom line is that it works!
import React, { PureComponent, PropTypes } from 'react';
import { G, Circle, Text, Line } from 'react-native-svg';
import range from 'lodash.range';
export default class ClockFace extends PureComponent {
static propTypes = {
r: PropTypes.number,
stroke: PropTypes.string,
}
render() {
const { r, stroke } = this.props;
const faceRadius = r - 2;
const textRadius = r - 20;
return (
<G>
{
range(48).map(i => {
const cos = Math.cos(2 * Math.PI / 48 * i);
const sin = Math.sin(2 * Math.PI / 48 * i);
return (
<Line
key={i}
stroke={stroke}
strokeWidth={i % 2 === 0 ? 2 : 1}
x1={cos * faceRadius}
y1={sin * faceRadius}
x2={cos * (faceRadius - 7)}
y2={sin * (faceRadius - 7)}
/>
);
})
}
<G transform={{translate: "0, -7"}}>
{
range(12).map((h, i) => (
<Text
key={i}
fill={stroke}
fontSize="11"
textAnchor="middle"
x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / 4)}
y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / 4)}
>
{ h + 1}
</Text>
))
}
</G>
<G transform={{translate: "0, -7"}}>
{
range(12).map((h, i) => (
<Text
key={i}
fill={stroke}
fontSize="11"
textAnchor="middle"
x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / -1.33)}
y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / -1.33)}
>
{ h + 1 }
</Text>
))
}
</G>
</G>
);
}
}
from react-native-circular-slider.
nuttylord
commented on May 27, 2024
ive actually gone ahead and started making a pure JS version of this slider to suit my use case so im off with the rockets, glad to know i helped :)
from react-native-circular-slider.
Related Issues (20)
- Layout broken with RN 0.48 HOT 10
- Become a maintainer of this package HOT 6
- Tried to register two views with the same name RNSVGPath HOT 3
- How to Restrict BedTime Marker not to move beyond 0 ? Any Hack ?
- CircularSlider not slide on IOS HOT 16
- Some informations
- Undefined is not an object (evaluating '_react2.PropTypes.number') HOT 6
- how can i make this work on reactjs HOT 7
- ClockFace and circle is placed in wrong position HOT 3
- Component do not slide on Android
- I want the same for 33, 100 ,1000 instead of 360 .Do any one has any idea? HOT 1
- Ticks do not line up correctly with numbers HOT 1
- Cannot read property 'number' of undefined HOT 2
- How can I limit the travel range of an icon?
- Touch responsiveness of slider inaccurate after navigating to component using React Navigation HOT 1
- Suport for typescript HOT 4
- update needed
- Project status ?
- Unable to use in expo go HOT 2
- Cnnot read property 'number' of undefined in ClockFace HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-circular-slider.