Results 1 to 8 of 8
  1. #1
    luoluo is offline Member
    Join Date
    Apr 2010
    Posts
    12
    Rep Power
    0

    Default How to draw both line to smooth joining in png

    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.
    Attached Thumbnails Attached Thumbnails How to draw both line to smooth joining  in png-aa.jpg  

  2. #2
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,316
    Blog Entries
    1
    Rep Power
    26

    Default

    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.

  3. #3
    luoluo is offline Member
    Join Date
    Apr 2010
    Posts
    12
    Rep Power
    0

    Default

    Quote Originally Posted by Fubarable View Post
    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.

    Java Code:
    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.
    Attached Thumbnails Attached Thumbnails How to draw both line to smooth joining  in png-aa.jpg   How to draw both line to smooth joining  in png-expect.jpg  

  4. #4
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,316
    Blog Entries
    1
    Rep Power
    26

    Default

    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?

  5. #5
    luoluo is offline Member
    Join Date
    Apr 2010
    Posts
    12
    Rep Power
    0

    Default

    Quote Originally Posted by Fubarable View Post
    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 ?

  6. #6
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,316
    Blog Entries
    1
    Rep Power
    26

  7. #7
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,316
    Blog Entries
    1
    Rep Power
    26

    Default

    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:

    Java Code:
    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.
    Last edited by Fubarable; 04-17-2010 at 10:00 PM.

  8. #8
    luoluo is offline Member
    Join Date
    Apr 2010
    Posts
    12
    Rep Power
    0

    Default

    Quote Originally Posted by Fubarable View Post
    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:

    Java Code:
    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.

Similar Threads

  1. Draw line
    By janes in forum Java 2D
    Replies: 6
    Last Post: 03-25-2010, 10:48 PM
  2. Draw more than one line on run time
    By aiman in forum Java Applets
    Replies: 3
    Last Post: 12-10-2009, 02:44 AM
  3. How to draw a Smooth Curve using jfreechart
    By Manfizy in forum New To Java
    Replies: 1
    Last Post: 07-07-2009, 09:01 AM
  4. How to Draw line in Java
    By Java Tip in forum java.awt
    Replies: 0
    Last Post: 06-22-2008, 11:08 PM
  5. How to draw a thick line
    By johnt in forum Java 2D
    Replies: 1
    Last Post: 05-31-2007, 04:27 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •