Develop Reference

Calculating image width when zoomed in C# Winforms

I'm working on a Winforms app that contains a large map image (5500px by 2500px). I've set it up so the map starts in full size, but the user can zoom out to a few different scales to see more of the map. The user is able to drag the map around to shift what they are looking at (like Google Maps, Bing Maps, Civilization, etc.).
When the map is full sized (scale = 1.0), I am able to prevent the user from scrolling past the borders of the image. I do this by calculating if they are trying to move past 0, or past the image width - current window size, similar to this:
if (_currHScroll <= 0) {
_currHScroll = 0;
}
This all works just fine. But, when I zoom out on the map (thus, making the image smaller), the limits for the bottom and right of the map break down. I know why this happens--because the Transform that is performed basically "compresses" the map a little bit, and so what used to be a 5000 px image is now smaller, depending on the scale. But, my limiters are based on the image size.
So, the user can scroll past the end of the map, and just sees white space. Worse things happen, I realize, but if possible I'd like to keep them from doing that.
I'm sure there is a straight-forward way to do this, but I haven't figured it out yet. I've tried simply multiplying my calculation by the scale, but that didn't seem to work (seems to under-estimate the size initially, then over-estimate on the smallest sizes). I've tried calculating the transform location of the bottom right of the image, and using that, but it turns out, that number is inverted, and I can't find what it relates to.
I'm including my transform point method here. It works just fine. It tells me, regardless of zoom level, what pixel was clicked on the original image. Thus, if someone clicks on point 200, 200 but the image is scaled at .5, it will show something like 400,400 as what was clicked (but, as I said, I don't think the scale value is a multiplier--using this just for demonstration purposes).
public Point GetTransformedPoint(Point mousePoint) {
Matrix clickTransform = _mapTransform.Clone();
Point[] xPoints = { new Point(mousePoint.X, mousePoint.Y) };
clickTransform.Invert();
clickTransform.TransformPoints(xPoints);
Debug.Print("Orig: {0}, {1} -- Trans: {2}, {3}", mousePoint.X, mousePoint.Y, xPoints[0].X, xPoints[0].Y);
return xPoints[0];
}
Many thanks in advance. I'm sure it's something relatively easy that I'm overlooking, but after several hours, I'm just not finding it.

If i understand right, you can calculate the maximum with your method GetTransformedPoint by using width and height from your Image as Point. The result can then be used inside your check...
And by the way, you are right, the scale value is a multiplier used as a factor. The only thing is, you have to cast the result to an integer.

Number line compression and docking controls

Hi Mathmeticians out there.
I am a little stumped and I was wondering if there was any sort of algorithm that could help me.
First the conceptual problem, Lets say I have a bunch of boxes that lie along an X axis. I want to be able to choose an arbitrary point A on the axis and have everything on the left scaled to 95% of its original width and position and to compensate, everything on the right will have to be scaled to 105%. The width of the resulting boxes is easy to calculate since it is the original width times the scale. The problem I am having is how to calculate the gap which has now been created at point A so that I can shift the second part left to close that gap.
Furthermore, I would like to not only select a point A, but also a B and C, etc.. as well and be able to close their gaps likewise.
--The real reason I am asking--
Now for the actual problem (in case anyone else out there has gone through this.) I have a control in a C# Winforms app that was made by some programmer before I got here. The control can contain any number of child controls that each have their own relative coordinates as a percentage of the Width or Height (i.e. A control with a relative X coordinate of 0.5 will be placed halfway across the parent container.
We desperately need to support multiple monitors and the problem that I am having is that if you dock a control or toolbar next to our proprietary control then the ClientRectangle is smaller so it shifts around the child borders like so
My boss doesn't like that the lines shift over monitor boundaries and wants me to only mess with the lines on the same monitor where the window was docked. I have been able to get 90% of the way using the concept above, but I can't seem to get the re-spacing calculation right.

Here is a Mathematical model of what I think for calculating the gap.
Let's say that you have a starting point A, and lets define it as xA.
Now, let's define the boxes
//Box{x0,x1}
Boxes = {[B1]{0,100},[B2]{100,200},[B3]{200,400},[B4]{400,450},[B5]{450,700}}
Now we have 5 boxes on the X axis.
Let's define;
A = xA = 370;
TotalLength = 700;
If you divide 700 by 2, that makes 350 which makes the mid point, and 370 is bigger than the mid point value. So that is being said, in this case you would need to shift the elements on the left to right. The calculation of the gap is as the following;
IF(Midpoint < A)
Gap = ((A- Midpoint) * 100 ) / TotalLength //This is the gap in percent
ELSE
Gap = ((Midpoint - A) * 100) / TotalLength
This way, you can find the gap. The Axis you need to shift towards will need to be decided based on the point you are selecting, if the selected point less than the Mid point then shift to right, if higher shift to left (to the positive axis route).
I hope this helps.

