@ray-js/lamp-bead-strip 1.0.2-beta-5 → 1.0.3-beta-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -32
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,8 +29,6 @@ yarn start:tuya
|
|
|
29
29
|
|
|
30
30
|
### Basic usage
|
|
31
31
|
|
|
32
|
-
`colors`and `canvasId`are mandatory, otherwise the animation cannot run`canvasId`must ensure page uniqueness. When we input different animation modes`mode`, the component will automatically play the animation.
|
|
33
|
-
|
|
34
32
|
```tsx
|
|
35
33
|
import LampBeadStrip from '@ray-js/lamp-bead-strip';
|
|
36
34
|
export default () => (
|
|
@@ -46,8 +44,6 @@ export default () => (
|
|
|
46
44
|
|
|
47
45
|
### Pauses
|
|
48
46
|
|
|
49
|
-
`ready`allows you to set whether the animation of the component plays or pauses.
|
|
50
|
-
|
|
51
47
|
```tsx
|
|
52
48
|
import LampBeadStrip from '@ray-js/lamp-bead-strip';
|
|
53
49
|
export default () => (
|
|
@@ -61,36 +57,8 @@ export default () => (
|
|
|
61
57
|
);
|
|
62
58
|
```
|
|
63
59
|
|
|
64
|
-
### Customize Scaling Size
|
|
65
|
-
|
|
66
|
-
Since the components are drawn through canvas, the internal dimensions are fixed. The component internally handles screen scaling logic, which is controlled through the`scale`property. If you want to modify the size of a component, you can customize the`scale`property to achieve your goal. The following use case expects the component size to be`1.1`times larger than before.
|
|
67
|
-
|
|
68
|
-
> It should be noted that the component only sets the scale once during initialization, so if the scale property is changed or set after initialization, it will be invalid
|
|
69
|
-
|
|
70
|
-
```tsx
|
|
71
|
-
import LampBeadStrip from '@ray-js/lamp-bead-strip';
|
|
72
|
-
import { getSystemInfoSync } from '@ray-js/ray';
|
|
73
|
-
|
|
74
|
-
const { windowWidth = 375 } = getSystemInfoSync();
|
|
75
|
-
export default () => {
|
|
76
|
-
const scale = (windowWidth / 375) * 1.1;
|
|
77
|
-
return (
|
|
78
|
-
<LampBeadStrip
|
|
79
|
-
containerStyle={`height: ${48 * 1.1}rpx;width:${570 * 1.1}rpx;`}
|
|
80
|
-
mode={16}
|
|
81
|
-
canvasId="template2"
|
|
82
|
-
scale={scale}
|
|
83
|
-
colors={['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)']}
|
|
84
|
-
contentValue={{ expand: 1 }}
|
|
85
|
-
/>
|
|
86
|
-
);
|
|
87
|
-
};
|
|
88
|
-
```
|
|
89
|
-
|
|
90
60
|
### Set the light off color
|
|
91
61
|
|
|
92
|
-
`closeColor` can set the color of lights that do not have color in the animation, that is, the color of the light beads that turn off the lights in the device. This way, the light strip component can adapt to multiple background colors, preventing the node color that turns off the lights from being the same as the background color.
|
|
93
|
-
|
|
94
62
|
```tsx
|
|
95
63
|
import LampBeadStrip from '@ray-js/lamp-bead-strip';
|
|
96
64
|
|