CrazyTim / spin-wheel

An easy to use, themeable component for randomising choices and prizes.
https://crazytim.github.io/spin-wheel/examples/themes
MIT License
216 stars 59 forks source link

How to display pointer ? #38

Closed ikus060 closed 6 months ago

ikus060 commented 6 months ago

Trying to use your project to select a list of names, it's seams to be working well, except no pointer get displayed. I believe I need provide an image for the pointer without any idea how to do it.

image

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.3.2/dist/spin-wheel-iife.js"></script>
<script>
window.onload = async () => {
  const props = {
    pointerAngle: 90,
    overlayImage: "",
    itemBackgroundColors: ['#ffc93c', '#66bfbf', '#a2d5f2', '#515070', '#43658b', '#ed6663', '#d54062' ],
    lineColor: '#fff',
    items: [
      {
        label: 'name1',
      },
      {
        label: 'name2',
      },
      {
        label: 'name3',
      },

    ]
  };

  const container = document.querySelector('.wheel-wrapper');

  const wheel = new spinWheel.Wheel(container);
  wheel.init(props)

  // Save object globally for easy debugging.
  window.wheel = wheel;

}

function spin() {
    /* Random index */
    const idx = Math.floor(Math.random() * window.wheel.items.length)
    /* Animate */
    window.wheel.spinToItem(itemIndex = idx, duration = 1000)
}
</script>
</head>
<body>
    <button type="button" onclick="spin()">SPIN</button> 
    <div class="wheel-wrapper" style="height: 100%; width: 100%;"></div>

</body>
</html>

If I need to provide an image, could you link one for me ?

CrazyTim commented 6 months ago

Hi @ikus060, the library doesn't come with a built-in pointer because of the many use cases. You need to decide what it looks like and display it over the top of the wheel.

You have two options:

Feel free to modify a svg image from one the examples!