1 | import { jsx } from '../../jsx';
|
2 | import Component from '../../base/component';
|
3 |
|
4 | const getPoint = (cener, angle, r) => {
|
5 | const x = cener.x + Math.cos(angle) * r;
|
6 | const y = cener.y + Math.sin(angle) * r;
|
7 | return { x, y };
|
8 | };
|
9 |
|
10 | const getTicks = (
|
11 | start: number,
|
12 | end: number,
|
13 | tickCount: number,
|
14 | center,
|
15 | r: number,
|
16 | tickOffset: number,
|
17 | tickLength: number
|
18 | ) => {
|
19 | const ticks = [];
|
20 | const diff = end - start;
|
21 | for (let i = 0; i <= tickCount; i++) {
|
22 | const tickValue = start + (diff * i) / tickCount;
|
23 | const startPoint = getPoint(center, tickValue, r + tickOffset - tickLength);
|
24 | const endPoint = getPoint(center, tickValue, r + tickOffset);
|
25 | ticks.push({
|
26 | tickValue,
|
27 | start: startPoint,
|
28 | end: endPoint,
|
29 | });
|
30 | }
|
31 | return ticks;
|
32 | };
|
33 |
|
34 | export default (View) => {
|
35 | return class Guage extends Component {
|
36 | render() {
|
37 | const { props, context } = this;
|
38 | const { startAngle, endAngle, tickCount, center, r, tickOffset, tickLength } = props;
|
39 |
|
40 | const ticks = getTicks(
|
41 | startAngle,
|
42 | endAngle,
|
43 | tickCount,
|
44 | center,
|
45 | context.px2hd(r),
|
46 | context.px2hd(tickOffset),
|
47 | context.px2hd(tickLength)
|
48 | );
|
49 | return <View {...props} ticks={ticks} />;
|
50 | }
|
51 | };
|
52 | };
|