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

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