Make all wheel modes responsive about javascript-winwheel HOT 5 CLOSED

Hi there,

Would firstly like to thank you for such a comprehensive tutorial and awesome code. I am busy going through everything and looking at comments, but i was wondering if there was a way to make the segment images responsive?

I am using what another person commented on with the resizeCanvas() function, but struggling to get the segment images to behave correctly. The sides keep being cut off.

Much appreciated,

from javascript-winwheel.

Hi @ethanza thanks for getting in touch and your kind words. I will try and look in to this for you this weekend. I have been working on a responsive feature but can't recall trying it with segment images, so will need to double-check and probably experiment with them.

from javascript-winwheel.

Hi @zarocknz

Thank you for taking the time to look into it :). I am also actively looking into it. I am trying to adapt what has already been provided as a solution in the other questions. But i either end up with an extremely zoomed out wheel, or the segments have decided they've had enough and exploded (lol).

Again, thank you for the awesome plugin!

from javascript-winwheel.

OK @ethanza good news. I have responsive segment images working on my machine. Now to try and explain how I did this...

Overall the idea is to resize the canvas onResize of the window and work out how much smaller the canvas is now than before and turn this in to to a scaleFactor. If half the size then the scaleFactor is 0.5

This can then be used to scale the centerX and centerY of the wheel and also the segment image width and height (seg.imgData.width and seg.imageData.height).

In the Winwheel.prototype.drawSegmentImages = function() I added the following...

// Scale wheel center and use centerX and centerY in the formulas below rather than this.centerX and this.centerY especially the this.ctx.translate(centerX, centerY);
let centerX = (this.centerX * this.scaleFactor);
let centerY = (this.centerY * this.scaleFactor);

Next inside the if (seg.imgData.height) I added this...

// Calculate scaled width and height of segment and use these in formulas below rather than raw width and height
let scaledWidth = (seg.imgData.width * this.scaleFactor);
let scaledHeight = (seg.imgData.height * this.scaleFactor);

The next step was to change all formulas below this that used seg.imgData.width or height to use the scaledWidth or scaledHeight.

Then lastly when drawing the image, 2 additional parameters need to be passed - the scaledWidth and scaledHeight of the image...

this.ctx.drawImage(seg.imgData, imageLeft, imageTop, scaledWidth, scaledHeight);

I checked these changes in to the responsive-winwheel branch I have been working on take a look at ResponsizeWinwheel.js the drawSegmentImages function https://github.com/zarocknz/javascript-winwheel/blob/responsive-wheel/examples/responsive_wheel_v2/ResponsiveWinwheel.js

Also at the bottom of that file is a new function called winwheelResize() which contains the logic for figuring out the scaleFactor you might want to take a look at. You may think of an easier way to do this. There is code in the winwheel.js constructor which applies it to body.onResize() when the 'responsive' property of the wheel is set to true.

The plan is once all drawModes, text and other features have had the scaleFactor included in the calculations these changes will be applied to the normal Winwheel.js and users should just be able to set 'responsive': true as one of the Winwheel properties and it will all just work.

from javascript-winwheel.

Responsive features have been added to Winwheel.js in version 2.8.0, a tutorial about how to use it is located here http://dougtesting.net/winwheel/docs/tut20_making_it_responsive

from javascript-winwheel.