[GH-ISSUE #692] The green fades when resizing a custom area are missleading #561

Open
opened 2026-02-26 09:31:53 +03:00 by kerem · 9 comments
Owner

Originally created by @timunie on GitHub (Jul 15, 2020).
Original GitHub issue: https://github.com/NickeManarin/ScreenToGif/issues/692

The "Problem"

If one wants to resize the rectangle to capture by mouse the recorder opens a magnifier with a green cross / fade to show the actual mouse position. This is very useful to catch the exact pixel. The problem here is, that the green fade shows the mouse position, and not the corner of the rectangle.

image

A possible solution

  • Either sync the green cross with the corner of the rectangle
  • or display the selection rectangle in the magnifier as well
  • or center the mouse exactly on the rectangles corner if the user hits mouse down

P.S.: I wanted to take a gif, but this didn't work. I hope one can understand my idea.

Happy coding
Tim

Originally created by @timunie on GitHub (Jul 15, 2020). Original GitHub issue: https://github.com/NickeManarin/ScreenToGif/issues/692 ## The "Problem" If one wants to resize the rectangle to capture by mouse the recorder opens a magnifier with a green cross / fade to show the actual mouse position. This is very useful to catch the exact pixel. The problem here is, that the green fade shows the mouse position, and not the corner of the rectangle. ![image](https://user-images.githubusercontent.com/47110241/87577096-ac0a2800-c6d2-11ea-884c-9762cbfaa88a.png) ## A possible solution - Either sync the green cross with the corner of the rectangle - or display the selection rectangle in the magnifier as well - or center the mouse exactly on the rectangles corner if the user hits mouse down P.S.: I wanted to take a gif, but this didn't work. I hope one can understand my idea. Happy coding Tim
Author
Owner

@NickeManarin commented on GitHub (Jul 15, 2020):

Hi Tim,

The green crosshair and the mouse cursor are in sync with the selection rectangle.
So, the landing pixels of the green crosshair, is same landing pixels of the selection rectangle, and the capture will have an offset of 1 pixel (in each side).

In this example, the line is in the middle of 1 pixel, so the distance from the selection to the white pixel is 1 pixel.
Green crosshair -> 1 dark pixel -> white pixels
image

Here's the result, 1 pixel thick dark border in the top/left sides.
image

The capture has too 1 pixel thick dark border to the top/left.
image

I'm going to see how I can improve the UX of that magnifier.

<!-- gh-comment-id:658917076 --> @NickeManarin commented on GitHub (Jul 15, 2020): Hi Tim, The green crosshair and the mouse cursor are in sync with the selection rectangle. So, the landing pixels of the green crosshair, is same landing pixels of the selection rectangle, and the capture will have an offset of 1 pixel (in each side). In this example, the line is in the middle of 1 pixel, so the distance from the selection to the white pixel is 1 pixel. Green crosshair -> 1 dark pixel -> white pixels ![image](https://user-images.githubusercontent.com/14798947/87578626-10b18c80-c6ab-11ea-9e17-ae5016bd8b70.png) Here's the result, 1 pixel thick dark border in the top/left sides. ![image](https://user-images.githubusercontent.com/14798947/87578760-448cb200-c6ab-11ea-8879-11104d0b323b.png) The capture has too 1 pixel thick dark border to the top/left. ![image](https://user-images.githubusercontent.com/14798947/87578850-6ab25200-c6ab-11ea-9277-973164be4018.png) I'm going to see how I can improve the UX of that magnifier.
Author
Owner

@timunie commented on GitHub (Jul 15, 2020):

Wow what a fast answer.😲 Your image is exactly what I am loooking for but it didn't work kn my mashine. I will doublecheck this tomorrow if there is any setting or if I missed an update.

<!-- gh-comment-id:658978574 --> @timunie commented on GitHub (Jul 15, 2020): Wow what a fast answer.😲 Your image is exactly what I am loooking for but it didn't work kn my mashine. I will doublecheck this tomorrow if there is any setting or if I missed an update.
Author
Owner

@timunie commented on GitHub (Jul 16, 2020):

Hi @NickeManarin
I know double-checked my version and it is up to date.

  1. Here is my magnifier when dragging the resizing thumb. The green cross is exactly on the border i like:
    image
    Are you with me, that the selection rectangle should start on the gray border?

  2. And here is the result when releasing the mouse button (I tried it several times to be sure I didn't move the mouse by accident):
    image

  3. If I capture, my image is cutted:
    image

Note: I am running Windows 7, so if it is related to Win7 I will close this issue. Win7 is not supported by MS today, so you don't need to.

Anyway ScreenToGif is the best screen recorder I found 👍

<!-- gh-comment-id:659405971 --> @timunie commented on GitHub (Jul 16, 2020): Hi @NickeManarin I know double-checked my version and it is up to date. 1. Here is my magnifier when dragging the resizing thumb. The green cross is exactly on the border i like: ![image](https://user-images.githubusercontent.com/47110241/87674759-bc73de80-c776-11ea-831a-9088204e3bad.png) Are you with me, that the selection rectangle should start on the gray border? 2. And here is the result when releasing the mouse button (I tried it several times to be sure I didn't move the mouse by accident): ![image](https://user-images.githubusercontent.com/47110241/87675038-27bdb080-c777-11ea-9006-0f2146dd47f2.png) 3. If I capture, my image is cutted: ![image](https://user-images.githubusercontent.com/47110241/87675183-520f6e00-c777-11ea-8b82-34e2d580fb82.png) Note: I am running Windows 7, so if it is related to Win7 I will close this issue. Win7 is not supported by MS today, so you don't need to. Anyway ScreenToGif is the best screen recorder I found :+1:
Author
Owner

@NickeManarin commented on GitHub (Jul 16, 2020):

Your selection in the first image is a few pixels to the side...

<!-- gh-comment-id:659455428 --> @NickeManarin commented on GitHub (Jul 16, 2020): Your selection in the first image is a few pixels to the side...
Author
Owner

@timunie commented on GitHub (Jul 16, 2020):

You are right, that I grabbed the dragging thumb on the outer corner for demonstration purpose. But this may be what the normal user also does. I can fairly live with it, but wanted to give back something, at least if I have an improvement idea share it.
If you like to stick with the current implementation, it is fine. Then just close the issue. If you want me to have a look if I can make a PR, just give me a for doing it.

<!-- gh-comment-id:659479888 --> @timunie commented on GitHub (Jul 16, 2020): You are right, that I grabbed the dragging thumb on the outer corner for demonstration purpose. But this may be what the normal user also does. I can fairly live with it, but wanted to give back something, at least if I have an improvement idea share it. If you like to stick with the current implementation, it is fine. Then just close the issue. If you want me to have a look if I can make a PR, just give me a for doing it.
Author
Owner

@NickeManarin commented on GitHub (Jul 16, 2020):

Ahh, so the problem is the user experience after the first drag-to-select (when the user is dragging the little squares), right?

<!-- gh-comment-id:659519078 --> @NickeManarin commented on GitHub (Jul 16, 2020): Ahh, so the problem is the user experience after the first drag-to-select (when the user is dragging the little squares), right?
Author
Owner

@byzod commented on GitHub (Jul 19, 2020):

Can confirm

This is an example image, I want to capture pixel inside the red rectangle (including red rectangle itself)
t2z

So this is how I select it (it's correct, right?)
t2-s1
t2-s2

Then I got this in editor
t2-s3

The upper left corner works as expected but lost one row and column at bottom right corner

<!-- gh-comment-id:660633361 --> @byzod commented on GitHub (Jul 19, 2020): Can confirm This is an example image, I want to capture pixel inside the red rectangle (including red rectangle itself) ![t2z](https://user-images.githubusercontent.com/848607/87874201-85adfa80-c9fa-11ea-98fd-c09ef4fdcdb2.png) So this is how I select it (it's correct, right?) ![t2-s1](https://user-images.githubusercontent.com/848607/87874223-ac6c3100-c9fa-11ea-8800-62e050767fd1.png) ![t2-s2](https://user-images.githubusercontent.com/848607/87874224-aece8b00-c9fa-11ea-89b7-339fe74b1661.png) Then I got this in editor ![t2-s3](https://user-images.githubusercontent.com/848607/87874230-b68e2f80-c9fa-11ea-8638-bb0170984e4e.png) The upper left corner works as expected but lost one row and column at bottom right corner
Author
Owner

@NickeManarin commented on GitHub (Sep 10, 2020):

@byzod I believe this was fixed with v2.27.

<!-- gh-comment-id:690666056 --> @NickeManarin commented on GitHub (Sep 10, 2020): @byzod I believe this was fixed with v2.27.
Author
Owner

@byzod commented on GitHub (Sep 11, 2020):

No, and it don't allow me to select small area now

A1

<!-- gh-comment-id:691035228 --> @byzod commented on GitHub (Sep 11, 2020): No, and it don't allow me to select small area now > ![A1](https://user-images.githubusercontent.com/848607/92919689-85166b00-f463-11ea-879c-d63b777563ee.gif)
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ScreenToGif#561
No description provided.