How can I draw on two side by side inkcanvases - c#

I have two inkCanvas elements in WPF displayed side by side. I want to be able to draw lines seamlessly from one inkCanvas to the next. Right now the stroke gets clipped at the boundary and you have to release the mouse and press it again on the next canvas to continue the line.
I also read that inkCanvas wasn't really the way to go for drawing. It was more for simple things like signatures. What are you supposed to use instead?

First try with one inkcancas:
add tiles by replacing the current inkcanvas with a bigger one and copying the strokes
it might work
if it doesn't you will know what you need more
Yes inkcanvas is for simple things but before you start coding a lot try to specify what you need.

Related

How do I select a Rectangle that's already been drawn?

I've been learning how to draw lines in winforms apps, and I'd like to be able to select something (rectangle, for example) that has already been drawn by left clicking it, and then be able to move it around to another location by dragging it with the mouse.
How can this be done? I don't see any methods for this so I think I will need to figure out if there is anything where I left-click on the form, and if there is, then somehow figure out the dimensions of it and redraw it appropriately. Is this correct? And how would I know where the reactangle starts, where it ends, how heigh it is, what color(s) it has, and what if it's overlapping another line, rectangle or another shape?
I've not been able to find much on the System.Drawing namespace for things like this, and what I have found so far is just basic "How to draw lines" type stuff.
Your drawing is a bitmap, not a vectorial image. Basically, it's just lots of pixels. Once your rectangle is drawn, it's just some pixels, but the rectangle itself (with coordinates and size) doesn't exist anymore.
What you can do is saving data for every shape (in a List for example). Then, when you click on your image to select something, you test every object in your list in reverse order until the mouse coordinates are within your shape. Then, if, for example, you want to delete the shape, you remove the shape from your list, then you clear your image and redraw every shape in your list.

Windows phone Canvas element - active area for manipulation event

I have an ellipse within canvas in my windows phone application and I need to implement tap&drag behavior for it. I use ManipulationDelta event for that.
The problem is that ellipse is small and it is quite hard to touch it precisely and trigger manipulation.
So the question is how can I increase the area around ellipse which is responsible handling user touch and triggering manipulation?
you can take another bigger ellipse which is transparent and cannot be seen, keep the smaller ellipse on it, and then add the manipulation event on the bigger ellipse, what ever code you write, write it for the bigger one and your task is done.
You've got multiple options, like Hatim's suggestion of a larger Ellipse. Or another shape like a Rectangle so the corner could get hit better etc. However you'll have to embed them both in a parent object anyway so they share the events and move together. So might as well just use the parent object. Could also just use MouseDragElementBehavior instead of messing with the ManipulationDelta if you wanted. Something like;
<Canvas>
<Grid>
<MouseDragElementBehavior/>
<Ellipse/>
</Grid>
</Canvas>
Then you could use a Margin on the Ellipse or set the size of the parent Grid or a number of options to accommodate the requirements. Hope this helps.

How can I create a good panel for displaying rectangles in C#?

I am a not very good at C# yet so bear with me,
I am trying to create a program that can edit pictures of small sizes (16x16, 32x32, etc...), specifically Minecraft texture files. I need to create a drawing surface where I can display rectangles on. I want to use WPF rectangles because they are working for me so far. I tried putting them on a WPF Grid panel but creating a good size grid panel with 1 pixel wide rows and columns takes about thirty seconds and that's quite a lot of time. Any ideas are helpful.
I'm getting the feel that your direction might not be the most efficient.
Of course, it's quite possible to convert an image into a lot of rectangles, but it's really not efficient once you have a lot of pixels. (32x32 = 1024 rectangles.)
So, instead of going along with WPF rectangles, like you want to, I would urge you to reconsider. Instead, try to work with WriteableBitmap.
From your vague description, I assume you are writing a paint like program, where the user can select a color and draw with the mouse on the texture with that color. By binding the WriteableBitmap up to an Image tag, and adding an event listener to the MouseMove event, you can get the mouse position, and whether the left/right mouse button is pressed or not. Combine that with some math involving the x position and the ActualWidth, and the y position and ActualHeight, of the Image, you can find the pixel the mouse is over, and set the color of that pixel.
So basically, Rectangles are not your best bet. Especially if you try to make a 32x32 grid to contain them. Use WriteableBitmap.
I would suggest using something more lightweight like DrawingVisuals. Alternatively if you really just want to display the textures you can preprocess them and display the result as a normal Image.

How do I draw a caret on an image?

In my application the user can write from keyboard on an image. Is it possible to display the caret on the image (as in TextBox for example)?
You've got 3 separate issues:
1) Drawing Text at arbitrary locations.
See MSDN DrawString Method
2) Merging two separate images (the original and the text) into one.
As far as I know the image host controls, that you're likely using to show the image, provide a bitmap object property, so you need to be able to save that bitmap object to a file once you've done the DrawString.
3) Draw the caret symbol at arbitrary locations
You can do this with basic drawing commands to create your own caret, that's using Graphics with Pens and Paths.
Then the issue is to make it flash (which means drawing what's underneath your caret again, then your caret etc)
I think there's options on the Pen object that might achieve this for you.
I would tackle each in turn then put them together.
If you are referring to the Caret (the blinking indicator which shows the position when inputting text), you probably have to use P/Invoke. You should start here:
http://msdn.microsoft.com/en-us/library/windows/desktop/ff468799(v=vs.85).aspx

WPF control for image manipulation

I need to load an image in a WPF window, an be able to read and modify individual pixels (in an efficient way), zoom the image (and scroll it), get the value RGB/grayscale of the pixel under the cursor, select areas (I guess knowing the cursor position and being able to modify pixels I could draw myself the square which represents the selected area)...
What is the best combination of WPF controls and classes to accomplish this?
I've been trying to do it loading a System.Windows.Media.Imaging.BitmapImage and putting it into a System.Windows.Controls.Image, but it's taking much longer than I expected.
Thank you very much
I once used this WPF Interactive Image Cropping Control. Go check it out, it should at the very least give you a good place to start. Oh, and welcome to Stackoverflow. :)

Categories

Resources