Thank you for your help Surgeon. Unfortunately I wasn't able to find a solution using your method. On the bright side, I was able to find a solution. The trick was to treat the X coordinate as the width between the Client Rectangle's left edge and the X coordinate's position and calculate it similarly to the child width.
For more specifics, here's the algorithm I have come up with for dealing with the docking problem:
var clientOriginalWidth = what the width of the Client rectangle would be without docks
var clientCompressedWidth = the width of the client now
//Calculate the Compression Ratio for each screen as follows
foreach(var screen in Screens){
var widthOfClientRectOnScreenNow = how much of the client rectangle is on this screen
var widthOfClientRectOnScreenWithoutDocks = how much of the client rectangle was on the screen before the docks were there
var compressionRatio = (widthOfClientRectOnScreenNow / clientCompressedWidth) /
(widthOfClientRectOnScreenWithoutDocks / clientOriginalWidth);
//Assuming control.xScale and control.widthScale are initially 0
foreach(var control in ParentControl){
var controlBounds = where the control was when the client was full width
if(controlBounds.X > screen.right){
var percentOfXPositionOnScreen = screen.right - screen.left / control.x;
controlBounds.xScale += percentOfPositionOnScreen * compressionRatio;
}
else if(control.X > screen.left){
var percentOfXPositionOnScreen = control.x - screen.left / control.x;
controlBounds.xScale += percentOfPositionOnScreen * compressionRatio;
}
if(screen.intersects(controlBounds){
var percentControlIsOnScreen = what percent of the control's width was on this screen
control.widthScale += percentControlIsOnScreen * compressionRatio;
}
}
}
The position is then found by multiplying the original X coordinate by the scale (same for the width). Once the docks are removed, recalculate the scale. When all docks are removed, the scale should be 1.
I have left out some specifics to make it more of a generalized algorithm, but one should be able to work through this on their own system.

C# Calculate the image scroll with scrollbar

I'm working a 2d tile-editor, used Winforms and XNA(for the map rendering) and i have a problem with the custom scrollbar.
I would like to know the formula for calculating the map scrolling depending the position value of my scrollbar.
Let me explain
Actually, i have a functional code but is not exact.
Here is my calculation (is the problem):
(Point Map.PixelMapSize = map size in pixel)
hScrollBarMap.Minimum = 0;
hScrollBarMap.Maximum = 100;
hScrollBarMap.LargeChange = hScrollBarMap.Size.Width * 100 /(Map.PixelMapSize.X);
mapScrollCalcul = ((hScrollBarMap.Value - hScrollBarMap.Minimum) * 100 / (hScrollBarMap.Maximum - hScrollBarMap.Minimum)) * Map.PixelMapSize.X / 100;
Sorry, I do not know how to explain. I found it by making a lot of tests...
But, the mapScrollCalcul is the final calcul to be applied to map position display.
What is the exact calculation for this ?
I hope you understand, I'm not speak English, just little understand.
But I understand you. :) (programmation language is universal)
Thank you for reading and, maybe, future responses.

You are overcomplicating things.
First, you are setting your LargeChange value relative to your image, not your view, and your scroll.Maximum relative to... what, exactly?
On MSDN, they say:
User interface guidelines suggest that the SmallChange and LargeChange
properties are set relative to the size of the view that the user
sees, not to the total size including the unseen part. For example, if
you have a picture box with scroll bars displaying a large image, the
SmallChange and LargeChange properties should be set relative to the
size of the picture box, not to the size of the image.
Now, lets assume that your image is 1000x1000 and your view is 100x100, and you are scrolling vertically. Then:
myVscroll.Minimum=0;
myVscroll.Maximum=image.Height; //1000
myVscroll.SmallChange = 10; // here: view.Height/10 or other value that makes scrolling look smooth
myVscroll.LargeChange = 100; // in this example, this is set to view.Height
And finally:
mapScrollCalcul = myVscroll.Value;

How to know the current visibility offset in TextEdit?

When you write in a TexBox/TexEdit, if the text is larger than the size of the control, it is scrolled to the right.
How can I get the current visibility offset or scrolled length?
To illustrate what I want:
The black box represent the full text. The red box is the TextEdit, containing the visible part of the text. The brown vertical line is the caret. What I want to know is the offset measure in pixels.

I have done minimal testing on this, and it seems to work, though there are cases where it may be off by 1 pixel:
int offset = tb.GetPositionFromCharIndex(0).X;
I have put this in the TextChanged event handler for testing purposes.
Let me know if it does what you need.
Cheers
EDIT: I have played with adding the width of the border (defaulted to Fixed3D) by doing this instead:
int offset = tb.GetPositionFromCharIndex(0).X + SystemInformation.Border3DSize.Width;
This seems to give better results.

Cropping the borders of image based on color in windows phone

Above is the image i am using. What i am trying to achieve is removing the red portion of the border from the image. How can I achieve this programmatically in windows phone? I found WriteableBitmapExtensions.Crop() method, but I am confused with the arguments (how i can find the x,y position of the image, as well as the size and the width?)
Also another issue I am facing is: I will get the images with differently sized borders, so I can't hardcode the x or y values.
Can anyone suggest a solution, or guide me to solve the issue?

This is not such a trivial thing and you haven't shared any code with us, so I can give you a few suggestions. Every WriteableBitmap has width and height defined. You should be able to access it via
wb.PixelWidth;
wb.PixelHeight;
where wb is your WriteableBitmap (the picture)
Having said that, it's trivial to crop a WriteableBitmap using WriteableBitmapEx library
var croppedBmp = wb.Crop(10, 10, 300, 220);
If your wb was 320x240 and the border was of width 10, then the above Crop call will do the trick - you will take the inner rectangle starting from point (10,10) and ending at (310, 230)
Now to your second issue - not knowing the width of the border. It would help if you know that
Border is of the same thickness on every side of the picture
Border is always in one color only
Assuming that's true, you could think of a simple algorithm (that may not be correct every time, but you can test it and adjust) which would take a few random points, for example
(0,randNumber < wb.PixelHeight), (randNumber < wb.PixelWidth, 0), (wb.PixelWidth, randNumber < wb.PixelHeight), (randNumber < wb.PixelWidth, wb.PixelHeight)
and then move towards the inner part of the picture as long as the neighbour pixel is the same color as the starting pixel. The more points you take randomly, the better chances you have of getting it right. The obvious problem with this is that it may happen that something on the picture is the same color as the border (exactly the same) which will make it seem like the border is wider than it really is. That's why you should take more points.
If you showed some code, I'd be happy to expand the answer.