上一章

戡.Aa：Processing-1-Processing概述?zhuanlan.zhihu.com

本章要點如下

位置和坐標

基礎圖形

繪圖順序

繪圖屬性、模式

位置和坐標

Processing的位置和坐標在概念上和數學上的位置和坐標基本一致，唯一的差別就是坐標軸的的方向有些不一樣，傳統數學上的坐標軸是這樣的

平面直角坐標系

我們常用的坐標系是第一象限，在Processing坐標軸是這樣的

Processing中的坐標系方向位置是第一象限以x軸為對稱軸的鏡像。并且不存在負軸，開始的時候會有一些不習慣，熟悉起來使用和我們常用的第一象限的坐標軸基本一樣，只是方向上有些差別而已。坐標的含義和使用方法也和原來一致，在第一章我們繪制線段時就已經舉例了

Processing坐標軸使用示例

基礎圖形

從小學到初中到高中的我們學習圖形的順序都是點、線、面、體這樣的順序，所以基礎圖形的繪制也以這種順序來講解

基本圖形

點

點的繪制函數是point(x , y)，x、y為點的橫縱坐標，在窗口的最中心畫了一個黑色的點，由于背景顏色問題可能看不出點的顏色，所以把背景顏色設置為白色

線

線的繪制函數為line(x1, y1, x2, y2)，x,、y1為第一個點的坐標，x2、y2為第二個點的坐標，一個基本的公理兩點確定一條直線，采用代碼清單1.1中的示例

面

一個基本公理不在同一直線上的三點確定一個平面，由于我們已經會畫線了，面是由線和點組成的，我們可以繪制多條相交的線來實現畫一個圖形，這個方法對于圖形各個點的坐標計算太麻煩了，好在Processing中提供了多種基礎圖行的繪制函數分別有三角形triangle()、矩形rect()、正方形square()、圓circle()、橢圓ellipse()等，還有一些高級圖形就不一一列舉了，具體的可以查看官方文檔

三角形的繪制函數為triangle(x1, y1, x2, y2, x3, y3)，參數含義和前面的一致，分別為三個點的坐標，繪制一個三角形如下

三角形

正方形的繪制函數為square(x, y, extent)，x、y為正方形左上角頂點的坐標，extent為正方形的邊長

正方形

矩形的繪制函數有三種分別為：

rect(a, b, c, d)

rect(a, b, c, d, r)

rect(a, b, c, d, tl, tr, br, bl)

第一種是最常見的a、b、c、d分別為左上角頂點x坐標、頂點y坐標、矩形的寬、矩形的高

第二種r代表直角的弧度半徑，就是把直角變成圓角

第三種tl、tr、bl、br分別代表上左、上右、下右、下左的各個頂點的的弧度半徑，也就是以(a,b)為起點的順時針方向四個點的坐標。

矩形

圓

畫圓的函數是

circle(x, y, extent)

，x,y為圓心坐標，extent為圓直徑

橢圓

畫橢圓的函數是ellipse(a,b,c,d)，a,b為圓心坐標，a,b為橢圓的寬和搞，由于圓也是一種特殊的橢圓(寬高相等的橢圓)，所以我們常用畫橢圓代替畫圓

橢圓

繪圖順序

繪圖順序在畫矩形那段代碼中已經演示過了，圖形的顯示順序就是代碼的執型順序，后面畫的圖形會覆蓋前面畫的圖形

后面畫的圓把前面畫的橢圓覆蓋掉了。

繪圖屬性

繪圖屬性分別從下面這些方面來講述

背景顏色

圖形顏色

邊框顏色、寬度

抗鋸齒

背景顏色

關于背景顏色的設置前面已經用到了就是background()函數，background(0)表示黑色，background(255)表示白色，如果沒有定義背景顏色默認是background(204)；為淺灰色0~255之間的都是各種灰色度。

圖形顏色

例如我們上面畫了各種圖形要給圖形上色，畫一個洋紅色的正方形

洋紅色的正方形

為了給圖形上色我用了fill(255， 0， 255)；fill里的參數數值使用的是RGB的顏色值，具體顏色怎么配可以查看RGB配色表。

然后我又繼續畫了一個橢圓，橢圓的顏色還是沿襲的上面fill()設置的顏色。

如果我想用回默認的顏色可以在畫新圖形之前使用noFill()函數，使用noFill()之后

原來我理解錯了noFill()的作用是使填充顏色變成透明，當然這也是我猜的，為了驗證我的猜想，我多換幾個背景顏色，如果noFill()后面繪制的圖形的填充顏色和背景顏色完全一致，說明noFIll()的作用就是使其后面繪制的圖形的填充顏色變成透明。

background(0)

background(100)

background(204)

background(255)

經過多番測試驗證，noFill()的作用確實是使其后面繪制的圖形的填充顏色變成透明。走了很多彎路，我們終于知道了noFill()的作用。但是我的腦海里還有一個疑問，這種驗證證明是不是完備的，存不存在其他可能，我們列舉的背景顏色會不會太少了。其實我們大可不必考慮這么多，回到最開始，是什么契機讓我知道要用noFill()，是我想改變填充的顏色，這些函數都是Processing內置的，我們都可以從參考文檔上看到它們的具體用法。打開參考參考文檔：

關于顏色的函數有這么多，我們想要了解哪個函數的用法都可以從上面查看noFill()的用法

方法描述是不能填充集合形狀

邊框顏色

由上面的圖形繪制我們可以看到所有繪制的圖形邊框的顏色都是黑色的，那么我們能不能畫一個其他顏色的邊框的圖形呢，當然也是可以的，在noFill的描述中也提到了分別是stroke()邊框顏色（默認為黑）、noStroke()(沒有邊框)，打開stroke()的文檔說明，我們可以在Related中看到其他相關的函數

這些都是與之相關的函數，具體用法就不一一贅述了。

繪圖模式

關于繪圖模式，我們先舉一個例子

代碼清單2.1

smooth(); noStroke(); ellipseMode(RADIUS); fill(126); ellipse(33, 33, 60, 60); fill(255); ellipseMode(CORNER); ellipse(33, 33, 60, 60); fill(0); ellipseMode(CORNERS); ellipse(33, 33, 60, 60);

效果圖如下

代碼清單2.1的效果圖

smooth()方法的作用是使繪圖的變變得平滑，在前面提到過。折斷代碼主要演示了不同ellipseMode()下的相同橢圓參數的圖形繪制的差異。這里可以在參考文檔中中搜索ellipseMode()的用法。

ellipseMode()里的參數總共有四種可選分別是CENTER、RADIUS、CORNER、CORNERS，注意全部都要大寫，默認是CENTER，表示ellispe(a,b,c,d)的前兩個參數a、b是橢圓的圓心坐標，c、d是橢圓外切矩形的寬和高

CENTER模式

RADIUS模式a、b也是圓心坐標，不過c、d表示橢圓的長半軸和短半軸的長

RADIUS模式

CORNER模式a、b為橢圓外切矩形的左上角的頂點坐標，c、d為外切矩形的寬和高，這個模式下的參數含義和rect()的參數含義基本一致。

CORNER模式

CORNERS模式表示a、b為外切矩形左上角的坐標，c、d表示外切矩形右下角的坐標

CORNERS

至此第2章的基本圖形繪制就講完了，下一章

戡.Aa：Processing-3-高級圖形繪制?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的图形颜色填充_Processing-2-基本图形绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。