Skip to content

Commit

Permalink
Add detail to README.md about how to draw a pointer
Browse files Browse the repository at this point in the history
  • Loading branch information
CrazyTim committed May 25, 2024
1 parent 958dd59 commit a37b708
Showing 1 changed file with 19 additions and 8 deletions.
27 changes: 19 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@ An easy to use, themeable component for randomising choices and prizes.
- Callbacks for events like `onSpin` and `onCurrentIndexChange`.
- Clockwise and anticlockwise spinning.

## Examples

- [Basic ESM](https://crazytim.github.io/spin-wheel/examples/esm)
- [Basic IIFE](https://crazytim.github.io/spin-wheel/examples/iife)
- [Basic Vue](https://crazytim.github.io/spin-wheel/examples/vue3/dist)
- [Spin to a specific item](https://crazytim.github.io/spin-wheel/examples/spin-to-item)
- [Multiple Wheels](https://crazytim.github.io/spin-wheel/examples/multiple)
- [Themes](https://crazytim.github.io/spin-wheel/examples/themes)
- [Developer playground (for testing and troubleshooting)](https://crazytim.github.io/spin-wheel/examples/playground)

## Installation

### ESM
Expand Down Expand Up @@ -78,15 +88,16 @@ wheel.spinToItem(winningItemIndex, duration, true, 2, 1, easing)

If precision is not important, you can use `Wheel.spin()` to immediately start spinning the wheel at a certain speed, which will be reduced over time according to `Wheel.rotationResistance`. You can also set `Wheel.isInteractive = true` to allow the user to spin the wheel themselves by dragging or flicking.

## Examples
## How to draw the pointer

- [Basic ESM](https://crazytim.github.io/spin-wheel/examples/esm)
- [Basic IIFE](https://crazytim.github.io/spin-wheel/examples/iife)
- [Basic Vue](https://crazytim.github.io/spin-wheel/examples/vue3/dist)
- [Spin to a specific item](https://crazytim.github.io/spin-wheel/examples/spin-to-item)
- [Multiple Wheels](https://crazytim.github.io/spin-wheel/examples/multiple)
- [Themes](https://crazytim.github.io/spin-wheel/examples/themes)
- [Developer playground (for testing and troubleshooting)](https://crazytim.github.io/spin-wheel/examples/playground)
A pointer is not drawn on the Wheel, instead you set `Wheel.pointerAngle` and need to draw the pointer yourself. This is because there are varied ways you might want the pointer to appear and behave, for example you might want to animate it.

Your options for drawing the pointer are:

- Overlay an image using `Wheel.overlayImage`
- Overlay something using the DOM

Feel free to use and adjust an image from one the examples.

## Configuration

Expand Down

0 comments on commit a37b708

Please sign in to comment.