I am drawing a triangle on a Canvas, something like:
canvas.moveTo(0, 30);
canvas.lineTo(40, 0);
canvas.lineTo(40, 40);
canvas.lineTo(40, 40);
canvas.lineTo(0, 30);
And get proper triangle on my Canvas. But I need to curve the sides a little and fill that path with specific color. What is the easiest way to do this? Drawing arcs? But how to fill the object?
Thanks!
EDIT: I noticed you were using android's canvas, not HTML Canvas, sorry. The concept is exactly the same except you'll call quadTo() instead of quadraticCurveTo(), so my example should still get you going.
Also on android you use canvas.drawPath(path, paint) and pass in a paint that has its Paint.style set to FILL_AND_STROKE.
You will want to construct the path, fill() it, then stroke() it in order to get both a filled path with the stroke outline.
To get that particular shape, the easiest way is to draw two quadratic curves. A quadratic curve first needs a control point x,y then the end point x,y. The control point for both curves should be around the middle of your desired triangle. Here is an example:
ctx.fillStyle = "lightgray";
ctx.moveTo(0, 100);
ctx.quadraticCurveTo(50, 50, 50, 0);
ctx.quadraticCurveTo(50, 50, 100, 100);
ctx.lineTo(0, 100);
ctx.fill();
ctx.stroke();
Here is that example live for you.
Related
My goal is to fill the screen with a black rect with an alpha of 128 so the screen looks dark, then make it so I can render rects to the screen and the place they are rendered to turns fully transparent so you can see right through that rect. I have made the screen get filled partially black but I cannot make it go transparent when I draw a rect on top of that. I have never used AlphaComposites but I assumed that I'm gonna have to use one of those to make this work. Anyone know how I could get this done?
private Color darknessColor = new Color(0,0,0,128), flashlightColor = new Color(255,255,255,128);
public void render(Graphics g) {
// Draws the darkness part of the screen.
Graphics2D g2 = (Graphics2D) g;
g2.setColor(darknessColor);
g2.fillRect(0, 0, handler.getWidth(), handler.getHeight());
g2.setColor(flashlightColor);
g2.setComposite(AlphaComposite.DstOut);
g2.fillRect(200, 200, 300, 200);
g2.dispose();
}
There is no way to "undraw" a rectangle which has already been drawn; if you've already painted over the scene behind the rectangle, then it's gone. The solution is to only draw the black shape where you want it; this means it is not simply a rectangle, but if the part you want to "cut out" is a rectangle, then you could achieve the effect you want by drawing four black rectangles, like so:
Hopefully it's straightforward how to compute the coordinates that these four rectangles should have.
I am creating a small java 2D game and i want to know if there is any way to rotate AWT rectangle
AffineTransform origXform = g2d.getTransform();
AffineTransform newXform = (AffineTransform) origXform.clone();
newXform.rotate(angle, pivotX, pivotY); // pivotX ,pivotY is the starting
point of the hand image
g2d.setTransform(newXform);
Rectangle arm = new Rectangle(bowX + 5, bowY + 55, 60, 5);
g2d.drawImage(playerBowReadyImg, bowX, bowY, null); //hand image
on the above code i simply draw the hand image which rotates based on the mouse position, i also set the rectangle on the hand but the problem is rectangle is not rotating along with the hand image.
also i am not using rectangle for any drawing purpose but to detect the collision.
however using g2d.draw(arm); draws the rotated rectangle but it not actually rotate the rectangle it just draws the rotated one.
any suggestion is appreciated.
Ok my question is marked as duplicate so i tried the answers i find there but the code i get only rotate my rectangle for the draw purpose only.
Image to depict the problem
now to be more specific the arrow in the image can only detect the collision for the blue rectangle (the original position) instead of the red one (rotated rectangle).
again i don't want to actually draw the rectangle but want to detect the collision when the arrow collide with the rectangle.
See AffineTransform.createTransformedShape(Shape) which:
Returns a new Shape object defined by the geometry of the specified Shape after it has been transformed by this transform.
Java student here
I'm trying to create a line that moves as I move a physical accelerometer/gyro, and a method that returns TRUE when the line intersects with rectangles I've positioned in a 2D coordinate system.
Obviously Line2D and Rectangle2D are graphical classes which I've just discovered won't work unless it's set in a JFrame and painted, which I'm not looking for. So I was wondering if there were other classes that might be better suited for this. Or do I have to manually always calculate the equation of the line segment, and four sides of a rectangle segment and check for intersections that way?
Any ideas?
The classes just encapsulate shape information. You can use them perfectly fine without rendering and even in a "headless" (no rendering hardware) environment.
Line2D line = new Line2D.Double(1, 5, 4, 0);
Rectangle2D rect = new Rectangle2D.Double(1, 1, 2, 2);
System.out.println(line.intersects(rect));
This outputs "true".
g.drawRect(50, 50, 400, 75);
g.fillRect(50, 50, 200, 200);
Someone told me the first line will draw a rectangle while the second one will draw a square. I understand the parameters, but however wouldn't g.drawRect(50,50,200,200); also draw a square? I thought fill would actually fill the square with a color.
The difference between draw and fill is whether you just get the outline or a "solid" (i.e. filled) shape.
http://docs.oracle.com/javase/8/docs/api/java/awt/Graphics2D.html#draw-java.awt.Shape-
http://docs.oracle.com/javase/8/docs/api/java/awt/Graphics2D.html#fill-java.awt.Shape-
Hello for a school exercise i need to create a game and i decided to create Pacman. Everything goes well but one thing i can't accomplish is to draw a pacman dude and his ghosts.. i made and oval but what now? i want the pacman mouth also to open and close as it moves. can someone help drawing this?
below what i have till now:
package h04PacMan;
import java.awt.*;
public class DrawPacMan {
public void drawPacMan(Graphics g, int x, int y, Color color) {
g.setColor(color); // set color
g.fillOval(x, y, 50, 50); // paint
g.setColor(Color.black);
g.drawOval(x, y, 50, 50); // outline
// mouth?
}
public void drawGhost(Graphics g, int x, int y, Color color) {
g.setColor(color); // color
// here goes shape
}
}
Instead of using drawOval and fillOval, you should have a look at drawArc and fillArc.
See java.awt.Graphics.
Concerning the animation of the mouth: Given that pacman is constantly moving, you could combine pacman's position with a sine function to get a nice and smooth mouth movement, something like this:
angle = 20 * (Math.sin((x + y)*2*Math.PI/50) + 1); # alt. betw. 0 and 40
g.fillArc(x, y, 50, 50, angle/2, 360-angle);
This way, Pacman's mouth will automatically do one open-close-cycle as he moves a distance of his own size through the maze. (You may have to tweak the numbers a bit to fit your setup.)
Of course, you will still need a thread to run the game as a whole, but the animation of Pacman's mouth can be done this way, too, without extra threads.
So there are a couple of things going on here that you will need to address.
1. Drawing Characters
I'll only address drawing Pacman here.
Thinking about the Pacman game, Pacman's character has two states -- mouth closed, and mouth opened (in each cardinal direction!). This will be important for when we animate Pacman in a moment, so first, lets establish our pacman shape by using the fillArc method from the Graphics library.
Example of Mouth-Open Pacman:
g.setColor(Color.yellow);
g.fillArc(0,0,150,150,30,300);
This will create pacman in the top-left corner of your window, with pacman's mouth facing to the right of the screen. The last two paramters of the fillArc method control this opening -- the 5th parameter is the starting angle, and the sixth parameter is the angle of the full arc. You may infer from this that the start angle 0 is the horizontal line going from the center of the arc to the right of the screen. Also remember from mathematics that a full circle is 360 degrees.
Using this information, try drawing mouth-opened Pacman facing up, down and left. After you do that, fill the entire arc to draw Pacman with his mouth closed. Also consider other methods in the Graphics library you can use to draw your ghosts!
2. Animating Pacman
For this task you will probably want to implement some sort of Thread structure to animate Pacman, which gets quite a bit more complicated than what you've demonstrated here. Since we don't know your program specifications, and you also haven't demonstrated any code relating to the animation yet, I'm hesitant to lay this out any further. However, I will direct you to some links on the matter:
For a general overview, check out Java Tutorials - Concurrency.
If you're using Swing for this project, you may want to use SwingWorker for your threads.
I'd recommend taking advantage Area/Path2D API.
Have a look at Graphics 2D
You can have a look at the sample code in this answer for an example