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
Image canvas implementation #7501
Comments
A few problems I notice in your code:
|
Hi @GamingMinds-DanielC The code now looks like this:
In general I have difficulty understanding the general structure of imgui coordinate system. For point (3) I don't quite understand what you are saying. |
Some more infos for point 3: If you zoom in on the bottom so that your new content height will be 1200 and calculate your scroll position to be 600, that will be the correct value. But the window will not know of the new content height, think it will probably be 1000 like in the last frame and clamp your scroll position to 400 again. Only when you submit your image will the new size be known, but then it is too late and the bottom 200 pixels will be scrolled out instead of being visible. To avoid this, you can tell your window in advance. You can call |
Hi @GamingMinds-DanielC, This is the updated code:
Now I'm trying to center the image and I added this line of code (#2212) before the image definition:
The problem is that now the image is centered but it errs in taking I think the mouse coordinates and thus the scroll position when zooming. I think the problem is because I moved the cursor zero. |
Yes, the transformation of the mouse position into image space and the calculation of the scroll position assume an unmodified cursor position. If you want to modify that, you need to take that into account as well. But the more you add, the more unwieldy it gets, I would strongly suggest to put your canvas into an object with its own state and handle the reusable stuff in there. Something that could be used f.e. like this: const ImVec2 imageMin = ImVec2( 0, 0 );
const ImVec2 imageMax = imageSize;
m_Canvas.setContentRect( imageMin, imageMax );
if ( m_Canvas.begin( "canvas", ImVec2( 0, 0 ) ) )
{
ImDrawList* drawList = m_Canvas.getDrawList();
drawList->AddImage( textureId, m_Canvas.contentToScreen( imageMin ), m_Canvas.contentToScreen( imageMax ) );
m_Canvas.end();
} |
Hi thank you for your reply. I tried to consider the position of the cursor but with poor success. I modified the code like this:
But it doesn't work... |
Looks like a simple sign error. You subtract the cursor position just like the window position when transforming the mouse position into image space, that should be correct. But to calculate the scroll position, you should then ADD the cursor position, just like the window position, not subtract it again. |
I am so sorry I put the wrong code.
While even if I calculate the scroll position in this way.
test1.movI noticed that even if I don't change test2.mov |
The jumping back after letting go of the scroll bars is easy to fix. You set the scroll position before beginning the window, but you never update it unless you are dragging or scrolling the image. You need to update your scroll with the current scroll values right after beginning the window, that's where the scroll bars take effect. As for the zooming, try this: adjust the cursor position for the new image size before calculating the scroll position. |
Thank you very much for all the suggestions you gave me.
However I am really sorry, and I feel so bad, to bother you again.
I noticed is that, among other things, it no longer lets me scroll to the top left and right once I zoom in on the image. b.mov |
Yes, that's basically what I meant with updating the scroll values after
To be safe, you should calculate cursorPos both times you calculate imageSize, not only when zooming. Window sizes can change after all. Not being able to scroll to the top left is because your cursor position gets negative values when the image is bigger than the window. When calculating the cursor position (both times) clamp the coordinates to 0 on the low end, then this shouldn't happen anymore. Another thing that comes to mind: instead of |
Hello,
However, two imperfections remain that I cannot understand. The first is that the zoom does not follow the mouse until the "scroll bars" in some have moved. test1.movThe second is that zooming in and out of the image there is a strange shift or anyway something doesn't fit. cc.movIn this sped-up video you can see that I don't move the mouse but the image below changes. ccc.movIt must have to do with either cursor position or scroll. |
ImGui doesn't let you scroll past the content, not even when setting the scroll position programmatically. So as long as the image is smaller than the window, it will stay centered, ignoring the mouse position when zooming. That is normal. If you want a different behavior, you could add a border around your image. That border can be empty space, but it should be independent of your image scale. If you make it f.e. 90% of the window size, you can scroll a tiny image to any edge of the window without it leaving the display area entirely. But you will have more things to keep track of and need to compensate.
ImGui often snaps things to pixel positions for better visuals (like f.e. sharp text). This looks like rounding errors accumulating over time. To get rid of this effect, you most likely have to reimplement your canvas with everything you learned, but with a different approach. Don't use the cursor at all, draw manually, round only for display purposes but keep exact values, ... But even without rounding to integers, the floating point format will accumulate errors over time. At some point you will have to stop with "good enough". Small update:
In the first video of your last post, look at the 10 second timestamp, the top border is bigger than the bottom one because the scroll bars don't get taken into account. Same with the left and right borders at 16 seconds. The effect is there the entire time, just easier to see at those timestamps. Your image is not correctly centered because you use the window size (includes scroll bars) instead of the content region. |
Hi @GamingMinds-DanielC
|
That's also what you can override with I suppose we could aim to provide an demo applet for this, with zooming and navigation. |
Version/Branch of Dear ImGui:
Version 1.90.5, Branch: docking
Back-ends:
ImGui_ImplGlfw ImGui_ImplOpenGL3
Compiler, OS:
macOS
Full config/build information:
No response
Details:
My Issue/Question:
Hi all,
I am trying to implement an image navigator/canvas.
Something similar to (#6051 (comment))
I tried to see what he does but I can't extrapolate it.
So I'm starting from scratch. I'm having some problems handling zoom and scroll.
What happens is that I have strange jumps that I don't understand.
I tried to see if it was a problem related to #2915 but I'm not sure.
Specifically what I need is an image viewer where the image is centered (now it is not) where I can move around.
Namely zoom and drag.
Screenshots/Video:
aaa.mov
Minimal, Complete and Verifiable Example code:
clang++ -std=c++17
pkg-config --cflags opencv4
main.cpppkg-config --libs opencv4
pkg-config --libs --static glfw3
-lglad -framework OpenGL -limguiThe text was updated successfully, but these errors were encountered: