-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Waveform with rounded bars #953
Comments
@matt3224 something like this? I'll have to implement this enhancement code with the current WaveSurfer library. |
Hey @entonbiba thanks for that. I had a little play, http://codepen.io/matt3224/pen/RKMJdp It looks as though the barWidth property is not behaving correctly now, also is the radius making it truly rounded? It's hard to tell. Looks good so far though, really appreciate the help! |
@matt3224 I'll see what else can be done to be make look smoother when the barWidth is larger. However if you make it 7 it should be fine. |
Do you find that setting the bar width makes the gap bigger but not the bar? |
@matt3224 if I set it to 3 it looks nice, you want the bar a bit bigger when using the radius though right? |
Yeah, I mean I would imagine you could control it much like you would in css, using width, margin and border-radius. That way I could have any width bar with any gap size with either a rounded or flat ends. That would make it very versatile indeed. Thanks again! |
@matt3224 yea I've made it so if the barRadius parameter is not set, it would result in flat ends. Also you can do something like |
"Uncaught ReferenceError: wavesurfer is not defined |
@Agshealth-Raj is the click button within a wavesufer ready event? |
Hey, its been a whole year since I first queried this enhancement. The project I needed this for did go to development and i've been working on it for a few months. With v2 and all I wondered if this was implemented. I really could do with having this functionality. Thanks! |
I'd also really like this as a feature. |
I still also need this feature |
@entonbiba is there anything you can do/suggest or perhaps could you let me know what you did to achieve this before? |
Yeah this would be super useful |
if you copy/paste the /**
* Draws a rounded rectangle using the current state of the canvas.
* If you omit the last three params, it will draw a rectangle
* outline with a 5 pixel border radius
* @param {CanvasRenderingContext2D} ctx
* @param {Number} x The top left x coordinate
* @param {Number} y The top left y coordinate
* @param {Number} width The width of the rectangle
* @param {Number} height The height of the rectangle
* @param {Number} [radius = 5] The corner radius; It can also be an object
* to specify different radii for corners
* @param {Number} [radius.tl = 0] Top left
* @param {Number} [radius.tr = 0] Top right
* @param {Number} [radius.br = 0] Bottom right
* @param {Number} [radius.bl = 0] Bottom left
* @param {Boolean} [fill = false] Whether to fill the rectangle.
* @param {Boolean} [stroke = true] Whether to stroke the rectangle.
*/
const roundRect = function(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == 'undefined') {
stroke = true;
}
if (typeof radius === 'undefined') {
radius = 5;
}
if (typeof radius === 'number') {
radius = {tl: radius, tr: radius, br: radius, bl: radius};
} else {
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
for (var side in defaultRadius) {
radius[side] = radius[side] || defaultRadius[side];
}
}
ctx.beginPath();
ctx.moveTo(x + radius.tl, y);
ctx.lineTo(x + width - radius.tr, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
ctx.lineTo(x + width, y + height - radius.br);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
ctx.lineTo(x + radius.bl, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
ctx.lineTo(x, y + radius.tl);
ctx.quadraticCurveTo(x, y, x + radius.tl, y);
ctx.closePath();
if (fill) {
ctx.fill();
}
if (stroke) {
ctx.stroke();
}
} And in the ctx.fillRect(x, y, width, height); to let radius = 3;
roundRect(ctx, x, y, width, height, radius, true, false); it will render with rounded corners but for some reason only the first half is correct as shown in screenshot below. Anybody an idea? |
@thijstriemstra Hi, thank you. I found a workaround for the problem: fillRectToContext(ctx, x, y, width, height) {
if (!ctx) {
return;
}
+ if (height < 0) {
+ height = Math.abs(height);
+ y -= height;
+ }
const cornerRadius = 5;
this.roundRect(ctx, x, y, width, height, cornerRadius, true, false);
} It is strange, but in some cases height is negative which affects calculating of border radius. Here is the result: @katspaugh Hi, what do you think about this hacky solution? Do you have an idea how to improve it? Can create a PR which adds optional boder radius option. |
awesome, sounds good @kubk! |
Can this be merged in the library? |
@rijk can you make a pull request so it can be merged? |
Sorry, thought this was an open PR. |
@rijk @thijstriemstra Will create a PR in the next few days with these changes: #953 (comment) |
* Waveform with rounded bars (Close #953) * Rename drawRoundedRectangle to drawRoundedRect * clarify absolute height values * add changelog entry * fix lint error
Hey, I'm working on a project and the design for the waveform is fairly custom, each bar having border-radius/rounded ends and the gaps being larger than that of the demo's.
How would I go about doing this?
Thanks,
The text was updated successfully, but these errors were encountered: