-
-
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
Add a method to redraw wave form #1127
Comments
My PR (here: #1133) lets you put elements under the waveform, so you don't need to redraw it. FYI. |
@agamemnus interesting idea. Thanks for the heads up. This would still only work if the wave is placed on a background that matches the color used for the "inverted mask" in the canvas, right? In my case there is a large background image behind the wave. |
Well, that is true. But you could also modify it to make the mask an image instead of a colored rectangle... |
@agamemnus I'm sure there are cases where this would work, but in my case the background image is really dynamic and unrelated to the waveform. So I think the suggested API additions still make sense. @katspaugh Looking a bit further, I found that calling The breaking change is #909 in 1.3.0, more precisely this change. Before, the call chain looked like this:
The change in #909, makes In the light of this new insights, I'd argue that |
I actually added clears to both drawwave and drawbars in a recent PR. Hmm.
|
@tf: A little lost but why drawbuffer and not drawPeaks? @katspaugh: Would it make sense to put Also, instead of setWaveColor, maybe getters/setters might be more interesting... some of my recent PRs for example link up cursorColor and the actual cursor color (where the cursor is now a DOM element). |
@katspaugh --> #1132. |
refs katspaugh#1127 Before katspaugh#909, calling `drawBuffer` to redraw the wave invoked `drawer.drawPeaks` which in turn invoked `drawer.setWidth` which always caused the canvas to be cleared as a side effect of `drawer.updateSize`. In katspaugh#909 `setWidth` was changed to short circuit if the width did not change. This now causes the waveform to be redrawn on top of the previous rendition, making the edges of the wave appear less crisp. This change makes `setWidth`/`setHeight` return a boolean to indicate whether changes were needed. If not, `drawer.clearWave` is called manually. So we make sure that the previous wave is always cleared, but do not perform the possibly performance intensive task of clearing the canvas twice if it already happened as a side effect of `setWidth`.
@agamemnus @katspaugh I've created a PR (#1144) with a possible solution for the redrawing bug. Moreover, in #1145 I've introduces getters and setters for |
So in the end I did now send a PR that introduces a new |
Oh. I haven't tried changing the size of the container. If you use a function-based get/set, instead of overwriting the getter and setter, the params are treated as throwaway variables, or they are not in sync. With my method, they are in sync. I also feel like Here's my current code: (it doesn't update the size per the container size, I think) Try something like |
|
If the container width changed, then you would have no choice, though. |
refs #1127 Before #909, calling `drawBuffer` to redraw the wave invoked `drawer.drawPeaks` which in turn invoked `drawer.setWidth` which always caused the canvas to be cleared as a side effect of `drawer.updateSize`. In #909 `setWidth` was changed to short circuit if the width did not change. This now causes the waveform to be redrawn on top of the previous rendition, making the edges of the wave appear less crisp. This change makes `setWidth`/`setHeight` return a boolean to indicate whether changes were needed. If not, `drawer.clearWave` is called manually. So we make sure that the previous wave is always cleared, but do not perform the possibly performance intensive task of clearing the canvas twice if it already happened as a side effect of `setWidth`.
refs katspaugh#1127 Before katspaugh#909, calling `drawBuffer` to redraw the wave invoked `drawer.drawPeaks` which in turn invoked `drawer.setWidth` which always caused the canvas to be cleared as a side effect of `drawer.updateSize`. In katspaugh#909 `setWidth` was changed to short circuit if the width did not change. This now causes the waveform to be redrawn on top of the previous rendition, making the edges of the wave appear less crisp. This change makes `setWidth`/`setHeight` return a boolean to indicate whether changes were needed. If not, `drawer.clearWave` is called manually. So we make sure that the previous wave is always cleared, but do not perform the possibly performance intensive task of clearing the canvas twice if it already happened as a side effect of `setWidth`.
refs #1127 Before #909, calling `drawBuffer` to redraw the wave invoked `drawer.drawPeaks` which in turn invoked `drawer.setWidth` which always caused the canvas to be cleared as a side effect of `drawer.updateSize`. In #909 `setWidth` was changed to short circuit if the width did not change. This now causes the waveform to be redrawn on top of the previous rendition, making the edges of the wave appear less crisp. This change makes `setWidth`/`setHeight` return a boolean to indicate whether changes were needed. If not, `drawer.clearWave` is called manually. So we make sure that the previous wave is always cleared, but do not perform the possibly performance intensive task of clearing the canvas twice if it already happened as a side effect of `setWidth`.
Awfully know English. Sorry. How to draw a wave after the team "create()"? I have the code in the project https://github.com/aleksnc/TuneTone function initSound() {
} my course of action.
Thank you!) |
@aleksnc What version are you using? There is a bug, which caused the waveform to not be drawn introduced in #1191 which is fixed once #1193 is merged. Maybe related? Please open a new issue with your question, otherwise it's too difficult to follow if multiple issues are talked about in one thread. Thank you! |
Since the responsive feature is now part of core can we close this issue @tf @agamemnus ? |
I see. Probably totally different from what I did, though... |
@mspae I agree that this issue is no longer actionable. |
It would be nice if there was an API method to manually trigger redrawing the wave form. I mainly see two use cases:
Responsiveness Projects like
react-wavesurfer
already usedrawBuffer
to redraw the wave form once the container size has changed. As described in this issue this causes problems sincedrawBuffer
appears not to clear the canvas before redrawing causing the waveform to look less crisp once the viewport is resized.Updating options I'd also like an official way to change options like
waveColor
andprogressColor
for an already initialized wavesurfer player. This is possible already now by calling:
It would be nice if there was an official way to achieve this. Something like a
redraw
method could be a step in this direction. Still, I am not sure if mutatingwavesurfer.params
should also be replaced by a method call along the lines of the existingtoggleInteraction
/toggleScroll
, i.e.setWaveColor
.I'd be happty to sumit a PR if we can agree on a direction.
The text was updated successfully, but these errors were encountered: