當前位置:首頁 » 網頁前端 » web怎麼畫貝塞爾曲線
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web怎麼畫貝塞爾曲線

發布時間: 2022-07-15 14:33:08

⑴ 貝塞爾曲線原理的gif圖怎麼畫

全選貝塞爾畫出來的線條,按Ctrl+G群組。

按ctrl+shift+Q將群組好的線條轉為對象。
點窗口--泊塢窗--造形,將其設置為修剪。
點擊線條,點擊修剪,再點擊背景灰圖(順序不要亂),圖片就被分割了,拉開線條可以看見圖片線條位置已經透明了。

⑵ 畫一條貝塞爾曲線!!

void CBSplineView::bezier(CPoint *pp, int n)
{//畫Bezier曲線
int x,y,i,j,k=100;
double t,t1,u,v;
double temp,temp1,temp2,bi;

CClientDC dc(this);
OnPrepareDC(&dc);

t=1.0/k;
dc.MoveTo(pp[0]);
for(j=1;j<k;j++)
{
t1=j*t;
u=t1;
v=1-u;
x=0;
y=0;
for(i=0;i<=n;i++)
{
temp=double(fac(n)/fac(i)/fac(n-i));
temp1=powi(u,i);
temp2=powi(v,n-i);
bi=temp*temp1*temp2;
x=x+bi*pp[i].x;
y=y+bi*pp[i].y;
}
dc.LineTo(x,y);
}
dc.LineTo(pp[n]);
}
long CBSplineView::fac(int m)
{//求m的階乘
int i;
long temp=1;
if(m==0)
return 1;
else
{
for(i=2;i<=m;i++)
temp*=i;
}
return temp;
}

double CBSplineView::powi(double v, int k)
{//求解v的k次冪
double temp=1.0;
if(k==0||v==0)
return 1;
else
{
for(int i=1;i<=k;i++)
temp*=v;

}
return temp;
}

曲線通過關鍵點控制,可以通過選取關鍵點並拖拽來改變曲線。

mouse點擊的HitTest:
通用方法:
用描畫的方法把Bezier畫在MemoryDC里, 得到測試點的像素值,以判斷是否在線上.
(通過剪裁區來減少描畫范圍)

應該是這樣吧!(*n_ n*)

⑶ 如何通過幾個點來繪制貝塞爾曲線

貝塞爾曲線繪制一般兩個點即可。
首先起筆的時候單擊空白畫面,然後在需要的位置再次單擊即可完成一條曲線。

⑷ 貝塞爾曲線怎麼畫 android

貝塞爾工具,按住Ctrl來點的時候,就會水平或垂直,如果先是畫了曲線,再把曲線轉換成直線就OK了 設計確實挺難的,不清楚閣下是設計哪方面的 如果是在CorelDRAW做,首先要學會操作,再看看裡面有哪些功能,熟練之後才容易設計,有些效果還是在PS里好做些。 一般客戶提出了有哪些要求就按要求來做,或者根據客戶所要設計的東西來選風格來配套。

⑸ javascript怎麼畫貝塞爾曲線

<script type="text/javascript">
window.onload = function(){
var c = document.getElementById("myCanvas");
var content = c.getContext("2d");

//繪制二次方貝塞爾曲線
content.strokeStyle ="#FF5D43";
content.beginPath();
content.moveTo(0,200);
content.quadraticCurveTo(75,50,300,200);
content.stroke();
content.globalCompositeOperation = "source-over"; //目標圖像上顯示源圖像

//繪制上面曲線的控制點和控制線,控制點坐標為兩直線的交點(75,50)
content.strokeStyle = "#f0f";
content.beginPath();
content.moveTo(75,50);
content.lineTo(0,200);
content.moveTo(75,50);
content.lineTo(300,200);
content.stroke();

};

⑹ 貝塞爾曲線工具怎麼用

CorelDRAW 貝磁曲線操作的快捷鍵,這一點可能很少有人提及:(CD9)

在節點上雙擊,可以合節點變成尖角
按C鍵可以改變下一線段的切線方向
按S鍵可以改變上下兩線段的切線方向
按ALT鍵且不松開左鍵可以移動節點
按CTRL這,切點方向可以根據預設空間的限制角度值任意放置。
要連續畫不封閉且不連接的曲線按ESC鍵
還可以一邊畫一邊對之前的節點進行任意移動

⑺ 貝塞爾曲線怎麼用canvas畫

