0

I'm trying to create some drawing functionality, effectively very similar to MSPaint. I want to make a TextBox tool, such that I can draw a textbox on my canvas and have a user type in it like a real textbox. Once the user clicks off of the textbox or presses escape, then I would "stroke" the text to the GraphicsContext.

I'm not sure how to do this. My current attempt has me using StackPane to stack two canvases on top of each other. I let the user "draw" a textbox with the mouse, and then I create a textbox programmatically which I am trying to pass the keyevents into. Then when the user clicks off, I write textbox.getText() to the GraphicsContext. This has not been very successful. Specifically, I'm not sure how to handle special keys like BACKSPACE and DELETE and letting the user click to place the cursor.

I'm looking for advice on a better approach.

kruk22
  • 149
  • 2
  • 3
  • 15
Derek
  • 211
  • 5
  • 14
  • This is probably a comment that's a bit of a pain (I remember asking for directions once and being told "Well, I wouldn't start from here") - maybe a canvas isn't the best approach for this. If you're not too far into the project, perhaps using a `Pane` and adding nodes to it (`Shape` subclasses, `Text` for your text, etc) would be easier. But of course you may have other good reasons to use a canvas. – James_D Mar 19 '16 at 01:22
  • I effectively want to recreate MS Paint, with a few additional features. I also want the ability to easily turn the '"canvas"' (or whatever it is) into something I can send over a socket. I'm worried about things like the "Paint Bucket", and how I would implement that with the 'Pane' solution. – Derek Mar 19 '16 at 01:52
  • "Paint bucket" would be quite hard either way, I think... not sure. If transmitting it as image data is acceptable, you can [`snapshot`](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/Node.html#snapshot-javafx.scene.SnapshotParameters-javafx.scene.image.WritableImage-) any node to create a JavaFX image, [convert](http://docs.oracle.com/javase/8/javafx/api/javafx/embed/swing/SwingFXUtils.html#fromFXImage-javafx.scene.image.Image-java.awt.image.BufferedImage-) to a `BufferedImage` and use [`ImageIO`](http://docs.oracle.com/javase/8/docs/api/javax/imageio/ImageIO.html) to send it. – James_D Mar 19 '16 at 02:01
  • I'd rather save it was a set of commands and send that. I need to be able to synchronize this over the network (so just sending an image isn't good enough if it's a Pane) and it would also need to facilitate undo and redo. I got the "Paint Bucket" working using a Flood Fill algorithm after calling snapshot on the canvas, but I have no idea how I would implement that on something which is not an image. – Derek Mar 19 '16 at 02:28
  • This is a pretty wide open question, so it is hard to answer, especially when the additional desires in the comment section are taken into account. Perhaps a StackPane, with the canvas on the bottom and a dynamic editing section on top, in which you could place some [editable text](http://stackoverflow.com/questions/25572398/how-do-i-create-an-editable-label-in-javafx-2-2) and when [onAction](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/TextField.html#onActionProperty) is fired remove the textfield and stroke the text on to the canvas. – jewelsea Mar 19 '16 at 06:59
  • Just use a `TextField` / `TextArea` and remove the background/border. – fabian Mar 19 '16 at 10:19

0 Answers0