丨如何用向量和坐標(biāo)系描述點線段

是如何建立一套描述幾何圖形信息的數(shù)學(xué)體系，以及如何用這系來解決我們的可視化static的元素）的元素盒子左上角為坐標(biāo)原點，x軸向右，ySVG（viewBox）svg左上角為坐標(biāo)原點，x，y，svg我們設(shè)置了viewBox屬性，那么svg根元素左上角為viewBox的前兩個值，右下角為viewBox的后兩個值。WebGLx右，y軸朝上，z軸朝外，x軸、y軸在畫布中范圍是-1到1。盡管這四個坐標(biāo)系在原點位置、坐標(biāo)軸方向、坐標(biāo)范圍上有所區(qū)別，但都是直角坐標(biāo)系，所以它們都滿足直角坐標(biāo)系的特性：不管原點和軸的方向怎么變，用同樣的方法繪制幾何圖形，它們的形狀和相對位置都不變?；?。其中，HTML、SVG和Canvas都提供了transform的API能夠幫助我們很方便地轉(zhuǎn)換坐標(biāo)系。而WebGL本身不提供tranform的API，但我們可以在shader里做矩陣運算來實現(xiàn)坐標(biāo)轉(zhuǎn)換，WebGL的問題我們在后續(xù)課程會有專門討論，今天我們先來說說其他三種。那接下來我們就以Canvas為例，來看看用transformAPI怎樣進行坐標(biāo)轉(zhuǎn)換。Canvas512*256Canvas高度是100，底邊200，兩座山的中心位置到中線的距離都是80，的圓心高度是首先，因為Canvas坐標(biāo)系默認(rèn)的原點是左上角，底邊的y坐標(biāo)是256，而山的高度是100，所以山頂點的y坐標(biāo)是256-100=156。而因為的高度是150，所以圓心的y坐標(biāo)是256-150=106。x5122256x25680和256+80，也就是176和336。又因為山是等腰三角形，它的底邊是200，所以兩座山底邊的x坐標(biāo)計算出來，分別是76、276、236、436（176-100=76、176+100=276、336-100=236、336+100=436）。 Rough.js的庫，繪制一個手繪風(fēng)格的圖像（Rough.js庫的API和Canvas差不多，繪制出來的圖形比較有趣）。繪制的代碼如下所示：代代123456789constrc=consthillOpts={roughness:2.8,strokeWidth:2,fill:'blue'};rc.path('M76256L176156L276256',hillOpts);rc.path('M236256L336156L436256',hillOpts);rc.circle(256,106,105,{stroke:'red',strokeWidth:4,fill:'rgba(255,255,0,fillStyle:到這里，我們通過簡單的計算就繪制出了這一組圖形。但你也能夠想到，如果每次繪制都要花費時間在坐標(biāo)換算上，這會非常不方便。所以，為了解決這個問題，我們可以采用坐標(biāo)系變換來代替坐標(biāo)換算。Canvas2Dtransform換：translate和scale。translateCanvas00scale(11yy>0x180成以畫布底邊中點為原點，x軸向右，y軸向上的坐標(biāo)系了。80100801001800)、(200)、(-20,0)、(180,0)，的中心點的坐標(biāo)就是(0,150)。那么更改后的代碼如下所示。代代123456789constrc=rough.canvas(constctx=rc.ctx;ctx.translate(256,256);ctx.scale(1,-consthillOpts={roughness:2.8,strokeWidth:2,fill:rc.path('M-1800L-80100L200',hillOpts);rc.path('M-200L80100L1800',hillOpts);rc.circle(0,150,{stroke:'red',strokeWidth:4,fill:'rgba(255,255,0,fillStyle:好了，現(xiàn)在我們就完成了坐標(biāo)變換。但是因為這個例子要繪制的圖形很少，所以還不太能體現(xiàn)使用坐標(biāo)系變換的好處。不過，你可以想一下，在可視化的許多應(yīng)用場景中，我們都要處理成百上千的圖形。如果這個時候，我們在原始坐標(biāo)下通過計算頂點來繪制圖形，計算量會非常大，很麻煩。那采用坐標(biāo)變換的方式就是一個很好的優(yōu)化思路，它能夠簡化計算量，這不僅讓代碼更容易理解，也可以節(jié)省PU運算的時間。理解直角坐標(biāo)系的坐標(biāo)變換之后，我們再來說說直角坐標(biāo)系里繪制圖形的方法。那不管我們用什么繪圖系統(tǒng)繪制圖形，一般的幾何圖形都是由點、線段和面構(gòu)成。其中，點和線段是基礎(chǔ)的圖元信息，因此，如何描述它們是繪圖的關(guān)鍵。x、y組，一個是xy假設(shè)，現(xiàn)在這個平面直角坐標(biāo)系上有一個向量v。向量v有兩個含義：一是可以表示該坐標(biāo)系下位于(x,y)處的一個點；二是可以表示從原點(0,0)到坐標(biāo)(x,y)的一根線段。首先，向量和標(biāo)量一樣可以進行數(shù)算。舉個例子，現(xiàn)在有兩個向量，v1和v2，如果讓它們相加，其結(jié)果相當(dāng)于將v1向量的終點（x1,y1），沿著v2向量的方向移動一段距離，這段距離等于v2向量的長度。這樣，我們就可以在平面上得到一個新的點（x1+x2,y1+y2），一條新的線段[(0,0),(x1+x2,y1+y2)]，以及一段折線：[(0,0),(x1,y1),(x1+x2,y1+y2)]。其次，一個向量包含有長度和方向信息x、y表示，如果用JavaScript來計算，就是：1v.length=function(){returnMath.hypot(this.x,x11在上面的代碼里，Math.atan2的取值范圍是-π到π，負(fù)數(shù)表示在x軸下方，正數(shù)表示在v.x=v.length*v.y=v.length*3這個推論意味著一個重要的事實：我們可以很簡單地構(gòu)造出一個繪圖向量。也就是說，如果我們希望以點(0,y0)為起點，沿著某個方向畫一段長度為lenth的線段，我們只需要構(gòu)造出如下的一個向量就可以了。這里的α是與x軸的夾角，v是一個單位向量，它的長度為1。然后我們把向量(x0,y0)與這個向量v1Canvas2D我們要做的變換是將坐標(biāo)原點從左上角移動到左下角，并且讓y軸翻轉(zhuǎn)為向上。ctx.translate(0,ctx.scale(1,-ctx.lineCap=然后，我們定義一個畫樹枝的函數(shù)drawBranchfunctiondrawBranch(context,v0,length,thickness,dir,bias)3contextCanvas2Dlengththickness因為v0是樹枝的起點坐標(biāo)，那根據(jù)前面向量計算的原理，我們創(chuàng)建一個單位向量(1,0)，x1dirlength。constv=newVector2D(1,constv1=（這里我們省略了數(shù)學(xué)推導(dǎo)過程，有的同學(xué)可以去看一 數(shù)學(xué)原理）。這個法我們后面還會經(jīng)常用到，你先記一下，后續(xù)我們講到仿射變換的時候，會有更詳細(xì)的解釋。代代123456789classVector2Drotate(rad)constc=Math.cos(rad),s=Math.sin(rad);const[x,y]=this.x=x*c+y*-s;this.y=x*s+y*c;return}}代代1234if(thickness>{constleft=dir+drawBranch(context,v1,length*0.9,thickness*0.8,left,bias*5567drawBranch(context,v1,length*0.9,thickness*0.8,right,bias*}代代123456if(thickness>2)constleft=Math.PI/4+0.5*(dir+0.2)+bias*(Math.random()-0.5drawBranch(context,v1,length*0.9,thickness*0.8,left,bias*0.9);constright=Math.PI/4+0.5*(dir-0.2)+bias*(Math.random()-0.drawBranch(context,v1,length*0.9,thickness*0.8,right,bias*0.9);}代代123456789if(thickness<5&&Math.random()<{context.save();context.strokeStyle='#c72c35';constth=Math.random()*6+3;context.lineWidth=th;context.lineTo(v1.x,v1.y-2);} 倉庫，你可以研究一下。這里面最關(guān)鍵的一步就是前面的向量操作，為了實現(xiàn)向量的rotate、scale、add等方法，我封裝了一個簡單的庫Vector2d.js， 實際上，在我們的可視化項目里，直接使用向量的加法、旋轉(zhuǎn)和乘法來構(gòu)造線段繪制圖形的情形并不多。這是因為，在一般情況下，數(shù)據(jù)在傳給前端的時候就已經(jīng)計算好了，我們只需要拿到數(shù)據(jù)點的信息，根據(jù)坐標(biāo)變換進行映射，然后直接用映射后的點來繪制圖形即可。既然這樣，為什么我們在這里又要強調(diào)向量操作的重要性呢？雖然我們很少直接使用向量構(gòu)造線段來完成繪圖，但是向量運算的意義并不僅僅只是用來算點的位置和構(gòu)造線段，這只是最初級的用法。我們要記住，可視化呈現(xiàn)依賴于計算機圖形學(xué)，而向量運算是整個計算機圖形學(xué)的數(shù)學(xué)基礎(chǔ)。而且，在向量運算中，除了加法表示移動點和繪制線段外，向量的點乘、叉乘運算也有特殊的意義。課后我會給你出一道有性的思考題，讓你能更深入地理解向量運算的現(xiàn)實意義，在下一節(jié)課里我會給你答案。Canvas一般來說，采用平面直角坐標(biāo)系繪圖的時候，對坐標(biāo)進行平移等線性變換，并不會改變坐標(biāo)系中圖形的基本形狀和相對位置，因此我們可以利用坐標(biāo)變換讓我們的繪圖變得更加容易。Canas坐標(biāo)變換經(jīng)常會用到translae和scale這兩個變換，它們的操作和原理都很簡單，我們根據(jù)實際需求來設(shè)置就好了。在平面直角坐標(biāo)系中，我們可以定義向量來繪圖。向量可以表示繪圖空間中的一個點，或者連接原點的一條線段。兩個向量相加，結(jié)果相當(dāng)于將被加向量的終點沿著加數(shù)向量的方向移動一段距離，移動的距離等于加數(shù)向量的長度。利用向量的這個特性，我們就能以某個點為起點，朝任意方向繪制線段，從而繪制各種較復(fù)雜的幾何圖形了。我們已經(jīng)知道如何用向量來定義一個線段，你知道如何判斷兩個線段的位置關(guān)系嗎？假設(shè)有兩個線段l1和l2，已知它們的起點和終點分別是[(x,y0),(x,y1)]、[(,y0x,y1)]，你能判斷它們的關(guān)系嗎（小提示：兩個線段之間的關(guān)系有平行、垂直或既不平行又不垂直）？已知線段[(x0,y0)、(x1,y1(x2,y2一個平面上放置了一個掃描器，方向延y軸方向（該坐標(biāo)系y軸向上），掃描器的視角是60度。假設(shè)它可以掃描到無限遠(yuǎn)的地方，那對于平面上給定的任意一個點(x,y)，我一個有趣的繪圖庫： 模塊文檔 歸科技所有 不得售賣。頁面已增加防盜追蹤，將依法其上一 04|GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形下一 06|可視化中你必須要掌握的向量乘法知言言2020-07-線段A1B1與線段A2B2的關(guān)系{如果|A1B1|或|A2B2|為0，說明線段成點，無法判斷關(guān)系如果A1B1·A2B2為0，說明夾角的余弦值為0，二者垂直…1 72020-07-2rotate(