canvas直線 body, h1{margin:0;} canvas{margin: 20px;} 二次貝塞爾曲線 function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //繪制起始點、控制點、終點 context.beginPath(); context.m...

⑻ 如何畫平滑的貝塞爾曲線

在圖形圖像編程時,我們常常需要根據一系列已知點坐標來確定一條光滑曲線。其中有些曲線需要嚴格地通過所有的已知點,而有些曲線卻不一定需要。在後者中,比較有代表性的一類曲線是貝塞爾曲線(Bézier Splines)。
網友們可能注意到,貝塞爾曲線廣泛地應用於很多圖形圖像軟體中,例如Flash、Illstrator、CoralDRAW和Photoshop等等。什麼是貝塞爾曲線呢?你先來看看這個:
X
哼~一條很普通的曲線,好像真的無法給我們帶來什麼特殊感覺哦~那把這條曲線和繪制它所根據的點重疊地放在一起再瞧瞧吧:

Hoho, 原來呀~貝塞爾曲線就是這樣的一條曲線,它是依據四個位置任意的點坐標繪制出的一條光滑曲線。我們不妨把這四對已知點坐標依次定義成(x0,y0)、 (x1,y1)、(x2,y2)和(x3,y3)。貝塞爾曲線必定通過首尾兩個點,稱為端點;中間兩個點雖然未必要通過,但卻起到牽制曲線形狀路徑的作 用,稱作控制點。
在歷史上,研究貝塞爾曲線的人最初是按照已知曲線參數方程來確定四個點的思路設計出這種矢量曲線繪製法。涕淌為了向大家 介紹貝塞爾曲線的公式,也故意把問題的已知和所求顛倒了一下位置:如果已知一條曲線的參數方程,系數都已知,並且兩個方程里都含有一個參數t,它的值介於 0、1之間,表現形式如下所示:
x(t) = ax * t ^ 3 + bx * t ^ 2 +cx * t + x0
y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0
由於這條曲線的起點(x0,y0)是已知的,我們可以用以下的公式來求得剩餘三個點的坐標:
x1 = x0 + cx / 3
x2 = x1 + ( cx + bx ) / 3
x3 = x0 + cx + bx + ax
y1 = y0 + cy / 3
y2 = y1 + ( cy + by ) / 3
y3 = y0 + cy + by + ay
你細細觀察一下就知道了,無論方程的已知和所求是什麼,總是有六個未知數,並且我們總能找到六個等式(記住(x0,y0)總是已知的),也就是說,上面的方法是完全可逆的,因此我們可以根據四個已知點坐標來反求曲線參數公式的系數。稍微一變換就得到了下面這組公式:
cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
所以說,對於坐標任意的四個已知點,你總能創建一條貝塞爾曲線嘿嘿。在GDI+的2D圖形函數庫里,已經封裝了貝塞爾曲線的繪制方法——就是Graphics類的DrawBezier()方法。DrawBezier()方法有很多個重載版本,很簡單,而且在MSDN里有著詳細的介紹,涕淌在此就不浪費口水了(包括DrawBeziers()也是一樣)。不得不感嘆的是,強大的GDI+允許一個不了解貝塞爾曲線數學背景的人也能輕而易舉地繪制一條漂亮的貝塞爾曲線,對提高開發效率而言,這當然是件好事!
貝塞爾曲線的有趣之處更在於它的「皮筋效應」~也就是說,隨著點有規律地移動,曲線將產生皮筋伸引一樣的變換,帶來視覺上的沖擊。來,瞅瞅這張圖吧:

Windows 默認的屏保里有一個「貝塞爾曲線」的程序,大家現在可以打開來欣賞一下。一組不斷扭伸的曲線令觀看的人感嘆它們的變幻莫測,其實個中道理相當簡單,程序里 只是一群分好了組的、按規律移動的點,機器根據點的移動、按照上面的公式實時地計算出當前的貝塞爾曲線,並在電腦屏幕上繪制出來,如此沒完沒了地進行 著……
上個世紀七十年代,法國數學家Pierre Bézier第一個研究了這種矢量繪制曲線的方法,並給出了詳細的計算公式,因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名~是為貝塞爾曲線。
在文章的開篇我提到了還有一類曲線必須嚴格地通過所有已知點,很典型而鮮明地同貝塞爾曲線區分開來了。這一類型的曲線涕淌將佔用其它網路日誌的篇幅來給大家介紹,請耐心等待!