I’m looking to implement a dynamic roulette wheel in a Vue.js application. The wheel needs to adapt its segment sizes, text size, and line breaks automatically based on the number of segments and their content. Additionally, I want to set custom probabilities for each segment. Here’s the design I have in mind: enter image description here
Can anyone guide me on how to create a highly customizable and sharp-looking roulette wheel that meets my design requirements? Any help or pointers to the right libraries or approaches would be greatly appreciated.
I’ve explored several libraries like winwheel.js and wheelnav.js, but I haven’t been able to achieve the desired design and quality. I’m using Vue.js in a Node.js environment and have tried various approaches.
Specifically, with winwheel.js, I faced difficulties in rendering text exactly as per my Figma design, and the output didn’t appear as sharp as desired. enter image description here
