すぐにタコ猫のGitHubオープンソースJSライブラリを描画するためにあなたを教えます

著者：HelloGitHub- kalifun

前回の記事では、この記事で私はGitHubのタコZdog猫（公式とは全く異なる）を描画に使用するあなたを導くでしょうかZdog使用について説明します。

Zdogプロジェクトアドレスします。https：//github.com/metafizzy/zdog

まず、分析

私たちは、上記のアニメーションを通じてGitHubのタコの猫を分析することができ、最も直感的には7つの部分である私たちに与えます。頭、顔、目、鼻、口、ひげ、耳。

ヘッド：丸みを帯びた長方形からなるエンティティによってルール。
顔：長方形を丸め二つの規則からなる実体があります。第一層は、影の生産、第2の層の面です。
目：3つの楕円の目、そして他の目には、コピーを使用して生成されました。
鼻：1つの楕円で。
口：それは半円形である楕円形の口の中に一つ。
ビアード：二つの曲線によって完全な複製。
耳：円形の塩基組成を有する角柱。

上記の分析を通して、私たちは、APIを使用する必要があります。

Zdog.Anchor：レンダリングに結合される成形品または複数の項目。
Zdog.Groupは：制御シーケンスをレンダリングする、継承のレコードは、順番に追加したグループの形状に応じて表示されます。
Zdog.RoundedRect：丸みを帯びた長方形、cornerRadiusを使用して半径を設定します。
Zdog.Cone：円形のベースを有する角筒。
Zdog.Shape：カスタムシェイプクラス。その形状によって定義されたパスを形作ります。
Zdog.TAU：ラジアン単位でフル回転。Math.PI * 2 ==のTAUが、TAUが直接フル回転にマッピングされているため、PIよりも優しいです。
コピー：同じ形状のためにコピーします。
copyGraph：子供たちと一緒にプロジェクトをコピーします。

第二に、ステップ

ヒント：あなたのコード内のコメントを証明するためにすべての方法を説明するための説明、よくお読みください。

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です！

この記事を読んだ後、「小さな魂の芸術家は、」そこから生まれたのですか？✌️

「私の目を持つスピンジャンプを閉じました。」

第四に、参考文献

「オープンソース・プロジェクトのシリーズの説明」 -オープンソース・プロジェクトは、もはや恐れているの人々が興味を持ってできるように、スポンサーのオープンソース・プロジェクトだけではもはやありませんしましょう。私たちの記事に従ってください、あなたはプログラミングの楽しさ、オープンソースプロジェクトの使用を発見し、そう単純で関与することが判明します。ウェルカムメッセージは〜より多くの人々は、オープンソース、オープンソースの貢献と恋に落ちるように、私たちに参加し、私達に連絡します