How to draw both line to smooth joining in png

[luoluo]

Hello everyone,

I need draw smooth joining line into png ,but every time I draw straight joining line,

Attached is my picture.

can you help me ?

thank you.

[Fubarable]

I don't get what you mean by "in png"? I assume that you're drawing in a BufferedImage, correct? And what are you using to draw the connections? Lines? What Stroke object?

Suggestion: show us code and two images: 1) what you're getting and 2) what you want.

[luoluo]

I don't get what you mean by "in png"? I assume that you're drawing in a BufferedImage, correct? And what are you using to draw the connections? Lines? What Stroke object?

Suggestion: show us code and two images: 1) what you're getting and 2) what you want.

I want to draw connection line point is smooth in a BufferedImage.

My code below.

public class ExportPng {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		ExportPng png = new ExportPng();
		png.run();
	}
	
	private void run(){
		BufferedImage image = new BufferedImage(600,500,BufferedImage.TYPE_3BYTE_BGR);
		Graphics2D g2d = image.createGraphics();
		image = g2d.getDeviceConfiguration().createCompatibleImage(600, 500,Transparency.TRANSLUCENT);
		
		g2d = image.createGraphics();
		g2d.setColor(Color.blue);
		//Line thickness 5
		g2d.setStroke(new BasicStroke(5.0f));
		//g2d.setBackground(Color.gray);
		g2d.drawLine(1, 2, 123, 467);
		//Line thickness 15
		g2d.setStroke(new BasicStroke(5.0f));
		g2d.drawLine(123, 467, 53, 300);

		System.out.println(this.getClass().getResource(".").getPath());
		try {
			ImageIO.write(image, "png", new File(this.getClass().getResource(".").getPath()+"aa.png"));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		g2d.dispose();
	}

}

The attached of aa.png is my getting,but it is not my expect.

The attached of expect.png is my wanted result.

[Fubarable]

Sorry, but I'm still having difficulties here. Your code draws two lines, pure and simple. If you want to give the BasicStroke object some softer curves, you can do that by using a different BasicStroke constructor. If you want to draw curves instead of lines, well the Graphics2D has the tools to let you do that, but the major issue for me is that the two images you show, obtained and expected, are so completely different as to be uncomparable. Can you show a simpler picture that shows what you want to draw, or explain it better in words?

[luoluo]

Sorry, but I'm still having difficulties here. Your code draws two lines, pure and simple. If you want to give the BasicStroke object some softer curves, you can do that by using a different BasicStroke constructor. If you want to draw curves instead of lines, well the Graphics2D has the tools to let you do that, but the major issue for me is that the two images you show, obtained and expected, are so completely different as to be uncomparable. Can you show a simpler picture that shows what you want to draw, or explain it better in words?

I also want to draw simper line,I want to draw line look like green line style part in the my attached of second image.can you show your drawing image for me ? can you introduce me to your the Graphics2D tools ?

[Fubarable]

Please have a look here:
Drawing Geometric Primitives (The Java™ Tutorials > 2D Graphics > Working with Geometry)
QuadCurve2D (Java Platform SE 6)
Graphics2D (Java Platform SE 6)

[Fubarable]

I've not previously used QuadCurves, and so I decided to play with them a bit. The result is a bit messy, so not sure it will help you, but it helped me:

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.Stroke;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.ArrayList;
import java.util.List;

import javax.swing.*;

public class TestQuadCurve {
  public static final Point[] POINTS = {
    new Point(26,109),
    new Point(192,45),
    new Point(147,246),
    new Point(127,331),
    new Point(316,363),
    new Point(490,378),
    new Point(536,118)
  };
  
  private static void createAndShowUI() {
    final QuadCurvePanel qPanel = new QuadCurvePanel();
    MyMouseListener mouseListener = new MyMouseListener(qPanel);
    qPanel.addMouseListener(mouseListener);
    qPanel.addMouseMotionListener(mouseListener);
    for (Point p : POINTS) {
      qPanel.addPoint(p);
    }
    qPanel.setPreferredSize(new Dimension(600, 450));
    
    JToggleButton showPointsBtn = new JToggleButton("Show/Hide Points");
    showPointsBtn.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        JToggleButton tBtn = (JToggleButton) e.getSource();
        qPanel.setShowPoints(!tBtn.isSelected());
        qPanel.repaint();
      }
    });
    JPanel btnPanel = new JPanel();
    btnPanel.add(showPointsBtn);
    
    JFrame frame = new JFrame("TestQuadCurve");
    frame.getContentPane().add(qPanel, BorderLayout.CENTER);
    frame.getContentPane().add(btnPanel, BorderLayout.SOUTH);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public static void main(String[] args) {
    java.awt.EventQueue.invokeLater(new Runnable() {
      public void run() {
        createAndShowUI();
      }
    });
  }
}

