Results 1 to 4 of 4

Thread: [RESOLVED] Not sure how to do this, sort of a doodling app

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Feb 2009
    Posts
    258

    Resolved [RESOLVED] Not sure how to do this, sort of a doodling app

    Okay, a friend of mine asked me for this, but as I don't deal daily with graphics, I'm hitting a wall.

    The requirements are simple.

    1) I need to load multiple jpgs into memory and be able to use controls to switch back and forth between them at will.
    2) I need to be able to drag the mouse pointer across the displayed image and have a thick arrow drawn along the path. The arrow needs to be drawn in a color selected by the user.
    3) I need to be able to save each altered picture, either to the original named file or to another file, with the name selected by the user.

    I've accomplished the first part by reading the various jpg files into a list of BitmapImage objects. Then, on the screen, I have an Image element, and I simply reset the source to the desired element in the array, and voila, perfect slideshow kind of thing. (I have buttons for previous, next, and so forth.) I don't know if this is THE way I need to load the data in order to accomplish the rest, but it does work for loading and displaying.

    The second part is proving to be the issue. The best I've been able to come up with is an InkCanvas control, but there are two difficulties. The first is how to load the image into the control before editing? The second is that the lines automatically drawn are just thin lines, not thick arrows... not to mention that they are drawn as the dragging occurs, instead of being blocked out and being drawn after the mouse button is released.

    The third part flows from the second.

    This is some fairly simple and basic functionality, so I know it has to be possible, I just don't have the knowledge at this point. Can someone point me in the correct direction, either through direct response or by pointing me to an online resource? I would appreciate it greatly...

    Thanks in advance.
    Last edited by HongKongCV; Jul 11th, 2017 at 01:07 PM.

  2. #2

    Thread Starter
    Hyperactive Member
    Join Date
    Feb 2009
    Posts
    258

    Re: Not sure how to do this, sort of a doodling app

    Okay, I'm working it out, bit by bit. The control on the screen is a canvas, and the jpg is set as the background. The drawing elements (lines, ellipses, etc) are stored in a list and drawn on the canvas when it is selected for display. So far, all the drawing elements have been canned (added programmatically), and I'll tackle the UI for drawing them in a while. But I'm getting there...

  3. #3
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: Not sure how to do this, sort of a doodling app

    Just to let you know your thread hasn't been totally ignored.
    Unfortunately I know almost nothing about doing things using WPF. I've only dabble a bit with a number of simple example programs but have never studied it seriously.

    It would be quite simple to do what you need in a WinForm program as well, and I did write a quick example of one approach, where the "arrow" was a bitmap of a rough (lots of graphical artifacts along the edges of the hand) hour hand from an example analog clock program I did years ago.
    It only took a few minutes to put the example together. Since the arrow was a bitmap the example was using a scaling transform to stretch it between the two points input using the mouse. Of course there are many options as to how you would want to select and draw an arrow, so using a bitmap probably wouldn't be the first choice.

    But since you are using WPF I didn't bother posting the example or reply to the thread last week. If you would be interested, just out of curiosity perhaps, then I could post that example, otherwise I won't bother as it is not applicable to this forum.

  4. #4

    Thread Starter
    Hyperactive Member
    Join Date
    Feb 2009
    Posts
    258

    Re: Not sure how to do this, sort of a doodling app

    Thanks for the input, but for other reasons this project is best done in WPF. I'm a WinForms guy at heart, but one of the few things I prefer about WPF is the ease with which you can build custom controls and stick them in things like listboxes. It's dead-easy in WPF, and other areas of this app will benefit from that.

    I'm figuring out how it works piece by piece, though... lines and circles are overlays, stored as ellipse or line objects, that can be redrawn whenever needed. There's also a PolyLine object that can be used to draw curves. I just need to capture the points and plug them into the correct shape, and it should work fine. Right now it's all canned, but I should be working on the UI sometime this weekend.

    But thanks for weighing in, it IS good to know that the post isn't being ignored.

    I've done searches to find some kind of tutorial online, and I found nothing directly on point... I found it irritating that what articles I found were either too simple or far too complex for what I needed. Most of the former tutorials I found were for something that was nothing more than a doodle tool using InkCanvas... and since the ability to doodle with the mouse is built-in to the InkCanvas, not even requiring any special coding to make happen, it wasn't very much help. And the complex ones were obviously aimed at games... which this isn't.

    Once I get this done, I may just write a CodeProject article about it. That way, the next shmuck like me who wants to do something like this may actually be able to find some help.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width