Color picker wheel

Hey ! So i’m trying to make a color picker inside my app using a color wheel so i made a canvas and imported the image of the color wheel and made it as the background of the canvas and i added a ball that moves to the x and y where you touch or drag it to inside the canvas but i want it to be limited just to the wheel so when i touch outside the wheel it doesn’t move there any ideas ? Thank you in advance :slight_smile:

How do you select black? Or any value of grey?

Maybe you could try when canvas dragged if call canvas get background pixel color is white then set current x to … and current y to … for example the center of the canvas

1 Like

image they won’t go together

ok i will try that ty

i don’t need to because it’s a wheel for led colors

Something like this

1 Like

The problem is that there’s white in the center of the picker.
I would suggest you determine in your app what the radius of the circle is, then use this formula, to measure the distance between 2 pixels (the x,y center of the circle and the finger x,y). If the distance is greater than the circle radius, then it’s outside the circle.


the problem is the dimension in the browser are not the same when testing in the companion i guess because of the resolution of my phone so i can’t really determine the radius because in the browser the circle looks stretched but on my phone it looks perfect

Use the white pixel method but also now check to make sure the x and y is out of the center, should be simple to do with percentage values so should work on different devices.

1 Like

ok will try that

Yep the white pixel method worked Tyvm and ty everyone for helping :smiley: :purple_heart: :purple_heart:


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.