@SuppressWarnings("serial")
class QuadCurvePanel extends JPanel {
  private static final Color POINT_COLOR = Color.blue;
  private static final Color CONTROL_POINT_COLOR = Color.red;
  private static final Color POINT_COLOR_BORDER = POINT_COLOR.darker().darker();
  private static final Color CONTROL_POINT_COLOR_BORDER = Color.red.darker().darker();
  private static final int CIRCLE_RADIUS = 8;
  private static final float STROKE_WIDTH = 4;
  private static final Stroke CURVE_STROKE = new BasicStroke(STROKE_WIDTH);
  private static final Color CURVE_COLOR = new Color(0, 255, 255);
  private List<CenteredCircle> points = new ArrayList<CenteredCircle>();
  private List<QuadCurve2D> curves = new ArrayList<QuadCurve2D>();
  private boolean showPoints = true;
  
  public void addPoint(Point p) {
    points.add(new CenteredCircle(p, CIRCLE_RADIUS));
    calcCurves();
  }
  
  /**
   * checks if Point p is contained in points List
   * @param p
   * @return pointIndex, the index of the CenterCircle that contains the point
   * or -1 if not found
   */
  public int getPointIndex(Point p) {
    for (int i = points.size() - 1; i >= 0; i--) {
      if (points.get(i).contains(p)) {
        return i;
      }
    }
    // default
    return -1;
  }
  
  public Point getPointCenter(int pointIndex) {
    if (pointIndex < 0 || pointIndex >= points.size()) {
      throw new IllegalArgumentException("bad point index: " + pointIndex);
    }
    
    CenteredCircle cCircle = points.get(pointIndex);
    return cCircle.getCenter();
  }
  
  public void movePoint(int pointIndex, Point location) {
    if (pointIndex < 0 || pointIndex >= points.size()) {
      throw new IllegalArgumentException("bad point index");
    }
    
    CenteredCircle cCircle = points.get(pointIndex);
    cCircle.setCenter(location);
  }

  public void calcCurves() {
    int pointCount = points.size();
    if (pointCount > 2) {
      curves.clear();
      for (int i = 0; i < (pointCount - 1)/2; i++) {
        int j = 2*i + 1;
        Point p0 = points.get(j - 1).getCenter();
        Point p1 = points.get(j).getCenter();
        Point p2 = points.get(j + 1).getCenter();
        QuadCurve2D curve = new QuadCurve2D.Double(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y);
        curves.add(curve);
      }
    }
  }
  
  public void setShowPoints(boolean showPoints) {
    this.showPoints = showPoints;
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    int pointCount = points.size();
    Graphics2D g2 = (Graphics2D) g;
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    Stroke currentStroke = g2.getStroke();
    drawCurve(pointCount, g2);
    g2.setStroke(currentStroke);
    if (showPoints) {
      drawPoints(g2);
    }
  }

  private void drawCurve(int pointCount, Graphics2D g2) {
    g2.setColor(CURVE_COLOR);
    g2.setStroke(CURVE_STROKE);
    for (QuadCurve2D curve : curves) {
      g2.draw(curve);
    }
  }
  
  private void drawPoints(Graphics2D g2) {
    int pointCount = 0;
    for (CenteredCircle p : points) {
      boolean even = (pointCount % 2 == 0);
      Color c = (even) ? POINT_COLOR : CONTROL_POINT_COLOR;
      g2.setColor(c);
      g2.fill(p);
      c = (even) ? POINT_COLOR_BORDER : CONTROL_POINT_COLOR_BORDER;
      g2.setColor(c);
      g2.draw(p);
      pointCount++;
    }
  }
  
}

@SuppressWarnings("serial")
class CenteredCircle extends Ellipse2D.Double {
  private Point center;
  private int radius;
  
  public CenteredCircle(Point center, int radius) {
    super(center.x - radius, center.y - radius, 2*radius, 2*radius);
    this.center = center;
    this.radius = radius;
  }
  
  public Point getCenter() {
    return center;
  }
  
  public int getRadius() {
    return radius;
  }
  
