Line width overlap about javascript-winwheel HOT 6 OPEN

Hi @jackzerby.

Thanks for your kind words.

I have taken a look at the screenshot and the issue described is unexpected; all line widths should be the same. I had a quick check on all the web browsers I have (Chrome, Firefox, Edge) and all line widths are the same as you expect (as seen in this screenshot)...

Can you kindly give details of the device and web browser used to look at the wheel? Also a copy of your Winwheel config - i.e. the JSON parameters passed in to the constructor might be helpful.

Kind regards,
DouG.

from javascript-winwheel.

Thanks for the quick reply Doug!

I'm on Chrome OSX

Here is the complete js for how I'm using the wheel: https://gist.github.com/jackzerby/b8c3c7042be191dcc1977be308c28c18

Here is another screenshot: https://cl.ly/sMGl

from javascript-winwheel.

Thanks for posting the JS and another screenshot. I was able to use some of the Winwheel settings in your code to replicate the issue - well something similar - on my local dev.

Seems that setting the innerRadius causes this to happen so I looked at this code in Winwheel.js just now and see there are a couple of comments (flagged with //++) about there being some problems with innerRadius and the lines.

I'll have a play around and see if I can come up with a solution - will let you know.

from javascript-winwheel.

OK @jackzerby I might have the solution. As mentioned I could not replicate your issue exactly on my local (different browser I think), but I did get thinner lines as you originally described and seem to have fixed that problem, might sort things for you too.

Can you please track down this code in your copy of Winwheel.js and try changing it to the code below that and let me know if that fixes things?

Original code...

if (!this.innerRadius)
{
    this.ctx.moveTo(this.centerX, this.centerY);
}
else
{
   //++ do need to draw the starting line in the correct x + y based on the start angle
   //++ otherwise as seen when the wheel does not use up 360 the starting segment is missing the stroked side,
}

change to...

if (!this.innerRadius)
{
    this.ctx.moveTo(this.centerX, this.centerY);
}
else
{
   // Work out the x and y values for the starting point of the segment which is at its starting angle
   // but out from the center point of the wheel by the value of the innerRadius. Some correction for line width is needed.
   var iX = Math.cos(this.degToRad(seg.startAngle + this.rotationAngle - 90)) * (this.innerRadius - lineWidth / 2);
   var iY = Math.sin(this.degToRad(seg.startAngle + this.rotationAngle - 90)) * (this.innerRadius - lineWidth / 2);

   // Now move here relative to the center point of the wheel.
   this.ctx.moveTo(this.centerX + iX, this.centerY + iY);
}

Hoping that fixes things. If not I will take another look tomorrow night.

Cheers,
DouG

from javascript-winwheel.

@jackzerby This fix solves the problem for my wheel. Thanks for this library!

Before:

After:

Is it possible to set the stroke on all sides of the segment?

from javascript-winwheel.

@Soean Hi. Thanks for the screenshots of your wheel and confirming the code change fixed things for you.

I suspect the golden stroke line for segment 3 is there but hidden under the white stroke line for the start of segment 4. Damn.

Unfortunately HTML canvas always draws lines half in and half outside of shapes/paths, there is no option to make the stroke line go on the inside of the segment shapes. If there was that would solve this issue perfectly.

Actually I just had an idea. Since your stoke lines are normally white which appears to be the same as the canvas, what if you make the white lines 100% transparent? for example rgba(255, 255, 255, 0) and only make the gold one opaque?

Thanks,
DouG.

from javascript-winwheel.