贝塞尔曲线理论及实现——Java篇

Home / Article MrLee 2016-12-7 5919

贝塞尔曲线 贝塞尔曲线(The Bézier Curves),是一种在计算机图形学中相当重要的参数曲线(2D,3D的称为曲面)。贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表,他运用贝塞尔曲线来为汽车的主体进行设计。

线性曲线 给定点P0、P1,线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出:

当参数t变化时,其过程如下:

线性贝塞尔曲线函数中的t会经过由P0至P1的B(t)所描述的曲线。例如当t=0.25时,B(t)即一条由点P0至P1路径的四分之一处。就像由0至1的连续t,B(t)描述一条由P0至P1的直线。 二次曲线 二次方贝塞尔曲线的路径由给定点P0、P1、P2的函数B(t)追踪:

为建构二次贝塞尔曲线,可以中介点Q0和Q1作为由0至1的t: * 由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。 * 由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。 * 由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。 二次曲线看起来就是这样的:

三次曲线 为建构高阶曲线,便需要相应更多的中介点。对于三次曲线,可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2,和由二次曲线描述的点R0、R1所建构。 P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。 曲线的参数形式为:

看起来就是这样的:

高阶曲线 更高阶的贝塞尔曲线,可以用以下公式表示: 用

表示由点P0、P1、…、Pn所决定的贝塞尔曲线。则有:

更多的关于贝塞尔曲线的内容,你可以去查阅各种数学书。
代码实现其实也非常简单,把公式套过来直接用起来就OK了。这里我以3次曲线为例


			for (double k = t; k <= 1 + t; k += t) {
				x = (1 - k) * (1 - k) * (1 - k) * ps[0].getX() + 3 * k * (1 - k) * (1 - k) * ps[1].getX()
						+ 3 * k * k * (1 - k) * ps[2].getX() + k * k * k * ps[3].getX();
				y = (1 - k) * (1 - k) * (1 - k) * ps[0].getY() + 3 * k * (1 - k) * (1 - k) * ps[1].getY()
						+ 3 * k * k * (1 - k) * ps[2].getY() + k * k * k * ps[3].getY();
				g2.drawOval((int) x, (int) y, 1, 1);
			}

以上是核心算法,下面是完整代码:
package com.opentcs.customization;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class BezierDemo extends JPanel implements MouseListener, MouseMotionListener {
	private static final long serialVersionUID = 1L;
	private Point2D[] ps;
	private Ellipse2D.Double[] ellipse;
	private static final double SIDELENGTH = 8;
	private int numPoints;
	private double t = 0.002;
	public BezierDemo() {
		numPoints = 0;
		ps = new Point2D[4];
		ellipse = new Ellipse2D.Double[4];
		this.addMouseListener(this);
		this.addMouseMotionListener(this);
	}
	@Override
	protected void paintComponent(Graphics g) {
		// TODO Auto-generated method stub
		super.paintComponent(g);
		Graphics2D g2 = (Graphics2D) g;
		g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
		g2.setColor(Color.BLUE);
		for (int i = 0; i < numPoints; i++) { // 绘制圆点 if (i > 0 && i < (numPoints - 1)) { g2.fill(ellipse[i]); } else { g2.draw(ellipse[i]); } // 绘制点之间的连接线 if (numPoints > 1 && i < (numPoints - 1))
				g2.drawLine((int) ps[i].getX(), (int) ps[i].getY(), (int) ps[i + 1].getX(), (int) ps[i + 1].getY());
		}
		if (numPoints == 4) {
			double x, y;
			g2.setColor(Color.RED);
			for (double k = t; k <= 1 + t; k += t) {
				x = (1 - k) * (1 - k) * (1 - k) * ps[0].getX() + 3 * k * (1 - k) * (1 - k) * ps[1].getX()
						+ 3 * k * k * (1 - k) * ps[2].getX() + k * k * k * ps[3].getX();
				y = (1 - k) * (1 - k) * (1 - k) * ps[0].getY() + 3 * k * (1 - k) * (1 - k) * ps[1].getY()
						+ 3 * k * k * (1 - k) * ps[2].getY() + k * k * k * ps[3].getY();
				g2.drawOval((int) x, (int) y, 1, 1);
			}
		}
	}
	@Override
	public Dimension getPreferredSize() {
		// TODO Auto-generated method stub
		return new Dimension(600, 600);
	}
	public static void main(String[] agrs) {
		JFrame f = new JFrame();
		BezierDemo t2 = new BezierDemo();
		f.add(t2);
		f.pack();
		f.setVisible(true);
		f.setLocationRelativeTo(null);
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	@Override
	public void mouseClicked(MouseEvent e) {
		// TODO Auto-generated method stub
		if (numPoints < 4) {
			double x = e.getX();
			double y = e.getY();
			ps[numPoints] = new Point2D.Double(x, y);
			Ellipse2D.Double current = new Ellipse2D.Double(x - SIDELENGTH / 2, y - SIDELENGTH / 2, SIDELENGTH,
					SIDELENGTH);
			ellipse[numPoints] = current;
			numPoints++;
			repaint();
		}
	}
	private int flag = -1;
	@Override
	public void mousePressed(MouseEvent e) {
		// TODO Auto-generated method stub
		if (!find((Point2D) e.getPoint()))
			flag = -1;
	}
	private boolean find(Point2D p) {
		for (int i = 0; i < numPoints; i++) {
			if (ellipse[i].contains(p)) {
				flag = i;
				return true;
			}
		}
		return false;
	}
	@Override
	public void mouseReleased(MouseEvent e) {
		// TODO Auto-generated method stub
	}
	@Override
	public void mouseEntered(MouseEvent e) {
		// TODO Auto-generated method stub
	}
	@Override
	public void mouseExited(MouseEvent e) {
		// TODO Auto-generated method stub
	}
	@Override
	public void mouseDragged(MouseEvent e) {
		// TODO Auto-generated method stub
		if (flag < 5 && flag >= 0) {
			double x = e.getX();
			double y = e.getY();
			ps[flag] = new Point2D.Double(x, y);
			Ellipse2D.Double current = new Ellipse2D.Double(x - SIDELENGTH / 2, y - SIDELENGTH / 2, SIDELENGTH,
					SIDELENGTH);
			ellipse[flag] = current;
			repaint();
		}
	}
	@Override
	public void mouseMoved(MouseEvent e) {
		// TODO Auto-generated method stub
	}
}

效果图:

bezier

本文链接:https://www.it72.com/11358.htm

推荐阅读
最新回复 (1)
  • ikinaaco 2016-12-26
    引用 2
    		if (numPoints == 3) {
    			double x, y;
    			g2.setColor(Color.RED);
    			for (double k = t; k <= 1 + t; k += t) {
    				double tt = 1 - k;
    				x = Math.pow(tt, 2) * ps[0].getX() + 2 * k * tt * ps[1].getX() + Math.pow(k, 2) * ps[2].getX();
    				y = Math.pow(tt, 2) * ps[0].getY() + 2 * k * tt * ps[1].getY() + Math.pow(k, 2) * ps[2].getY();
    				g2.drawOval((int) x, (int) y, 1, 1);
    			}
    		}
    
    二次函数稍微,用Math函数实现,看起来简洁一点。
返回