  public void setCenter(Point center) {
    this.center = center;
    setFrame(center.x - radius, center.y - radius, 2*radius, 2*radius);
  }
}

class MyMouseListener extends MouseAdapter {
  private QuadCurvePanel qPanel;
  private Point selectedPointCenter = null;
  private Point delta = null;
  private int pointIndex = -1;
    
  public MyMouseListener(QuadCurvePanel panel) {
    qPanel = panel;
  }

  @Override
  public void mousePressed(MouseEvent e) {
    Point initialMousePoint = e.getPoint();
    pointIndex = qPanel.getPointIndex(initialMousePoint);
    if (pointIndex < 0) {
      initialMousePoint = null;
      return;
    }
    selectedPointCenter = qPanel.getPointCenter(pointIndex);
    delta = new Point(initialMousePoint.x - selectedPointCenter.x, initialMousePoint.y - selectedPointCenter.y);
  }
  
  @Override
  public void mouseReleased(MouseEvent e) {
    pointIndex = -1;
    selectedPointCenter = null;
    delta = null;
  }
  
  @Override
  public void mouseDragged(MouseEvent e) {
    if (delta == null) {
      return;
    }
    Point p = e.getPoint();
    int x = p.x - delta.x;
    int y = p.y - delta.y;
    qPanel.movePoint(pointIndex, new Point(x, y));
    qPanel.calcCurves();
    qPanel.repaint();
  }
}

Note that this is not finished. To work well, there must be constraints placed on the quadratic curve points, that each one must be on the line defined by the two surrounding control points. Otherwise you'll have sharp angles.

[luoluo]

I've not previously used QuadCurves, and so I decided to play with them a bit. The result is a bit messy, so not sure it will help you, but it helped me:

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.Stroke;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.ArrayList;
import java.util.List;

import javax.swing.*;

public class TestQuadCurve {
  public static final Point[] POINTS = {
    new Point(26,109),
    new Point(192,45),
    new Point(147,246),
    new Point(127,331),
    new Point(316,363),
    new Point(490,378),
    new Point(536,118)
  };
  
  private static void createAndShowUI() {
    final QuadCurvePanel qPanel = new QuadCurvePanel();
    MyMouseListener mouseListener = new MyMouseListener(qPanel);
    qPanel.addMouseListener(mouseListener);
    qPanel.addMouseMotionListener(mouseListener);
    for (Point p : POINTS) {
      qPanel.addPoint(p);
    }
    qPanel.setPreferredSize(new Dimension(600, 450));
    
    JToggleButton showPointsBtn = new JToggleButton("Show/Hide Points");
    showPointsBtn.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        JToggleButton tBtn = (JToggleButton) e.getSource();
        qPanel.setShowPoints(!tBtn.isSelected());
        qPanel.repaint();
      }
    });
    JPanel btnPanel = new JPanel();
    btnPanel.add(showPointsBtn);
    
    JFrame frame = new JFrame("TestQuadCurve");
    frame.getContentPane().add(qPanel, BorderLayout.CENTER);
    frame.getContentPane().add(btnPanel, BorderLayout.SOUTH);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public static void main(String[] args) {
    java.awt.EventQueue.invokeLater(new Runnable() {
      public void run() {
        createAndShowUI();
      }
    });
  }
}

@SuppressWarnings("serial")
class QuadCurvePanel extends JPanel {
  private static final Color POINT_COLOR = Color.blue;
  private static final Color CONTROL_POINT_COLOR = Color.red;
  private static final Color POINT_COLOR_BORDER = POINT_COLOR.darker().darker();
  private static final Color CONTROL_POINT_COLOR_BORDER = Color.red.darker().darker();
  private static final int CIRCLE_RADIUS = 8;
  private static final float STROKE_WIDTH = 4;
  private static final Stroke CURVE_STROKE = new BasicStroke(STROKE_WIDTH);
  private static final Color CURVE_COLOR = new Color(0, 255, 255);
  private List<CenteredCircle> points = new ArrayList<CenteredCircle>();
  private List<QuadCurve2D> curves = new ArrayList<QuadCurve2D>();
  private boolean showPoints = true;
  
  public void addPoint(Point p) {
    points.add(new CenteredCircle(p, CIRCLE_RADIUS));
    calcCurves();
  }
  
  /**
   * checks if Point p is contained in points List
   * @param p
   * @return pointIndex, the index of the CenterCircle that contains the point
   * or -1 if not found
   */
  public int getPointIndex(Point p) {
    for (int i = points.size() - 1; i >= 0; i--) {
      if (points.get(i).contains(p)) {
        return i;
      }
    }
    // default
    return -1;
  }
  
