I'm working on an image editor, there are some shape controls like rectangle, eclipse etc with drag drop feature on canvas and they are re-sizable(one corner is fixed, other three are re-sizable), attached a screen shot below:
I'd like to only resize the seleted corner, other three will be fixed, any ideas?
DaveRook Edit
In Photoshop, this is achieved by wrapping (under transforms)! This means re-drawing that corner un-proportionally to the rest of the image.
You will need to do a few things to achieve resizing of your rectangle.
a drag handle (something for the user to click and move).
to calculate the new height and width of your rectangle based upon the mouse position when the drag handle is being moved.
to update the height and width of the rectangle.
There is no shortcut here, but this SO question should be enough to get you started
Related
I've built a drawing application for figures (ellipse, rectangle...), and I need a ruler on my canvas view that shows the position of the coordinates, something like this, just to show the user where is he drawing:
http://pe-images.s3.amazonaws.com/photo-effects/color-grid/first-guide.gif
How can I do that on XAML (WPF)? Maybe drawing a rectangle at the top and the left but dont know how to show the position numbers. Thank you!
I am currently working on a project based on Kinect and I can't find a way how to resize the image relative to the image center. I managed to update image width and height as I move my hands and I get the picture resized, but relative to the TopLeft corner. So, basically if you imagine a rectangle, the top left corner is always fixed, while other corners move. The picture resizes only in the directions from right to left and from bottom to top.
I first tried to use ScaleTransform to resize the image and there i could specify the transform origin ( which I was setting in the middle of the picture), but it does not allow to update the image size in the result... so it makes no use to me..
So, if anyone could give my some sort of an idea of how to approach the task of resizing in all directions dynamically I would be very grateful. Maybe there is some way how to set the point to a different value than top left?
Thanks in advance!
You can use RenderTransformOrigin to move the center point of a scale action. For example:
<Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
I had a similar question related to resizing on a DP from the center of a UserControl. The discovery of how to resize from the center of the object is mentioned in one of the comments of the accepted answer.
Growing UserControl Size with Style Trigger?
I have a silverlight application in which I have to click on some pictures, if I hover over them for 3 seconds approx.
The problem is that if the pictures are a bit small in size, and the mouse moves a little, it moves out of the respective picture clicking area and selects another picture.
I have tried using a custom image in place of the default mouse cursor, but can this mouse be enlarged in some way so that it has a larger clicking area under it and not only the tip of the mouse pointer?
I think you're thinking about this the wrong way around. The mouse pointer simply defines a coordinate on the screen, rather than an area. If you want mouseover/click etc to be more generous, and give a wider area of interaction, you should make the target area larger.
So in the case of some small image, you can surround it with a larger area to handle the mouseover or click events, for example by surrounding it by a transparent border (note that elements with a transparent background will receive mouse events, unlike elements with no background).
I have a Panel (PanelBase) with a TextBox. I need to draw and drag a rectangle over the textbox using doble buffer to eliminate the flicker. To do that I'm puting a transparent panel over de PanelBase and draw the rectangle. How can I clear the last graphics in the transparent panel?
There are many techniques, but what I would do is rather than try manually manage the drawing and clearing of the rectangle, I would actually create a control that has the rectangle drawn on it and then adjust the control position as you drag the mouse. This way Windows will handle the rendering and clearing for you.
I'm trying to write a very simple photo editor using C# 2008 or QT4.
How to make a resizeable rectangle selection tool like the photoshop did?
If you are talking about the "classic" "rubber band" type of selection rectangle, check out How to draw a rubber band rectangle or a focus rectangle in Visual C#.
WPF Code Example: http://www.codeproject.com/KB/WPF/wpfmarchingants.aspx?display=Print
This one is a bit more complicated because it involves image cropping, but if you scroll down to the selection rectangle, you can see the basic formulas for calculating the rectangle: http://69.10.233.10/KB/WPF/ImageCropper.aspx
Lastly, another one using GDI: http://codelog.blogial.com/2008/10/31/rubber-band-selection-rectangle-in-c/
If you provide more specifics, I'm sure we can help you out more.
Qt has a class for that:
http://doc.trolltech.com/4.5-snapshot/qrubberband.html
I don't know the specific calls, but the idea is this:
You want to draw a transparent rectangle with an opaque or dotted border. The rectangle appears when the mouse button is clicked. While the button is held, the dimension of the rectangle will change as the mouse moves, with the top-left point at the position where the button was clicked and the bottom-right following the mouse as it moves. Releasing the button causes the rectangle to fix its position over the selection area.
You should be able to figure out the particulars from a resource on the C# Drawing namespace.