I am trying to rotate a text using JOGL but it does not rotate from the center point. What can I do with the following code to rotate from the center of the text?
TextRenderer textRenderer = new TextRenderer(new Font("SansSerif", Font.PLAIN, 20));
textRenderer.setColor(Color.WHITE);
textRenderer.beginRendering(viewport.width, viewport.height, false);
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glPushMatrix();
gl.glTranslated(screenPoint.x, screenPoint.y, 0);
gl.glRotated(rotation, 0, 0, 1);
gl.glTranslated(-screenPoint.x, -screenPoint.y, 0);
textRenderer.draw("Text", (int) screenPoint.x, (int) screenPoint.y);
textRenderer.endRendering();
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glPopMatrix();
textRenderer.flush();
Related
I am having problems setting the thickness of my border. I wanted to have a JPanel with a rounded dashed border. I was able to set it rounded by overriding the paintComponent to make it round. However, when I set the stroke to make the border thicker and dashed it does not work. I use the setStroke() method. My code is the following
private void loadTopPane() {
JPanel topSection = new JPanel() {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Dimension arcs = new Dimension(15, 15); // Border corners arcs
// {width,height},
// change this to
// whatever you want
int width = getWidth();
int height = getHeight();
Graphics2D graphics = (Graphics2D) g;
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
float dash1[] = { 10.0f };
final BasicStroke dashed = new BasicStroke(1.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 10.0f,
dash1, 0.0f);
// Draws the rounded panel with borders.
graphics.setColor(getBackground());
graphics.fillRoundRect(0, 0, width - 1, height - 1, arcs.width, arcs.height);// paint
// background
graphics.setColor(getForeground());
graphics.drawRoundRect(0, 0, width - 1, height - 1, arcs.width, arcs.height);// paint
// border
graphics.setStroke(dashed);
}
};
topSection.setLayout(null);
topSection.setSize(1150, 175);
topSection.setBackground(new Color(222, 225, 226));
topSection.setBounds(25, 13, topSection.getPreferredSize().width, topSection.getPreferredSize().height);
topSection.add(new JLabel("TESTING"));
topSection.setBounds(20, 10, 1180, 180);
frame.add(topSection);
}
So the output shows me a JPanel with a rounded border but it does not give me a border that is dashed and thicker. How can I fix this?
Have you considered calling setStroke BEFORE you paint the border...
float dash1[] = {10.0f};
final BasicStroke dashed = new BasicStroke(1.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 10.0f,
dash1, 0.0f);
graphics.setStroke(dashed);
// Draws the rounded panel with borders.
graphics.setColor(getBackground());
graphics.fillRoundRect(0, 0, width - 1, height - 1, arcs.width, arcs.height);// paint
// background
graphics.setColor(getForeground());
graphics.drawRoundRect(0, 0, width - 1, height - 1, arcs.width, arcs.height);// paint
I've already searched this topic everywhere on the Internet, but nothing.
I'm programming with JAVA and I'm painting in a JPanel some shapes like yellow stars with a sort of spaceship in the center of the screen. My purpose is to make the entire scene, apart from the spaceship which remains stationary at the center, rotate around the center (and of course around the spaceship) when I press a certain button.
Now, when I rotate the stars I make them rotate around the center point wich changes as the spaceship moves, but when I do a rotation, the coordinates system changes and the ship moves diagonally, while I want to rotate the scene keeping possible to move the spaceship vertically and horizontally.
public void paintComponent(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
// RIEMPIMENTO SFONDO
g2.setColor(new Color(10, 10, 10));
g2.fillRect(0, 0, 1366, 768);
// DEBUGGER
g2.setColor(Color.WHITE);
g2.drawString("|" + posx + "|" + posy + "| " + scale, 1250, 758);
// TRASFORMAZIONE NAVICELLA
AffineTransform at = new AffineTransform();
at.translate(683, 384);
at.scale(scale, scale);
g2.setTransform(at);
AffineTransform backup = g2.getTransform();
// DISEGNO NAVICELLA
g2.setColor(Color.LIGHT_GRAY);
int[] xp = {0, -25, -25, 0, 25, 25};
int[] yp = {-25, 0, 25, 0, 25, 0};
g2.drawPolygon(xp, yp, 6);
// TRASFORMAZIONE SPAZIO
at.translate(posx, posy);
at.rotate(Math.toRadians(rotation), -posx, -posy);
g2.setTransform(at);
// DISEGNO SPAZIO
STAR(g2, 300 + posx, 100 + posy, 200, 200, Color.YELLOW);
STAR(g2, -100 + posx, -200 + posy, 200, 200, Color.YELLOW);
g2.dispose();
}
Im trying to create a vignette effect for my app. I've been searching a lot for help achieving this but was unable to find anything.
I recently found this tutorial.
And i tried to implement it in my app with this code:
public int[] drawBitmap(Bitmap originalBitmap){
Bitmap mask;
Paint paint = new Paint();
mask = convertToAlphaMask(BitmapFactory.decodeResource(context.getResources(), R.drawable.spot_mask));
Shader shader = createShader(mask);
paint.setShader(shader);
Bitmap tempBit = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(tempBit);
canvas.drawBitmap(originalBitmap, 0, 0,paint);
tempBit.getPixels(pixels, 0, tempBit.getWidth(), 0, 0, tempBit.getWidth(), tempBit.getHeight());
return pixels;
}
private static Bitmap convertToAlphaMask(Bitmap input) {
Bitmap a = Bitmap.createBitmap(input.getWidth(), input.getHeight(), Bitmap.Config.ALPHA_8);
Canvas c = new Canvas(a);
c.drawBitmap(input, 0.0f, 0.0f, null);
return a;
}
private static Shader createShader(Bitmap b) {
return new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
}
But the effect of this looks like this:(the only change is at the top of the image)
http://postimg.org/image/rrivq28v1/
What have I done wrong?
Also, are there any other alternatives for applying a vignette effect on a bitmap?
Thanks!
After long time i found it
public Bitmap vignett(Bitmap bm, int p){
Bitmap image = Bitmap.createBitmap(bm.getWidth(),bm.getHeight(), Bitmap.Config.ARGB_8888);
int rad;
Canvas canvas = new Canvas(image);
canvas.drawBitmap(bm, 0, 0, new Paint());
if(bm.getWidth()<bm.getHeight()){
int o = (bm.getHeight()*2)/100;
rad = bm.getHeight() - o*p/3;
}else{
int o = (bm.getWidth()*2)/100;
rad = bm.getWidth() - o*p/3;
}
Rect rect = new Rect(0, 0, bm.getWidth(), bm.getHeight());
RectF rectf = new RectF(rect);
int[] colors = new int[] { 0, 0, Color.BLACK };
float[] pos = new float[] { 0.0f, 0.1f, 1.0f };
Shader linGradLR = new RadialGradient(rect.centerX(), rect.centerY(),rad, colors, pos, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(linGradLR);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setAlpha(255);
canvas.drawRect(rectf, paint);
return image;
}
here int p is standard value of seekbar from 1 to 100;
for intensity of effect u can set paint.setAlpha 0 to 255!!!
My first answer got deleted because i pointed to my solution via link. So I'll answer your question right here. The trick is to use 4 linear gradients. Applying them will give you a result that comes pretty close to a true Vignette effect. And it's freaking fast too ;) So here's part of my solution.
First you must create a canvas:
Canvas canvas = new Canvas(bitmapOut);
canvas.drawBitmap(mVignette.getBitmapIn(), 0, 0, null);
Then you define how far the effect should reach into your image:
int tenthLeftRight = (int)(width/5);
int tenthTopBottom = (int)(height/5);
Now you create your four shaders:
// Gradient left - right
Shader linGradLR = new LinearGradient(0, height/2, tenthLeftRight/2, height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient top - bottom
Shader linGradTB = new LinearGradient(width/2, 0, width/2, tenthTopBottom, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient right - left
Shader linGradRL = new LinearGradient(width, height/2, (width-tenthLeftRight), height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient bottom - top
Shader linGradBT = new LinearGradient(width/2, height, width/2, (height - tenthTopBottom), Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
Now all that's left to do is to draw on the canvas:
Paint paint = new Paint();
paint.setShader(linGradLR);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setAlpha(125);
// Rect for Grad left - right
Rect rect = new Rect(0, 0, tenthLeftRight, height);
RectF rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad top - bottom
paint.setShader(linGradTB);
rect = new Rect(0, 0, width, tenthTopBottom);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad right - left
paint.setShader(linGradRL);
rect = new Rect(width, 0, width - tenthLeftRight, height);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad bottom - top
paint.setShader(linGradBT);
rect = new Rect(0, height - tenthTopBottom, width, height);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
I am developing Photography apps, and for that I am using this code:
Canvas canvas = new Canvas(bmOverlay);
TextPaint paint = new TextPaint();
paint.setColor(Color.RED);
paint.setTextAlign(Align.CENTER);
paint.setTextSize(50);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
// if the background image is defined in main.xml, omit this line
canvas.drawBitmap(mBitmap, 0, 0, null);
int left = measureTextWidth(paint, InstaTextActivity.CurrentWord);
int top = measureTextHeight(paint, InstaTextActivity.CurrentWord);
left = mBitmap.getWidth() / 2 - InstaTextActivity.textCount / 2;
top = mBitmap.getHeight() / 2 - InstaTextActivity.textCount / 2;
StaticLayout layout = new StaticLayout(InstaTextActivity.CurrentWord, paint, total,
android.text.Layout.Alignment.ALIGN_NORMAL, (float) 1.0, (float) 0.0, true);
//canvas.save();
canvas.translate(left, top);
layout.draw(canvas);
//canvas.restore();
In this code I am using paint.setTextAlign(Align.CENTER). It aligns to centre, but text doesn't align center to left, instead it aligns centre to right. Also, what is the proper way to align text on canvas?
But I want
Im using
StaticLayout mTextLayout = new StaticLayout(text, mTextPaint,
canvas.getWidth(), Alignment.ALIGN_NORMAL, 1.0f, 0.0f,
false);
canvas.translate((canvas.getWidth() / 2) - (mTextLayout.getWidth() / 2), (canvas.getHeight() / 2) - ((mTextLayout.getHeight() / 2)));
to center my multi line text on a canvas
Revised: The problem is to paint a four sided border where each side starts with a solid base color and fades to white inward over the span of the border. The challenge was to make the intersection of the borders look seamless. To accomplish this, one may draw the borders, then use triangles to 'blend' the corners. Two triangles may be used per corner if there is no overlap in the rectangles drawing the broder, or one triangle per corner is sufficient (as shown below) if two parallel border sides extend the full length of the border (ie the rectangles overlap).
private static final int GRADIENT_LENGTH = 29;
private static final int BAR_LENGTH = 25;
public static void paintGradientBorder(Graphics g, Color borderColor) {
Graphics2D g2 = (Graphics2D) g.create();
GradientPaint gradientColorWest = new GradientPaint(0, 0, borderColor,
GRADIENT_LENGTH, 0, Color.WHITE);
GradientPaint gradientColorEast = new GradientPaint(WINDOW_WIDTH - GRADIENT_LENGTH,
0, Color.WHITE, WINDOW_WIDTH, 0, borderColor);
GradientPaint gradientColorNorth= new GradientPaint(0, 0, borderColor, 0,
GRADIENT_LENGTH, Color.WHITE);
GradientPaint gradientColorSouth = new GradientPaint(0, WINDOW_HEIGHT - GRADIENT_LENGTH,
Color.WHITE,0, WINDOW_HEIGHT, borderColor);
//south bar
g2.setPaint(gradientColorSouth);
g2.fillRect(0, WINDOW_HEIGHT - BAR_LENGTH, WINDOW_WIDTH, BAR_LENGTH);
//north bar
g2.setPaint(gradientColorNorth);
g2.fillRect(0, 0, WINDOW_WIDTH, BAR_LENGTH);
//west bar
g2.setPaint(gradientColorWest);
g2.fillRect(0, BAR_LENGTH, BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH * 2);
//east bar
g2.setPaint(gradientColorEast);
g2.fillRect(WINDOW_WIDTH - BAR_LENGTH, BAR_LENGTH, WINDOW_WIDTH, WINDOW_HEIGHT - BAR_LENGTH * 2);
//NORTH WEST CORNER
//left triangle
Polygon p = new Polygon();
p.addPoint(0, 0);
p.addPoint(BAR_LENGTH, BAR_LENGTH);
p.addPoint(0, BAR_LENGTH);
g2.setPaint(gradientColorWest);
g2.fillPolygon(p);
//NORTH EAST CORNER
//right triangle
p.reset();
p.addPoint(WINDOW_WIDTH, 0);
p.addPoint(WINDOW_WIDTH - BAR_LENGTH, BAR_LENGTH);
p.addPoint(WINDOW_WIDTH, BAR_LENGTH);
g2.setPaint(gradientColorEast);
g2.fillPolygon(p);
//SOUTH WEST CORNER
//left triangle
p.reset();
p.addPoint(0, WINDOW_HEIGHT);
p.addPoint(0,WINDOW_HEIGHT - BAR_LENGTH);
p.addPoint(BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH);
g2.setPaint(gradientColorWest);
g2.fillPolygon(p);
//SOUTH EAST CORNER
//right triangle
p.reset();
p.addPoint(WINDOW_WIDTH, WINDOW_HEIGHT);
p.addPoint(WINDOW_WIDTH, WINDOW_HEIGHT - BAR_LENGTH);
p.addPoint(WINDOW_WIDTH - BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH);
g2.setPaint(gradientColorEast);
g2.fillPolygon(p);
g2.dispose();
}
What if you don't intersect the rectangles but instead use a polygon (GeneralPath)?
GeneralPath topBox = new GeneralPath();
topBox.moveTo(0, 0);
// upper right
topBox.lineTo(width, 0);
// lower right; move diagonally down and to the left as in a picture frame
topBox.lineTo(width - (insetX / 2), 0 + (insetY / 2));
// lower left
topBox.lineTo((insetX / 2), 0 + (insetY / 2));
topBox.closePath();
g2.fill(topBox);
That way the rectangles will not overlap, but instead you'll have nice crisp edges between the different segments.
Rather than creating and painting 4 rectangles, I would create a single Shape representing your border area by subtracting an inner rectangle from an outer one using Area:
Area area = new Area(new Rectangle2D.Double(...));
Area inner = new Area(new Rectangle2D.Double(...));
area.subtract(inner);
g2.setPaint(new GradientPaint(...));
g2.fill(area);