Author: HelloGitHub- kalifun
In the last article we describe how Zdog use, then this article I will lead you to use GitHub octopus Zdog draw a cat (and quite different from the official).
Zdog Project address: https: //github.com/metafizzy/zdog
First, analysis
We can analyze GitHub octopus cat through the animation above, gives us the most intuitive is seven parts. Head, face, eyes, nose, mouth, whiskers, ears.
- Head: rule by an entity composed of a rounded rectangle.
- Face: there is an entity composed of two rules rounded rectangle. The first layer is the production of shadow, a face of the second layer.
- Eyes: three ovals eye, then the other eye generated using a copy.
- Nose: by one ovals.
- Mouth: by one into an oval mouth it is semicircular.
- Beard: complete replication by two curves.
- Ears: a square cylinder with a circular base composition.
Through the above analysis we need to use the API:
- Zdog.Anchor: a plurality of shaped item or items to be combined into a rendering.
- Zdog.Group: rendering control sequence, inheritance Records, will be presented in accordance with the shape of the group added to the order.
- Zdog.RoundedRect: rounded rectangle, using cornerRadius set radius.
- Zdog.Cone: square cylindrical with a circular base.
- Zdog.Shape: Custom a shape class. Shape path defined by its shape.
- Zdog.TAU: a full rotation in radians units. Math.PI * 2 == TAU, but more friendly than PI, because TAU directly mapped to a full rotation.
- copy: copy for the same shape.
- copyGraph: Copy the project with the children.
Second, step
Tips: explanation to explain all the way to demonstrate a comment in your code, please read carefully.
2.1 Creating the Canvas
It's time to start this show, you first need to create a canvas. code show as below:
<!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 painted head
According to our previous decomposition, first draw GitHub octopus cat's head. code show as below:
// 可以添加到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 }
]
});Results are as follows:
2.3 Face painting
Face codes are as follows:
// 我们需要画下一组图形，那就是脸。脸被定义为一组
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
}
});Results are as follows:
2.4 draw eyes
In part because the eyes are the same, so we will use copythe method, as follows:
// 眼睛最外部分为纯白色
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
}
});Results are as follows:
2.5 Ehanako
code show as below:
// 画鼻子部分，相对很简单，因为就是一个圆形
const nose = new Zdog.Ellipse({
addTo: face,
// 设置宽度
width: 6,
height: 6,
fill: true,
stroke: 10,
// 设置颜色
color: colorFeatures,
// 调整位置
translate: {
x: 0,
y: 32,
z: 74
},
});Results are as follows:
2.6 draw mouth
code show as below:
//接下来是画嘴巴部分
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
},
});Results are as follows:
2.7 drawing ears
// 画耳朵
// 带圆形底座的方形圆柱
// 绘画左耳
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 The final step painting beard
Finally to the final step, it is about living up flexible now. code show as below:
// 开始进行画胡须
// 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,
},
});Complete results are as follows:
Third, the summary
Text of the code has been open to GitHub address: https: //github.com/HelloGitHub-Team/Article/blob/master/contents/JavaScript/Zdog_advance/index.html
When we analyze the code, in fact, feel not imagine the complexity, we need to be analyzed carefully. The need to shape a good idea, then zdog reference document, there is no quick way to get the shape you want. With this library is not on their ability to draw has a new understanding of it? Here is HelloGitHub expand your arsenal from here!
After reading this article, "small soul artist" is born from it? ✌️
"Spin jump with my eyes closed."
Fourth, references
"Explain open source projects Series" - to let people interested in open source projects are no longer afraid, let sponsors open source projects are no longer alone. Follow our articles, you'll discover the fun of programming, the use of open source projects and found to be involved so simple. Welcome messages to contact us, join us, so that more people fall in love with open source, open source contribution ~