Comments (5)
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.
Related Issues (20)
- option to set winning field HOT 1
- Curved text causes spacing problems. HOT 1
- Image per segment not working
- Bug with use of Math.Random()
- Multiple independent wheels on the same page HOT 1
- Can you please add version 2.8.0 to jsdelivr? HOT 2
- Insert Image on a Segment
- Is possible to use emojis on segments? HOT 2
- Different starting angle because of the drag animation HOT 1
- Wheel lags/freezes while spinning HOT 1
- Cursive Font Family text causes spacing and rendering text problems
- Two weels at the same time HOT 1
- deleteSegment will not delete first segment
- The site of winwheel tutorials is not available HOT 1
- Problem with custom fonts
- TweenMax is not defined HOT 1
- I want to loop object into segments , I try this but not working.
- I want draw segmentImage without margin between each segements. HOT 2
- I want to get segment size, but I cannot get it.
- How to optimization on mobile?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from javascript-winwheel.