貝塞爾曲線公式推導與Android實現

2021-10-06 11:39:18 字數 3636 閱讀 6212

3. android中的貝塞爾曲線

貝塞爾曲線也叫貝濟埃曲線,於2023年由法國工程師皮埃爾·貝濟埃發表。簡單的講,貝塞爾曲線就是繪製光滑的曲線。貝塞爾曲線是計算機圖形學中很重要的引數曲線,在一些比較成熟的點陣圖軟體中也有貝塞爾曲線,如photoshop工具中的鋼筆就是貝塞爾曲線。

貝塞爾曲線中有一些比較關鍵的量:

(1)資料點:通常指一條路徑的起始點和終止點

(2)控制點:控制點決定了一條路徑的彎曲軌跡,根據控制點的個數,貝塞爾曲線被分為一階貝塞爾曲線(0個控制點)、二階貝塞爾曲線(1個控制點)、三階貝塞爾曲線(2個控制點)等等。

(3)變數t(取值範圍0到1),貝塞爾曲線繪製過程中涉及多條線段,每條線段都會被中間的點分為兩部分,這兩部分有乙個比值,同一時間不同線段上的比值是相同的,即t。(這個t不是很好理解,可以先記住它是乙個比值,不用考慮它具體的值是多少,就會好理解一些,後面會講到)

一階貝塞爾曲線可以理解為pt在由起始點(p0)和終止點(p1)形成的直線上勻速移動。

推導公式:

令v為乙個固定的速度,令t(這裡的並不是上面提到的變數t,而是習慣上我們用t表示時間)為乙個固定的時間,pt為在p0到p1勻速運動的點,則:

p0到p1上某一點為固定的速度v乘以某個時間值。固定的速度已經得到,可以代入繼續推導:

此時等式右邊就形成了t(0,1) / t;即相當於某個時間值 / 固定時間值,即產生了上面提到的變數t,其取值範圍為[0,1]。繼續推導便可以得到一階貝塞爾曲線的公式。

取上面**中的某一時間如下圖:

如圖,pa為在p0到p1上勻速運動的點,pb為p1到p2上勻速運動的點。則p0p1形成一條一階貝塞爾曲線,p1p2形成一條一階貝塞爾曲線。pt為pa到pb上勻速運動的點,papb也形成了一條一階貝塞爾曲線。由於都是勻速運動,所以滿足p0pa/pap1=p1pb/pbp2=papt/ptpb,則一定存在之前提到的變數t。由pt點形成的連線就是起始點為p0,終止點為p2,控制點為p1的二階貝塞爾曲線。

下面推導二階貝塞爾曲線的公式:分解成三個一階貝塞爾曲線,再代入一階貝塞爾曲線的公式,很容易得到二階貝塞爾曲線的公式。

取上面**中的某一時間如下圖:

首先最外層有三條一階貝塞爾曲線:p0p1,p1p2,p2p3;第二層有兩條一階貝塞爾曲線:ab,bc;最後de也形成一條一階貝塞爾曲線。f點的軌跡就是以p0為起始點,p3為終止點,p1,p2為控制點的三階貝塞爾曲線。通過上面的公式也很容易推導出**貝塞爾曲線的公式。此處不再推導。

以此類推可以得到n階貝塞爾曲線的公式為:

android的path中提供了4個與貝塞爾曲線有關的函式:

//二階貝賽爾 

public

void

quadto

(float x1,

float y1,

float x2,

float y2)

public

void

rquadto

(float dx1,

float dy1,

float dx2,

float dy2)

//三階貝賽爾

public

void

cubicto

(float x1,

float y1,

float x2,

float y2,

float x3,

float y3)

public

void

rcubicto

(float x1,

float y1,

float x2,

float y2,

float x3,

float y3)

在這四個函式中,quadto、rquadto 是二階貝塞爾曲線,cubicto、rcubicto 是三階貝塞爾曲線。

下面介紹一下quadto(float x1, float y1, float x2, float y2) 。 引數中(x1,y1)是控制點座標,(x2,y2)是終點座標。整條線的起始點是通過path.moveto(x,y)來指定的,如果連續呼叫quadto(),前乙個quadto()的終點,就是下乙個quadto()函式的起點;如果初始沒有呼叫path.moveto(x,y)來指定起始點,則預設以控制項左上角(0,0)為起始點。

可以自定義乙個控制項重寫它的ondraw()方法繪製一段貝塞爾曲線觀察一下。

package com.example.contol1;

import android.content.context;

import android.graphics.canvas;

import android.graphics.color;

import android.graphics.paint;

import android.graphics.path;

import android.util.attributeset;

import android.view.view;

public

class

basisview

extends

view

public

basisview

(context context, attributeset attrs)

public

basisview

(context context, attributeset attrs,

int defstyle)

@override

protected

void

ondraw

(canvas canvas)

}}

上面的**中繪製了兩條y軸位置不同的曲線,第一條曲線用函式quadto繪製,第二條曲線用二階貝塞爾曲線的公式描點得到。

執行效果如下,可以看到兩條曲線除了y軸,其它都一樣。

貝塞爾曲線

1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線,貝茲曲線由 線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...

貝塞爾曲線

由於工作需要,最近在研究乙個類似qq訊息劃掉的效果 很多強迫症患者童鞋對這個簡直是愛不釋手,當然這個也包括我自己 貝塞爾曲線就是這樣的一條曲線,它是依據四個位置任意的點座標繪製出的一條 光滑曲線 在歷史上,研究貝塞爾曲線的人最初是按照已知曲線 引數方程 來確定四個點的思路設計出這種向量曲線繪製法。貝...

貝塞爾曲線

貝塞爾曲線在android中運用廣泛,可以用來繪製各類複雜曲線,因為貝塞爾曲線只需要指定控制點,就能繪製出特定的曲線。其次是做點和點的平滑過渡。為什麼可以做到如上兩點,看下面的講解 首先來說,貝塞爾曲線有階的概念,這個階可以理解為控制點,一階的控制點只有兩個。如上是一階的方程,其中t取值為0到1,可...