I'm making a UI application in java and I was trying to draw some graphics to represent a compass in a window. I'm handling the rotation with the mouse dragged event on my canvas but the problem is that everything in my canvas is rotating. I'd like to know if I can handle every elements I draw in my canvas separately so only my arrow will move and not the whole canvas.
Thanks
Presumably you've got a draw loop that draws a bunch of things. Background, compass, arrow for the compass. Maybe some other things.
When you draw with a canvas you issue commands to the context that are akin to loading up a paintbrush with paint.
If you want to paint a red line and then a blue line you pick up some red paint, paint one line, then clean your brush and pick up some blue paint and paint that line.
The canvas context is exactly the same. What you want to do here is paint a bunch of things on a normal canvas context. Then you want to save the context with ctx.save() and do your rotations.
When you translate or rotate or even just set a fill on the context you aren't changing things that were already done, you're just saying "for everything after this point, apply these operations."
So then you paint the compass arrow/needle.
Then call ctx.restore() and continue on your merry way. This will stop the rotation from happening to things drawn after the arrow.
the save and restore functions of the context keep track of the old state so that you aren't drawing everything after the needle with a rotated context. It's kind of like washing a paintbrush, only better, because you can remember that it used to have blue on it instead of having to wash it clean every time.
By the way, if you do want to reset your canvas context to its default state completely (black brushes, default transform, no shadows, etc), you can simply do canvas.width = canvas.width and it will give the context a full reset.
Related
Very simple question, but I could not find the answer in JavaFX docs or StackOverflow:
I have a JavaFX Canvas filled with a graph (various calls to strokeLine(), not the issue here). I need to be able to draw a rectangle over this graph, then simply clear the rectangle, without affecting the graph in the background. (Like an undo operation).
Code to draw the rectangle ('p' and 'e' are points):
gc.rect(p.getX(), p.getY(), e.getX()-p.getX(), e.getY()-p.getY());
gc.stroke();
The most obvious answer would be to use the clearRect() method, but the problem is that it clears also the portion of the graph in the background...
So the question is: how do I clear a drawing that was made with stroke(), without affecting the other drawings in the background?
You can't do this with one canvas.
Canvas only store the result of your painting operation.
This is the interest of the canvas you can stroke million times the same line and it will only store and represent the result and doesn't consume more memory.
So you if you need to draw Something over your chart you should put an other canvas over the chart and draw on the second canvas.
It might be more straight forward and much more the JavaFX-way of doing things if you just put your canvas into a Group and then just add a Rectangle node to the Group which you can remove at any time if you want.
This can be acheaved by taking snapshot(s) of your Canvas, using the .snapshot(SnapshotParameters params, WritableImage image) method. Basicly, every time you draw something on your Canvas, you take a snapshot of it and store it somewhere (for example in a ArrayList). Then you can use those snapshots to create a 'undo' operation, by using the . drawImage(Image img, double x, double y) method of Canvas's GraphicsContext, in which you would pass the snapshot you want to go back to as the Image parameter.
I am trying to make an Android app where an image would always be in the background and when you touch above it, you can draw on it with red and it would be anti-aliased. Also, there would be a revert and a delete all drawings button.
You may record every segments consisted of coordinates drawn by user, every time the ui refresh, clear the Canvas and redraw all the segments. For reverting, you remove the last segment, for deleting all you remove all segments.
Further more, if you need other operation, you may have to abstract an interface (named DrawingOperation for example) with undo/redo method.
I have started a Java Paint program that seems to be working fine... There is just one problem. In my program I have it set up so that it repaint()'s ovals using MouseListener methods and overrides paintComponent(Graphics g). The problem is when I move my mouse to fast it begins to separate my ovals instead of making one smooth line when the mouse is dragged. Is there a way to fix this.
P.S. Keep in mind that I much rather use the fillOval method not the drawLine, because I still would like to set the stroke.
Thanks in advance
See Custom Painting Approaches for the two common ways to do painting. The example draws a Rectangle without problems as the mouse moves.
You can still set a stroke to use to draw a line between two points. You should store the previous mouse position and interpolate between the last position and the current position to create a Line2D shape. Then create a stroke that has the desired width of your oval, and apply that stroke to Graphics context, then draw the line. This link has more information about strokes and shapes.
If you really want to continue drawing ovals, you could interpolate along the line between the start/end points and draw multiple ovals in a loop.
I write simple game with libGdx. I have a hero, which always is in screen center and I must move my background sprite (or region?) to make move illusion. But my background sprite isn't infinity.
How can I create illusion of seamless infinity world?
Of course I can add several background sprites to try to cover all empty space of screen. But I must to draw out of the sceen a lot of all another objects: Houses, monsters, others heroes, etc. So I have a second question:
When I try to draw other object (a lot of objects!) out of the screen, how badly it affects memory? How to draw it correctly?
I know that OrthographicCamera in libgdx draw only viewportWidth-viewportHeight area. If it's right, then I must to move my camera and all my sprites too. I think it's not correctly.
How can I render infinity world in libgdx with OrthographicCamera?
How can I create illusion of seamless infinity world?
Create a tile background. Tile background means that if it was besides or top or bottom of itself, the edges of sticking line will not be visible to viewer.
To do this open your background image in photoshop and go to Filters > Other > Offset.
Set the offset filter to offset the background to center then try using photoshop tools to hide the edges (the + shape in image). Now again go to offset and return to 0, 0 and save your background.
When I try to draw other object (a lot of objects!) out of the screen,
how badly it affects memory? How to draw it correctly?
I have checked this and that was not much fps loosing on my test. So don't worry about it.
How can I render infinity world in libgdx with OrthographicCamera?
Move camera where-ever you want any x, y. Every time see where is camera and calculate needing tile backgrounds to draw (for example every time draw 3x3=9 backgrounds sticking together).
I want to create a number of straight lines connecting small circle shapes. then I want to change the color and width of the lines from within my program. I was thinking of using Canvas to do this but there does not seem to be a way to access individual shapes drawn on canvas to change their attributes after they are drawn. What would be an easy way to implement this?
First of all, what version of Java and which UI toolkit? AWT's Canvas is very dumb, it will not even "remember" what you have painted; when you minimize and restore the window, it will send a paint() event because it wants to be repainted.
The easiest way (if you are using AWT and stuck to Canvas) is to have a List of your shapes (either one list for all or one for circles and one for lines, or whatever you like) and make your paint method draw all of them. Then update the objects in your list. When you are done updating, call repaint() on your canvas and it will call paint() for you again.
You don't paint shapes onto a Canvas if you're using Graphics and Graphics2D functions like drawRect, drawPolygon, drawOval, etc. Once they're drawn, they don't exist as shapes anymore. You just have an image with filled-in pixels.
As mihi said, you may have to keep track of the shapes you're trying to draw, then regenerate your image if it changes. Perhaps you could also "unpaint" a shape you're trying to change by painting over it in the background color and repainting the changed shape.