I'm trying to create an Illustrator style selection box for geometric objects in java.
When the object is selected a border is drawn and it's possible to drag the little rectangles to re-size the object. I'd also like to be able to rotate the box by dragging.
So far I can scale the box and I can rotate the box but I can't do the two together. Imagine the box is at an angle of 45 degrees. When you drag the corner to enlarge the box in the x direction this will increase both the width and height of the box because of the angle.
I can get it to work by using:
dx = dx*cos(theta) - dy*sin(theta);
dy = dy*cos(theta) + dx*sin(theta);
But this only works when the pivot point is in the top left corner. I want to be able to move the pivot around and then scale and rotate. This problem must have been solved lots of times before. Is there a way I can use an affine transform to convert my mouse draw to the coordinate space of the rotated object? I'd prefer not to have to dig through the trigonometry! Thanks in advance.
You are in luck - Java2D provides an AffineTransform class that should do everything you are looking for.
It can handle rotations, scaling, shears, flips, translations etc.
There is a concatenate function that should enable you to combine multiple transforms (as moonwave99 points out you need to do them in the right order as the combination of affine transformations is not commutative)
I pretty much worked the answer out myself although it's still not possible to move the pivot point around. In case it's helpful here's the full code for a working example using JavaFX 2.2. You can scale and rotate the box by dragging the corners around:
public class SelectionBoxDemo extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage arg0) throws Exception {
Stage stage = new Stage ();
// Root is the base pane in which we put everything
Pane root = new Pane ();
SelectionBox sb = new SelectionBox ();
sb.setSize(100, 100);
root.getChildren().add(sb);
// Create a new scene
Scene scene = new Scene (root);
stage.setScene(scene);
stage.setMinHeight(500);
stage.setMinWidth(500);
stage.show();
}
public static class SelectionBox extends Region {
private enum Position {
TopLeft, Top, TopRight, Right, BottomRight, Bottom, BottomLeft, Left;
}
// Create the corners
private Rectangle tr, tl, br, bl;
// Create selection lines
final private Line top, right, bottom, left;
// Size of corner boxes
private double cornerSize = 10;
// Create a new rotate transform
private final Rotate rotate = new Rotate();
{
getTransforms().add(rotate);
rotate.setPivotX(cornerSize);
rotate.setPivotY(cornerSize);
}
// Circle which is dragged to rotate the box
private final Circle rotateCircle;
// Variables to store mouse x and y
private double x, y;
public SelectionBox () {
// Create the circle which can be dragged to rotate the box
rotateCircle = new Circle(5);
rotateCircle.setFill(Color.PINK);
rotateCircle.setStroke(Color.rgb(0,0,0, 0.75));
// Make it draggable
rotateCircle.addEventHandler(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent event) {
setMouse(event.getSceneX(), event.getSceneY());
}
});
// When it's dragged rotate the box
rotateCircle.addEventHandler(MouseEvent.MOUSE_DRAGGED, new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent event) {
// Used to get the scene position of the corner of the box
Transform localToScene = getLocalToSceneTransform();
double x1 = getMouseX();
double y1 = getMouseY();
double x2 = event.getSceneX();
double y2 = event.getSceneY();
double px = rotate.getPivotX() + localToScene.getTx();
double py = rotate.getPivotY() + localToScene.getTy();
// Work out the angle rotated
double th1 = clockAngle(x1, y1, px, py);
double th2 = clockAngle(x2, y2, px, py);
double angle = rotate.getAngle();
angle += th2 - th1;
// Rotate the rectangle
rotate.setAngle(angle);
setMouse(event.getSceneX(), event.getSceneY());
}
});
// Build the corners
tr = buildCorner (0,0, Position.TopRight);
tl = buildCorner (0,0, Position.TopLeft);
br = buildCorner (0,0, Position.BottomRight);
bl = buildCorner (0,0, Position.BottomLeft);
// Build the lines
top = buildLine(0, 100, -100, 0);
bottom = buildLine(0, 0, 0, 0);
left = buildLine(0, 0, 0, 0);
right = buildLine(0, 0, 0, 0);
getChildren().addAll(top, bottom, left, right, tr, tl, br, bl, rotateCircle);
}
// Return the angle from 0 - 360 degrees
public double clockAngle (double x, double y, double px, double py) {
double dx = x - px;
double dy = y - py;
double angle = Math.abs(Math.toDegrees(Math.atan2(dy, dx)));
if(dy < 0) {
angle = 360 - angle;
}
return angle;
}
// Set the size of the selection box
public void setSize (double width, double height) {
tl.setX(0);
tl.setY(0);
tr.setX(width + cornerSize);
tr.setY(0);
bl.setX(0);
bl.setY(height + cornerSize);
br.setX(width + cornerSize);
br.setY(height + cornerSize);
setLine(top, cornerSize, cornerSize, width + cornerSize, cornerSize);
setLine(bottom, cornerSize, height + cornerSize, width + cornerSize, height + cornerSize);
setLine(right, width + cornerSize, cornerSize, width + cornerSize, height + cornerSize);
setLine(left, cornerSize, cornerSize, cornerSize, height + cornerSize);
top.setCursor(Cursor.V_RESIZE);
bottom.setCursor(Cursor.V_RESIZE);
left.setCursor(Cursor.H_RESIZE);
right.setCursor(Cursor.H_RESIZE);
tr.setCursor(Cursor.CROSSHAIR);
tl.setCursor(Cursor.CROSSHAIR);
br.setCursor(Cursor.CROSSHAIR);
bl.setCursor(Cursor.CROSSHAIR);
rotateCircle.setTranslateX(width + 2 * cornerSize + rotateCircle.getRadius());
rotateCircle.setTranslateY(height + 2 * cornerSize + rotateCircle.getRadius());
}
// Set the start and end points of a line
private void setLine (Line l, double x1, double y1, double x2, double y2) {
l.setStartX(x1);
l.setStartY(y1);
l.setEndX(x2);
l.setEndY(y2);
}
// Save mouse coordinates
private void setMouse(double x, double y) {
this.x = x;
this.y = y;
}
private double getMouseX () {
return x;
}
private double getMouseY () {
return y;
}
// Selection box width
public double w () {
return Math.abs(bottom.getEndX() - bottom.getStartX());
}
// Selection box height
public double h () {
return Math.abs(right.getEndY() - right.getStartY());
}
// Build a corner of the rectangle
private Rectangle buildCorner (double x, double y, final Position pos) {
// Create the rectangle
Rectangle r = new Rectangle();
r.setX(x);
r.setY(y);
r.setWidth(cornerSize);
r.setHeight(cornerSize);
r.setStroke(Color.rgb(0,0,0,0.75));
r.setFill(Color.rgb(0, 0, 0, 0.25));
r.setStrokeWidth(1);
r.setStrokeType(StrokeType.INSIDE);
// Make it draggable
r.addEventHandler(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent event) {
setMouse(event.getSceneX(), event.getSceneY());
}
});
r.addEventHandler(MouseEvent.MOUSE_DRAGGED, new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent event) {
// Get the mouse deltas
double dx = event.getSceneX() - getMouseX();
double dy = event.getSceneY() - getMouseY();
// Set save the current mouse value
setMouse(event.getSceneX(), event.getSceneY());
// Get the rotation angle in radians
double tau = - Math.toRadians(rotate.getAngle());
// Create variables for the sin and cosine
double sinTau = Math.sin(tau);
double cosTau = Math.cos(tau);
// Perform a rotation on dx and dy to the object co-ordinate frame
double dx_ = dx * cosTau - dy * sinTau;
double dy_ = dy * cosTau + dx * sinTau;
// Create a variable for the change in height of the box
double dh = h();
// Work out the new positions for the resize corners
if(pos == Position.TopLeft) {
// Set the size based on the transformed dx and dy values
setSize(w() - dx_, h() - dy_);
// Move the shape
setTranslateX(getTranslateX() + dx);
setTranslateY(getTranslateY() + dy);
}
else if (pos == Position.TopRight) {
// This comes down to geometry - you need to know the
// amount the height of the shape has increased
setSize(w() + dx_ , h() - dy_);
// Work out the delta height - that is then used to work out
// the correct translations
dh = h() - dh;
setTranslateX (getTranslateX() - dh * sinTau);
setTranslateY (getTranslateY() - dh * cosTau);
}
else if (pos == Position.BottomRight) {
setSize(w() + dx_ , h() + dy_ );
}
else if (pos == Position.BottomLeft) {
setSize(w() - dx_, h() + dy_);
dh = h() - dh;
setTranslateX(getTranslateX() + dx - dh * sinTau );
setTranslateY(getTranslateY() + dy - dh * cosTau);
}
}
});
return r;
}
private Line buildLine (double x1, double y1, double x2, double y2) {
Line l = new Line (x1, y1, x2, y2);
l.setStroke(Color.rgb(0, 0, 0, 0.75));
l.setStrokeWidth (0.5);
return l;
}
}
}
Related
I am working in a existing project for an amazfit watchface. Code is based in java. The question is: In original project, for show battery, steps and sport percentage, show three circles. My idea is to draw a rectangle (or a line) instead the original circle. The problem is I am new programming in java and I don´t know for change this without FC app.
this watch has two screens: one active and other in stand-by mode (8colors only)
active mode draws circle, standby mode works with an png image.
This is the code (for circles):
package es.xxxx.xxxx.widget;
private final float startAngleBattery = 30;
private final float arcSizeBattery = 360 - startAngleBattery - startAngleBattery;
#Override
public void init(Service service) {
this.thickness = (int) service.getResources().getDimension(R.dimen.xxxx_circles_thickness);
this.textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.textPaint.setTypeface(ResourceManager.getTypeFace(service.getResources(), ResourceManager.Font.BEBAS_NEUE));
this.textPaint.setTextSize(service.getResources().getDimension(R.dimen.xxxx_circles_font_size));
this.textPaint.setColor(service.getResources().getColor(R.color.xxxx_time_colour));
this.textPaint.setTextAlign(Paint.Align.CENTER);
this.ring = new Paint(Paint.ANTI_ALIAS_FLAG);
this.ring.setStrokeCap(Paint.Cap.ROUND);
this.ring.setStyle(Paint.Style.STROKE);
this.ring.setStrokeWidth(this.thickness);
this.circle = new Paint(Paint.ANTI_ALIAS_FLAG);
this.circle.setColor(Color.BLACK);
this.circle.setStrokeWidth(1f);
this.circle.setStyle(Paint.Style.STROKE);
#Override
public void draw(Canvas canvas, float width, float height, float centerX, float centerY) {
int count = canvas.save();
int radius = Math.round(Math.min(width / 2, height / 2)) - this.thickness;
RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
// rotate from 0 to 270 degrees
canvas.rotate(90, centerX, centerY);
this.ring.setColor(this.backgroundColour);
canvas.drawArc(oval, startAngleBattery, arcSizeBattery, false, ring);
if (batterySweepAngle != null) {
float px = getPointX(oval, centerX, startAngleBattery, batterySweepAngle);
float py = getPointY(oval, centerY, startAngleBattery, batterySweepAngle);
this.ring.setColor(this.batteryColour);
canvas.drawArc(oval, startAngleBattery, batterySweepAngle, false, ring);
canvas.drawCircle(px, py, this.thickness / 3f, circle);
canvas.drawCircle(px, py, this.thickness / 6f, circle);
}
canvas.restoreToCount(count);
if (this.batteryData != null) {
String text = String.format("%02d", this.batteryData.getLevel() * 100 / this.batteryData.getScale());
canvas.drawText(text, batteryTextLeft, batteryTextTop, textPaint);
}
}
#Override
public void onDataUpdate(DataType type, Object value) {
switch (type) {
case BATTERY:
onBatteryData((Battery) value);
break;
}
}
#Override
public List<DataType> getDataTypes() {
return Arrays.asList(DataType.BATTERY);
private void onBatteryData(Battery battery) {
this.batteryData = battery;
if (batteryData == null) {
this.batterySweepAngle = 0f;
} else {
float scale = batteryData.getLevel() / (float) batteryData.getScale();
this.batterySweepAngle = Math.min(arcSizeBattery, arcSizeBattery * scale);
}
}
private RectF nextOval(RectF oval) {
oval.left = oval.left + this.thickness + MARGIN;
oval.top = oval.top + this.thickness + MARGIN;
oval.right = oval.right - this.thickness - MARGIN;
oval.bottom = oval.bottom - this.thickness - MARGIN;
return oval;
}
private float getPointX(RectF oval, float cx, float startAngle, float sweepAngle) {
float width = oval.right - oval.left;
return (float) (cx + (width / 2D) * Math.cos((sweepAngle + startAngle) * Math.PI / 180));
}
private float getPointY(RectF oval, float cy, float startAngle, float sweepAngle) {
float height = oval.bottom - oval.top;
return (float) (cy + (height / 2D) * Math.sin((sweepAngle + startAngle) * Math.PI / 180));
}
#Override
public List<SlptViewComponent> buildSlptViewComponent(Service service) {
Typeface timeTypeFace = ResourceManager.getTypeFace(service.getResources(), ResourceManager.Font.BEBAS_NEUE);
SlptLinearLayout power = new SlptLinearLayout();
power.alignX = 2;
power.alignY = 2;
power.add(new SlptPowerNumView());
power.setTextAttrForAll(
service.getResources().getDimension(R.dimen.xxxx_circles_font_size_slpt),
-1,
timeTypeFace
);
power.setStart(
(int) service.getResources().getDimension(R.dimen.xxxx_battery_text_left_slpt),
(int) service.getResources().getDimension(R.dimen.xxxx_battery_text_top_slpt));
SlptPowerArcAnglePicView powerArcView = new SlptPowerArcAnglePicView();
powerArcView.setImagePicture(Util.assetToBytes(service, "battery_splt.png"));
powerArcView.start_angle = (int) startAngleBattery + 180 - 3;
powerArcView.full_angle = (int) arcSizeBattery + 6;
return Arrays.asList(power, powerArcView);
}
}
Thanks in advance.
For anyone still searching...
You can draw the rectangular in the "draw" function that runs in loop constantly when screen is on, however, screen off (SLPT mode) uses ingenic's libraries to draw (function buildSlptViewComponent) and there is the real problem.
I don't want to get into details because it would be pages, so have a look at GreatFit project.
I have this code to draw some vertex and edges, and
I have tried almost all the possibilities that were within my reach, but I believe the bug is in the method rotate or in the construtor
but I'm not sure
public static int CONFIG_NODE_DIAMETER = 20; //pixels
//construtor
public GraphDraw(Graph<V, E> graph) {
//count of vertex
int N = graph.numVertex();
double width = this.getWidth();
double height = this.getHeight();
Point2D center = new Point2D(width / 2, height / 2);
double angleIncrement = 360f / N;
//get all vertex from graph
ArrayList<Vertex<V>> vertex = graph.getVertex();
//draw the line and point
boolean first = true;
Point2D p = null;
for (Vertex<V> v : vertex ) { {
if (first) {
if (width > height) {
p = new Point2D(center.getX(),
center.getY() - height / 2 + CONFIG_NODE_DIAMETER * 2);
} else {
p = new Point2D(center.getX(),
center.getY() - width / 2 + CONFIG_NODE_DIAMETER * 2);
}
first = false;
} else {
p = rotate(p, center, angleIncrement);
}
}
}
}
the method that makes the rotation between 2 points
private static Point2D rotate(Point2D point, Point2D pivot, double angle_degrees) {
double angle = Math.toRadians(angle_degrees);
double sin = Math.sin(angle);
double cos = Math.cos(angle);
//translate to origin
Point2D result = point.subtract(pivot);
// rotate point
Point2D rotatedOrigin = new Point2D(
result.getX() * cos - result.getY() * sin,
result.getX() * sin + result.getY() * cos);
// translate point back
result = rotatedOrigin.add(pivot);
return result;
}
I wanna do like the image below and I tried to rotate but it is not working
any suggestion?
in this link, you can check all method in class GraphDraw, and I dont put because the post would be extensive
I wrote a Java program to take a triangle and either rotate, shift, or rotate and shift it, based upon a button click preformed by the user.
Beforehand, I instruct the user to enter in ranges of logical coordinates to determine how pixel coordinates will map to a real x-y coordinate system.
Initially, I have the triangle appearing in the middle of the screen, and after a button is clicked, the triangle is shown after a certain operation is preformed on it (i.e rotation, shifting, etc.)
However, after the operation is completed and the triangle is redrawn, I see an input box also drawn in the top-left corner of the JPanel.
I'm not sure how this keeps getting drawn there.
Code:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
public class RotateAndShiftTriangles extends JFrame {
public static void main(String[] args) { new RotateAndShiftTriangles(); }
RotateAndShiftTriangles() {
super("Drawing 50 Triangles");
final JPanel drawingPanel = new DrawTriangles();
JPanel buttonPanel = new JPanel();
JButton rotate = new JButton("Rotate"),
shift = new JButton("Shift"),
rotateShift = new JButton("Rotate and Shift"),
reset = new JButton ("Reset");
drawingPanel.setBackground(Color.WHITE);
buttonPanel.add(rotate);
buttonPanel.add(shift);
buttonPanel.add(rotateShift);
buttonPanel.add(reset);
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
DrawTriangles.rWidth = Float.parseFloat(JOptionPane.showInputDialog("Input rWidth"));
DrawTriangles.rHeight = Float.parseFloat(JOptionPane.showInputDialog("Input rHeight"));
rotate.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
DrawTriangles.rotate = true;
drawingPanel.repaint();
}
});
shift.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
DrawTriangles.shift = true;
drawingPanel.repaint();
}
});
rotateShift.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
DrawTriangles.rotate = true;
DrawTriangles.shift = true;
drawingPanel.repaint();
}
});
reset.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
DrawTriangles.reset = true;
drawingPanel.repaint();
}
});
setSize(600, 400);
add("South", buttonPanel);
add("Center", drawingPanel);
setVisible(true);
}
}
class DrawTriangles extends JPanel {
static float rWidth, rHeight, pixelSize;
static int maxX, maxY, minMaxXY, centerX, centerY;
static boolean rotate = false, shift = false, reset = false;
float angle = 0;
void initialize() {
Dimension d = getSize();
maxX = d.width - 1; maxY = d.height - 1;
pixelSize = Math.max(rWidth / maxX, rHeight / maxY);
minMaxXY = Math.min(maxX, maxY);
centerX = maxX/2; centerY = maxY/2;
}
public int iX2(float x) { return Math.round(x); }
public int iY2(float y) { return maxY - Math.round(y); }
public static int iX(float x) { return Math.round(centerX + x / pixelSize); }
public static int iY(float y) { return Math.round(centerY - y / pixelSize); }
public static float fx(int x) { return (x - centerX) * pixelSize; }
public static float fy(int y) { return (centerY - y) * pixelSize; }
public void paint(Graphics g) {
super.paintComponent(g);
initialize();
int left = iX(-rWidth/2), right = iX(rWidth/2);
int top = iY(rHeight/2), bot = iY(-rHeight/2);
g.drawString("X: " + -rWidth/2 + " Y: " + rHeight/2, left, top + 10);
g.drawString("X: " + rWidth/2 + " Y: " + rHeight/2, right - 55, top + 10);
g.drawString("X: " + -rWidth/2 + " Y: " + -rHeight/2, left, bot);
g.drawString("X: " + rWidth/2 + " Y: " + -rHeight/2, right - 55, bot);
g.setColor(Color.BLUE);
g.drawRect(left, top, right - left, bot - top);
float side = 0.95f * minMaxXY, sideHalf = 0.5F * side,
h = sideHalf * (float)Math.sqrt(3),
xA, yA, xB, yB, xC, yC,
xA1, yA1, xB1, yB1, xC1, yC1, p, q;
q = 0.05F;
p = 1 - q;
xA = centerX - sideHalf;
yA = centerY - 0.5F * h;
xB = centerX + sideHalf;
yB = yA;
xC = centerX;
yC = centerY + 0.5F * h;
if(!reset) {
if(rotate) {
angle += Float.parseFloat(JOptionPane.showInputDialog("Input Angle of Rotation (in degrees)"));
float xR = fx(Integer.parseInt(JOptionPane.showInputDialog("Input X Coordinate for Rotation"))),
yR = fx(Integer.parseInt(JOptionPane.showInputDialog("Input Y Coordinate for Rotation")));
xA = rotateX(xA, yA, xR, yR, angle);
yA = rotateY(xA, yA, xR, yR, angle);
xB = rotateX(xB, yB, xR, yR, angle);
yB = rotateY(xB, yB, xR, yR, angle);
xC = rotateX(xC, yC, xR, yR, angle);
yC = rotateY(xC, yC, xR, yR, angle);
rotate = false;
}
if(shift) {
float xShift = -fx(Integer.parseInt(JOptionPane.showInputDialog("Input X Coordinate for Shift"))),
yShift = -fx(Integer.parseInt(JOptionPane.showInputDialog("Input Y Coordinate for Shift")));
xA += xShift;
yA += yShift;
xB += xShift;
yB += yShift;
xC += xShift;
yC += yShift;
shift = false;
}
}
g.setColor(Color.RED);
for (int i = 0; i < 50; i++) {
g.drawLine(iX2(xA), iY2(yA), iX2(xB), iY2(yB));
g.drawLine(iX2(xB), iY2(yB), iX2(xC), iY2(yC));
g.drawLine(iX2(xC), iY2(yC), iX2(xA), iY2(yA));
if(i == 0) {
g.setColor(Color.BLACK);
g.drawString("A: X- " + xA + " Y- " + yA, 0, 50);
g.drawString("B: X- " + xB + " Y- " + yB, 0, 60);
g.drawString("C: X- " + xC + " Y- " + yC, 0, 70);
g.setColor(Color.RED);
}
xA1 = p * xA + q * xB;
yA1 = p * yA + q * yB;
xB1 = p * xB + q * xC;
yB1 = p * yB + q * yC;
xC1 = p * xC + q * xA;
yC1 = p * yC + q * yA;
xA = xA1; xB = xB1; xC = xC1;
yA = yA1; yB = yB1; yC = yC1;
}
if(reset)
angle = 0;
reset = false;
}
public float rotateX(float x, float y, float xR, float yR, float angle) {
angle *= (Math.PI / 180.0);
float c = (float)Math.cos(angle), s = (float)Math.sin(angle),
xF = x - xR, yF = y - yR,
rx = xF * c - yF * s;
return rx + xR;
}
public float rotateY(float x, float y, float xR, float yR, float angle) {
angle *= (Math.PI / 180.0);
float c = (float)Math.cos(angle), s = (float)Math.sin(angle),
xF = x - xR, yF = y - yR,
ry = xF * s + yF * c;
return ry + yR;
}
}
I keep getting this
You are triggering JOptionPane popups inside your paint() method.
Calls to .paint() and its siblings should limit themselves to redrawing the object, nothing else. As is, your code will cause your .paint() method to block until the popup is closed, then continue processing where it left off, potentially picking up artifacts still on the screen. As you can see here, the background is painted (by the call to super.paintComponent()) then the popup is drawn and closed, then the rest of your .paint() method runs, but since the background has already been painted, nothing repaints over where the popup was.
You should move code like:
angle += Float.parseFloat(JOptionPane.showInputDialog("Input Angle of Rotation (in degrees)"));
float xR = fx(Integer.parseInt(JOptionPane.showInputDialog("Input X Coordinate for Rotation"))),
yR = fx(Integer.parseInt(JOptionPane.showInputDialog("Input Y Coordinate for Rotation")));
and
float xShift = -fx(Integer.parseInt(JOptionPane.showInputDialog("Input X Coordinate for Shift"))),
yShift = -fx(Integer.parseInt(JOptionPane.showInputDialog("Input Y Coordinate for Shift")));
out into the appropriate ActionListener methods, set the necessary values, and then use them from within your paint() method.
You should also be consistent about using .paint() and .paintComponent(), like #camickr suggests, don't have one method call its sibling's super.
public void paint(Graphics g) {
super.paintComponent(g);
Don't know if it is the only problem but, custom painting is done by overriding the paintComponent() method:
public void paintComponent(Graphics g) {
super.paintComponent(g);
Edit:
Other comments, not directly related to the problem, but important for proper design:
add("South", buttonPanel);
add("Center", drawingPanel);
Don't use hard coded literals. The layout manager will provide variable you can use. Also, that form of the add(...) method is not recommended (read the API). The new form is:
add(buttonPanel, BordeLayout.PAGE_END);
add("Center", BorderLayout.CENTER);
Don't use static methods and variables. If you want to change a property of your class then create "setter" method. For example create a setter method:
public void setRotate(Boolean rotate)
{
this.rotate = rotate
repaint();
}
Also, not that the setter method invokes the repaint() method. This is because your custom class (not the code that uses the class) should be responsible for doing the repaint.
Then invoke the setter method:
//DrawTriangles.rotate = true; // wrong
drawingPanel.setRotate(true);
Looks like this only happens if dialogs are displayed. I've modified the code and hardcoded some values, it worked without problems.
if(!reset) {
if(rotate) {
angle += Float.parseFloat("15");
float xR = fx(3),
yR = fx(3);
// other stuff...
}
I suggest you try displaying dialogs and setting corresponding values before repainting the components, something similar to this:
shift.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
float xShift = -DrawTriangles.fx(Integer.parseInt(JOptionPane.showInputDialog("Input X Coordinate for Shift"))),
yShift = -DrawTriangles.fx(Integer.parseInt(JOptionPane.showInputDialog("Input Y Coordinate for Shift")));
drawingPanel.xShift = xShift;
drawingPanel.yShift = yShift;
DrawTriangles.shift = true;
drawingPanel.repaint();
}
});
Using BufferedImage corrected the drawing but still the exception occurred.
public void paint(Graphics gg) {
BufferedImage bf = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
Graphics2D g = bf.createGraphics();
g.setColor(Color.WHITE);
g.fillRect(0, 0, getWidth(), getHeight());
...
gg.drawImage(bf, 0, 0, null);
if(reset)
angle = 0;
reset = false;
}
I'm working on a fun assignment that consists of a little ship that moves with the mouseMoved() and shoots laser beam in random directions. I want to use drawLine(mouse_x, mouse_y, ?, ?)for the laser but I can't define the coordinates of x2 and y2. The laser has to cross the screen.
This is what I have so far. page.drawLine(mouse_x-15, mouse_y-5,300,300);of course I don't want the laser to keep shooting at the corner (300,300).
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class SpaceShip extends Applet
implements MouseListener, MouseMotionListener {
private int applet_width = 300; //width of applet
private int applet_height =300; //height of applet
private int mouse_x, mouse_y; // the mouse coordinates
private int shots = 0; //count of shots
private boolean buttonPressed = false;
//init()
public void init() {
setSize(applet_width, applet_height); //set size of applet
setBackground( Color.black ); //set color of background
mouse_x = applet_width/2; //initiate mouse in the middle of the applet
mouse_y = applet_height/2;
addMouseListener( this ); //adding mouse listener
addMouseMotionListener( this ); // adding motion listener
}
// Drawing of the spaceship and laser beam
public void paint( Graphics page ) {
page.setColor(colorRand()); // random color laser beam
page.drawLine(mouse_x-15, mouse_y-5,300,300);
page.setColor( Color.YELLOW );//yellow spaceship
page.fillOval( mouse_x-30, mouse_y-15, 60, 30 );
}
public void mouseEntered( MouseEvent e ) {
}
public void mouseExited( MouseEvent e ) {
}
public void mouseClicked( MouseEvent e ) {
shots++;
showStatus("Number of shots: " + shots);
}
public void mousePressed( MouseEvent e ) {
buttonPressed = true;
repaint();
}
public void mouseReleased( MouseEvent e ) {
buttonPressed = false;
setBackground( Color.black );
repaint();
}
public void mouseMoved( MouseEvent e ) {
mouse_x = e.getX();
mouse_y = e.getY();
repaint();
}
public void mouseDragged( MouseEvent e ) {
}
//method generating a random color RGB
public Color colorRand(){
int r = (int)(Math.random()*256);
int g = (int)(Math.random()*256);
int b = (int)(Math.random()*256);
Color randomColor = new Color(r,g,b);
return randomColor;
}
}
Thank you in advance, I've been stuck on this for quite a while now.
Didi
Similar to the answer Snicolas gave:
int x2;
int y2;
//get direction for x cooord
int direction = (int) (Math.random() * 2);
if(direction == 0)
x2 = (int) (300 + Math.random() * applet_width);
else
x2 = ((int) (300 + Math.random() * applet_width)) * -1;
//get direction for the y coord
direction = (int) (Math.random() * 2);
if(direction == 0)
y2 = (int) (300 + Math.random() * applet_width);
else
y2 = ((int) (300 + Math.random() * applet_width)) * -1;
//draw the line
page.drawLine(mouse_x-15, mouse_y-5,x2,y2);
This will create a line to a random point that goes past the edge of the screen
You could use a small algorithm :
//find a random angle :
double randomAngle = Math.random()*Math.PI*2;
//find the diameter of the circle around your ship that contains all the screen
int maxX = Math.max( mouse_x, screenWidth - mouse_x );
int maxY = Math.max( mouse_y, screenHeight - mouse_y );
int diam = (int) Math.sqrt( maxX * maxX + maxY * maxY );
//Then take the point of this circle at randomAngle :
int x2 = mouse_x + (int) diam*Math.cos( randomAngle );
int y2 = mouse_y + (int) diam*Math.sin( randomAngle );
page.drawLine( mouse_x - 15, mouse_y - 5, x2, y2 );
Where you could get the screen dimensions, like in this thread : How can I get screen resolution in java?.
I am creating a custom view which is a kind of arc slider progress view.I can draw more or less of the arc based on where the user touches(on the x axis) by calculating the sweep, i do this by first calculating the percetage where the user touched along the x axis..0% would be all the way to the left and 100% would be all the way to the right.
I want to take this a step further, instead off drawing the arc based on the x coordinate that the user presses, I want to make it move only when the user touches on the actual arc draw path, so its more realistic. I am still new to custom views and my maths is limited but if I get some tips I would be grateful thanks
class ArcProgress extends View {
Context cx;
float width;
float height;
float center_x, center_y;
final RectF oval = new RectF();
final RectF touchArea = new RectF();
float sweep = 0;
float left, right;
int percent = 0;
public ArcProgress(Context context) {
super(context);
cx = context;
}
public int getPercentage() {
return percent;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
setBackgroundColor(0xfff0ebde);
width = (float) getWidth();
height = (float) getHeight();
float radius;
if (width > height) {
radius = height / 3;
} else {
radius = width / 3;
}
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(0xffd2c8b6);
paint.setStrokeWidth(35);
paint.setStyle(Paint.Style.STROKE);
center_x = width / 2;
center_y = height / 2;
left = center_x - radius;
float top = center_y - radius;
right = center_x + radius;
float bottom = center_y + radius;
oval.set(left, top, right, bottom);
//this is the background arc, it remains constant
canvas.drawArc(oval, 180, 180, false, paint);
paint.setStrokeWidth(10);
paint.setColor(0xffe0524d);
//this is the red arc whichhas its sweep argument manipulated by on touch
canvas.drawArc(oval, 180, sweep, false, paint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
float xPosition = event.getX();
float yPosition = event.getY();
if (oval.contains(xPosition, yPosition)) {
float x = xPosition - left;
float s = x * 100;
float b = s / oval.width();
percent = Math.round(b);
sweep = (180 / 100.0f) * (float) percent;
invalidate();
} else {
if (xPosition < left) {
percent = 0;
sweep = (180 / 100.0f) * (float) percent;
invalidate();
}
if (xPosition > right) {
percent = 100;
sweep = (180 / 100.0f) * (float) percent;
invalidate();
}
}
}
return true;
}
}
I want to make it move only when the user touches on the actual arc
draw path
At the beginning of onTouchEvent() you need to check whether xPosition and yPosition are fulfilling some condition. If yes, you do the stuff, which you are doing now. If no, return true.
Condition:
We want to check whether x, y are in that grey arc background:
Let's calculate a distance from (x, y) to that point (a, b) in the center:
final dist = distance(x, y, a, b)
distance() is a simple Euclidean distance between points (x,y) and (a,b):
double distance(int x, int y, int a, int b)
{
return Math.sqrt((x - a) * (x - a) + (y - b) * (y - b));
}
x, y are in that grey arc background, if y > Y && dist >= r && dist <= R.
Does this work for you?
You don't need a lot of Maths. You can calculate the distance of the touch point from the center of your arc (it's a circle so it's easy) and the compare that with the radius you are using. That will tell you if the point is on the arc (almost, see below for full case).
Point touchEv = ...;
Point circleCenter = ...;
//the radius of the circle you used to draw the arc
float circleRadius = ...;
//how far from the arc should a touch point treated as it's on the arc
float maxDiff = getResources().getDimension(R.dimen.max_diff_dp);
//calculate the distance of the touch point from the center of your circle
float dist = Math.pow(touchEv.x-circleCenter.x,2) + Math.pow(touchEv.y- circleCenter.y,2)
dist = Math.sqrt(dist);
//We also need the bounding rect of the top half of the circle (the visible arc)
Rect topBoundingRect = new Rect(circleCenter.x - circleRadius,
circleCenter.y - circleRadius,
circleCenter.x + circleRadius,
circleCenter.y);
if (Math.abs(dist - circleRadius) <= maxDiff &&
topBoundingRect.contains(touchEv.x, touchEv.y)) {
// the user is touching the arc
}