教你用開源 JS 庫快速畫出 GitHub 章魚貓
阿新 • • 發佈：2019-10-01
本文作者：HelloGitHub-kalifun
在上一篇文章我們介紹了 Zdog 如何使用，接下來這篇文章我將帶領各位利用 Zdog 畫出一個 GitHub 章魚貓（和官方的還是有些差別的）。
Zdog 專案地址：https://github.com/metafizzy/zdog
一、分析
通過上面的動畫，我們可以對 GitHub 章魚貓進行分析，給我們最直觀的就是 7 部分。頭部、臉、眼睛、鼻子、嘴巴、鬍鬚、耳朵。
- 頭部：由一個規則的實體圓角矩形組成。
- 臉：有兩個規則的實體圓角矩形組成。第一層是製作陰影，第二層是臉。
- 眼睛：由三個橢圓形組成的眼睛，然後利用複製生成另一隻眼睛。
- 鼻子：由一個橢圓形組成。
- 嘴巴：由一個橢圓形變成一個半圓形則是嘴巴啦。
- 鬍鬚：由兩條曲線進行復制完成。
- 耳朵：由帶圓形底座的方形圓柱組成。
通過上面分析我們需要使用的 API：
- Zdog.Anchor：將多個形狀或專案合併成一個專案來進行渲染等。
- Zdog.Group：控制渲染順序，繼承 Anchor，形狀將按照新增到組中的順序呈現。
- Zdog.RoundedRect：圓角矩形，使用 cornerRadius 設定圓角半徑。
- Zdog.Cone：帶圓形底座的方形圓柱。
- Zdog.Shape：自定義形狀的形狀類。Shape 的形狀由其路徑定義。
- Zdog.TAU：以弧度為單位的完整旋轉。Math.PI * 2 == TAU，但比 PI 更加友好，因為 TAU 直接對映到完整旋轉。
- copy：針對相同的形狀進行復制。
- copyGraph：複製帶有子項的專案。
二、步驟
Tips： 解釋講解均在程式碼中以註釋方式展示，請大家注意閱讀。
2.1 建立畫布
是時候開始表演了，首先需要建立畫布。程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GitHub 章魚貓</title> <style> .zdog-canvas{ display: block; margin: 0px auto; } </style> </head> <body> <!--Zdog在<canvas>或<svg>元素上呈現。width和height屬性以設定大小。--> <canvas class="zdog-canvas" width="1200" height="800" style="width: 600px;height: 400px"></canvas> <!--引入js檔案--> <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script> <script> // 1.將選定畫布，進行創作 let illo = new Zdog.Illustration({ element: ".zdog-canvas", dragRotate: true, }); //下面是準備的配色 // 瞳孔的顏色 const colorFeatures = "#AB5C53"; // 頭的顏色 const black = "#211F1F"; // 陰影的顏色 const colorShadow = "#C39B88"; // 面板的顏色 const colorSkin = "#E5C0AA"; // 眼睛最外圈的顏色 const white = "#FFF"; //---------------------------- //下面的所有程式碼將都在這裡書寫 //---------------------------- illo.updateRenderGraph(); </script> </body> </html>
2.2 畫頭
按照我們之前分解的，先畫 GitHub 章魚貓的頭。程式碼如下：
// 可以新增到Zdog場景的所有專案都充當錨點。
const head = new Zdog.Anchor({
addTo: illo,
translate: {
// 向y軸移動
y: 15
},
});
// 具有分離渲染順序的專案。繼承Anchor。
const domepiece = new Zdog.Group({
addTo: head
});
// 真正進行畫頭，是一個實體矩形
const noggin = new Zdog.RoundedRect({
addTo: domepiece,
// 設定高度和寬度
width: 160,
height: 66,
// 渲染形狀線並設定線寬。預設筆劃：1。
stroke: 230,
// 使用cornerRadius設定圓角半徑
cornerRadius: 20,
// 設定顏色
color: black,
path: [
{ x: -4.5 },
{ x: 5.5 }
]
});效果如下：
2.3 畫臉
面部的實現程式碼如下：
// 我們需要畫下一組圖形，那就是臉。臉被定義為一組
const face = new Zdog.Group({
addTo: head,
// 將陰影部分進行位置的調節
translate: {
// x軸我們不動，保持正中
x: 0,
// y軸進行往下移動
y: 36,
// 為了3D更加真實，我們需要將臉部往外突出一點。這樣才更加逼真
z: 20
},
});
// 下面我們開始進行陰影的繪畫，它是由一個實體矩形組成
const skinShadow = new Zdog.RoundedRect({
addTo: face,
// 設定高度和寬度
width: 100,
height: 0,
// 渲染形狀線並設定線寬。預設筆劃：1。
stroke: 180,
//使用cornerRadius設定圓角半徑
cornerRadius: 40,
// 設定顏色
color: colorShadow,
});
// 下面開始畫臉的部分
const skin = new Zdog.RoundedRect({
addTo: face,
// 高寬和上面需要一直，為了產生陰影的效果，我們只需要將我們的畫筆的寬度小一點並就可以看到想要的效果。
width: 100,
height: 0,
// 比之前的陰影部分減小一點
stroke: 170,
// 圓角半徑和陰影部分是一致的
cornerRadius: 40,
// 設定顏色
color: colorSkin,
// 為了和陰影的下半部分重疊，需要將其往下移動
translate: {
y: 4.5
}
});效果如下：
2.4 畫眼睛
眼睛部分因為是相同的，所以我們會用到 copy 方法，程式碼如下:
// 眼睛最外部分為純白色
const iris = new Zdog.Ellipse({
addTo: eye,
// 渲染內部形狀區域
fill: true,
width: 40,
height: 56,
// 圓角半徑
stroke: 2,
// 放大或縮小專案幾何體
scale: 1.5,
color: white,
});
// 瞳孔部分
const pupil = new Zdog.Ellipse({
addTo: eye,
// 設定長寬
width: 37,
height: 56,
stroke: 0,
fill: true,
color: colorFeatures,
// 由於它的位置需要更靠近右邊
translate: {
x: 3,
y: 5,
z: 0
},
});
// 然後是瞳孔裡的小白點
const anotherpupil = new Zdog.Ellipse({
addTo: pupil,
// 設定寬度
width: 10,
height: 10,
color: white,
fill: true,
stroke: 0,
// 設定位置
translate: {
x: -7,
y: -12,
z: 3
}
});
// 這裡將剛繪畫好的左眼複製出來
const eyeright = eyeleft.copyGraph({
// 並調整好眼睛的位置
translate: {
x: 76,
y: 6,
z: 80
},
rotate: {
y: TAU / -14
}
});效果如下：
2.5 畫鼻子
程式碼如下：
// 畫鼻子部分，相對很簡單，因為就是一個圓形
const nose = new Zdog.Ellipse({
addTo: face,
// 設定寬度
width: 6,
height: 6,
fill: true,
stroke: 10,
// 設定顏色
color: colorFeatures,
// 調整位置
translate: {
x: 0,
y: 32,
z: 74
},
});效果如下：
2.6 畫嘴巴
程式碼如下：
//接下來是畫嘴巴部分
const mouth = new Zdog.Ellipse({
addTo: face,
// 設定圓的直徑
diameter: 30,
// 將其設定為1/4的圓，我們取值為2，所以獲得半圓
quarters: 2,
// 設定圓角半徑
stroke: 4,
// 將半圓進行縮放，使其更加逼真
scale: {
x: 0.8,
y: 1
},
color: colorFeatures,
// 將半圓進行旋轉，讓開口向上
rotate: {
x: TAU / 2.3,
z: TAU / -4
},
// 然後再對其調整合理的位置
translate: {
x: 0,
y: 46,
z: 74
},
});效果如下：
2.7 畫耳朵
// 畫耳朵
// 帶圓形底座的方形圓柱
// 繪畫左耳
const ear = new Zdog.Cone({
addTo: head,
// 設定圓的直徑
diameter: 120,
// 設定長度
length: 90,
stroke: false,
color: black,
// 調整位置
translate: {
x: -120,
y: -105
},
// 圓角朝向為正z軸，因此需要對其旋轉
rotate: {
x: TAU/4,
y: TAU/12
},
});
// 繪畫右耳，將左耳進行復制，移動，旋轉
ear.copy({
translate: {
x: 120,
y: -105
},
rotate: {
x: TAU/4,
y: TAU/-12
},
});
2.8 最後一步畫鬍鬚
終於到了最後一步，它即將生靈活現起來。程式碼如下：
// 開始進行畫鬍鬚
// shape自定義形狀
const whisker = new Zdog.Shape({
addTo: whiskers,
path: [
// 起始點
{ x: 100, y: 0 },
// 曲線的橢圓適合由前一個拐角和終點形成的矩形。
{ arc: [
// 拐角
{ x: 30, y: -10 }, // corner
// 終點
{ x: -30, y: 0 }, // end point
]}
],
closed: false,
// 鬍鬚的寬度
stroke: 4,
color: black,
});
// 左側的另一條鬍鬚，只需要按照上面的設定進行下移即可
whisker.copy ({
path: [
{ x: 100, y: 0 },
{ arc: [
{ x: 30, y: -5 }, // corner
{ x: -30, y: 10 }, // end point
]}
],
// 將鬍鬚往下移
translate: {
y: 20
},
});
// 將左側的鬍鬚複製進行移動並旋轉
const whiskersright = whiskersleft.copyGraph({
translate: {
x: 290,
y: 20
},
rotate: {
y: TAU/2,
},
});完成效果如下：
三、總結
文中的程式碼已開源到 GitHub 地址：https://github.com/HelloGitHub-Team/Article/blob/master/contents/JavaScript/Zdog_advance/index.html
當我們對程式碼進行分析時，其實感覺並沒有想象中的複雜，我們需要精心去進行分析。把需要的形狀先構思好，然後再參考 zdog 文件，有沒有快捷的方式獲得你想要的形狀。有了這個庫是不是對自己的畫畫能力又有了新的認識呢？這裡是 HelloGitHub 擴充你的武器庫從這裡開始！
閱讀完本文後 “靈魂小畫師” 是否從此誕生了呢？✌️
“旋轉跳躍我閉著眼睛”
四、參考資料
Zdog 官方文件
效果來源
『講解開源專案系列』——讓對開源專案感興趣的人不再畏懼、讓開源專案的發起者不再孤單。跟著我們的文章，你會發現程式設計的樂趣、使用和發現參與開源專案如此簡單。歡迎留言聯絡我們、加入我們，讓更多人愛上開源、貢獻開源