教你用開源 JS 庫快速畫出 GitHub 章魚貓

時間 2019-11-06

標籤開源快速畫出 github 章魚欄目 JavaScript 简体版

原文原文鏈接

本文做者：HelloGitHub-kalifunjavascript

文中涉及的示例代碼，已同步更新到 HelloGitHub-Team 倉庫css

Zdog 項目地址：github.com/metafizzy/z…html

在上一篇文章咱們介紹了 Zdog 如何使用，接下來這篇文章我將帶領各位利用 Zdog 畫出一個 GitHub 章魚貓（和官方的仍是有些差異的）。java

1、分析

經過上面的動畫，咱們能夠對 GitHub 章魚貓進行分析，給咱們最直觀的就是 7 部分。頭部、臉、眼睛、鼻子、嘴巴、鬍鬚、耳朵。git

頭部：由一個規則的實體圓角矩形組成。
臉：有兩個規則的實體圓角矩形組成。第一層是製做陰影，第二層是臉。
眼睛：由三個橢圓形組成的眼睛，而後利用複製生成另外一隻眼睛。
鼻子：由一個橢圓形組成。
嘴巴：由一個橢圓形變成一個半圓形則是嘴巴啦。
鬍鬚：由兩條曲線進行復制完成。
耳朵：由帶圓形底座的方形圓柱組成。

經過上面分析咱們須要使用的 API：github

Zdog.Anchor：將多個形狀或項目合併成一個項目來進行渲染等。
Zdog.Group：控制渲染順序，繼承 Anchor，形狀將按照添加到組中的順序呈現。
Zdog.RoundedRect：圓角矩形，使用 cornerRadius 設置圓角半徑。
Zdog.Cone：帶圓形底座的方形圓柱。
Zdog.Shape：自定義形狀的形狀類。Shape 的形狀由其路徑定義。
Zdog.TAU：以弧度爲單位的完整旋轉。Math.PI * 2 == TAU，但比 PI 更加友好，由於 TAU 直接映射到完整旋轉。
copy：針對相同的形狀進行復制。
copyGraph：複製帶有子項的項目。

2、步驟

Tips： 解釋講解均在代碼中以註釋方式展現，請你們注意閱讀。編程

2.1 建立畫布

是時候開始表演了，首先須要建立畫布。代碼以下：canvas

<!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 章魚貓的頭。代碼以下：dom

// 能夠添加到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 }
    ]
});
複製代碼

效果以下：svg

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,
    },
});
複製代碼