1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { useCallback, useEffect, useRef, useState } from 'react';
import type { NextPage } from 'next';
import { Page, Container, Canvas } from 'components/content';
import { View, Layer, Rectangle, Circle } from 'react-paper-bindings';
const radiusMin = 10;
const radiusMax = 80;
const hueMin = 0;
const hueMax = 360;
const RefsPage: NextPage = () => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const rectangleRef = useRef<paper.Path.Rectangle | null>(null);
const [radius, setRadius] = useState(10);
const radiusForward = useRef(true);
const [hue, setHue] = useState(0);
const hueForward = useRef(true);
const handleFrame = useCallback(() => {
// you can bypass react by manipulating paper objects directly
if (rectangleRef.current && rectangleRef.current.fillColor) {
rectangleRef.current.fillColor.hue += 1;
}
// or you can do it react way by setting state
if (radius <= radiusMin) radiusForward.current = true;
if (radius >= radiusMax) radiusForward.current = false;
setRadius(radius + (radiusForward.current ? 1 : -1));
if (hue <= hueMin) hueForward.current = true;
if (hue >= hueMax) hueForward.current = false;
setHue(hue + (hueForward.current ? 1 : -1));
}, [radius, hue]);
useEffect(() => {
console.log(canvasRef);
console.log(rectangleRef);
}, []);
return (
<Page title="Refs">
<Container>
<Canvas ref={canvasRef}>
<View onFrame={handleFrame}>
<Layer>
<Rectangle
ref={rectangleRef}
center={[75, 75]}
size={[100, 100]}
fillColor="red"
/>
<Circle
center={[225, 100]}
radius={radius}
fillColor={`hsl(${hue}, 100%, 50%)`}
/>
</Layer>
</View>
</Canvas>
</Container>
</Page>
);
};
export default RefsPage;