  public Point getPointCenter(int pointIndex) {
    if (pointIndex < 0 || pointIndex >= points.size()) {
      throw new IllegalArgumentException("bad point index: " + pointIndex);
    }
    
    CenteredCircle cCircle = points.get(pointIndex);
    return cCircle.getCenter();
  }
  
  public void movePoint(int pointIndex, Point location) {
    if (pointIndex < 0 || pointIndex >= points.size()) {
      throw new IllegalArgumentException("bad point index");
    }
    
    CenteredCircle cCircle = points.get(pointIndex);
    cCircle.setCenter(location);
  }

  public void calcCurves() {
    int pointCount = points.size();
    if (pointCount > 2) {
      curves.clear();
      for (int i = 0; i < (pointCount - 1)/2; i++) {
        int j = 2*i + 1;
        Point p0 = points.get(j - 1).getCenter();
        Point p1 = points.get(j).getCenter();
        Point p2 = points.get(j + 1).getCenter();
        QuadCurve2D curve = new QuadCurve2D.Double(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y);
        curves.add(curve);
      }
    }
  }
  
  public void setShowPoints(boolean showPoints) {
    this.showPoints = showPoints;
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    int pointCount = points.size();
    Graphics2D g2 = (Graphics2D) g;
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    Stroke currentStroke = g2.getStroke();
    drawCurve(pointCount, g2);
    g2.setStroke(currentStroke);
    if (showPoints) {
      drawPoints(g2);
    }
  }

  private void drawCurve(int pointCount, Graphics2D g2) {
    g2.setColor(CURVE_COLOR);
    g2.setStroke(CURVE_STROKE);
    for (QuadCurve2D curve : curves) {
      g2.draw(curve);
    }
  }
  
  private void drawPoints(Graphics2D g2) {
    int pointCount = 0;
    for (CenteredCircle p : points) {
      boolean even = (pointCount % 2 == 0);
      Color c = (even) ? POINT_COLOR : CONTROL_POINT_COLOR;
      g2.setColor(c);
      g2.fill(p);
      c = (even) ? POINT_COLOR_BORDER : CONTROL_POINT_COLOR_BORDER;
      g2.setColor(c);
      g2.draw(p);
      pointCount++;
    }
  }
  
}

@SuppressWarnings("serial")
class CenteredCircle extends Ellipse2D.Double {
  private Point center;
  private int radius;
  
  public CenteredCircle(Point center, int radius) {
    super(center.x - radius, center.y - radius, 2*radius, 2*radius);
    this.center = center;
    this.radius = radius;
  }
  
  public Point getCenter() {
    return center;
  }
  
  public int getRadius() {
    return radius;
  }
  
  public void setCenter(Point center) {
    this.center = center;
    setFrame(center.x - radius, center.y - radius, 2*radius, 2*radius);
  }
}

class MyMouseListener extends MouseAdapter {
  private QuadCurvePanel qPanel;
  private Point selectedPointCenter = null;
  private Point delta = null;
  private int pointIndex = -1;
    
  public MyMouseListener(QuadCurvePanel panel) {
    qPanel = panel;
  }

  @Override
  public void mousePressed(MouseEvent e) {
    Point initialMousePoint = e.getPoint();
    pointIndex = qPanel.getPointIndex(initialMousePoint);
    if (pointIndex < 0) {
      initialMousePoint = null;
      return;
    }
    selectedPointCenter = qPanel.getPointCenter(pointIndex);
    delta = new Point(initialMousePoint.x - selectedPointCenter.x, initialMousePoint.y - selectedPointCenter.y);
  }
  
  @Override
  public void mouseReleased(MouseEvent e) {
    pointIndex = -1;
    selectedPointCenter = null;
    delta = null;
  }
  
  @Override
  public void mouseDragged(MouseEvent e) {
    if (delta == null) {
      return;
    }
    Point p = e.getPoint();
    int x = p.x - delta.x;
    int y = p.y - delta.y;
    qPanel.movePoint(pointIndex, new Point(x, y));
    qPanel.calcCurves();
    qPanel.repaint();
  }
}

Note that this is not finished. To work well, there must be constraints placed on the quadratic curve points, that each one must be on the line defined by the two surrounding control points. Otherwise you'll have sharp angles.

Thanks,If I have some question again,I can ask you.