Skip to content

Commit f17cfc9

Browse files
Myriad-DreaminMyriad-Dreamin
committed
feat: 重新安排排版Ⅱ
1 parent 269680c commit f17cfc9

3 files changed

Lines changed: 109 additions & 110 deletions

File tree

‎src/book.typ‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@
2424
- #chapter("tutorial/scripting-composite.typ")[复合类型]
2525
= 教程 — 排版Ⅱ
2626
- #chapter("tutorial/scripting-main.typ")[编译流程]
27-
- #chapter("tutorial/scripting-layout.typ")[长度与布局]
28-
- #chapter("tutorial/scripting-content.typ")[文档树]
29-
- #chapter("tutorial/scripting-color.typ")[颜色类型]
30-
- #chapter("tutorial/scripting-style.typ")[选择器与样式]
27+
- #chapter("tutorial/scripting-layout.typ")[布局模型]
28+
- #chapter("tutorial/scripting-content.typ")[文档模型]
29+
- #chapter("tutorial/scripting-style.typ")[样式模型]
3130
= 教程 — 脚本Ⅱ
3231
- #chapter("tutorial/doc-modulize.typ")[模块化（多文件）]
3332
- #chapter("tutorial/scripting-block-and-expression.typ")[表达式]

‎src/tutorial/scripting-color.typ‎

Lines changed: 0 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,3 @@
11
#import "mod.typ": *
22

33
#show: book.page.with(title: "颜色类型")
4-
5-
== 颜色类型
6-
7-
Typst只有一种颜色类型，其由两部分组成。
8-
9-
#figure([
10-
#block(
11-
width: 200pt,
12-
align(left)[
13-
```typ
14-
#color.rgb(87, 127, 230)
15-
--------- ------------
16-
| +-- 色坐标
17-
+-- 色彩空间对应的构造函数
18-
```
19-
],
20-
)
21-
#text(todo-color)[这里有个图注解]
22-
])
23-
24-
25-
「色彩空间」（color space）是人们主观确定的色彩模型。Typst为不同的色彩空间提供了专门的构造函数。
26-
27-
「色坐标」（chromaticity coordinate）是客观颜色在「色彩空间」中的坐标。给定一个色彩空间，如果某种颜色*在空间内*，那么颜色能分解到不同坐标分量上，并确定每个坐标分量上的数值。反之，选择一个构造函数，并提供坐标分量上的数值，就能构造出这个颜色。
28-
29-
#todo-box[
30-
chromaticity coordinate这个名词是对的吗，每种色彩空间中的坐标都是这个名字吗？
31-
]
32-
33-
习惯上，颜色的坐标分量又称为颜色的「通道」。从物理角度，Typst使用`f32`存储颜色每通道的值，这允许你对颜色进行较复杂的计算，且计算结果仍然保证较好的误差。
34-
35-
== 色彩空间
36-
37-
RGB是我们使用最多的色彩空间，对应Typst的`color.rgb`函数或`rgb`函数：
38-
39-
#code(```typ
40-
#box(square(fill: color.rgb("#b1f2eb")))
41-
#box(square(fill: rgb(87, 127, 230)))
42-
#box(square(fill: rgb(25%, 13%, 65%)))
43-
```)
44-
45-
除此之外，还支持HSL（`hsl`）、CMYK（`cmyk`）、Luma（`luma`）、Oklab（`oklab`）、Oklch（`oklch`）、Linear RGB（`color.linear-rgb`）、HSV（`color.hsv`）等色彩空间。感兴趣的可以自行搜索并使用。
46-
47-
#pro-tip[
48-
尽管你可以随意使用这些构造器，但是可能会导致PDF阅读器或浏览器的兼容性问题。它们可能不支持某些色彩空间（或色彩模式）。
49-
]
50-
51-
== 预定义颜色
52-
53-
除此之外，你还可以使用一些预定义的颜色，详见#link("https://typst.app/docs/reference/visualize/color/#predefined-colors")[《Typst Docs: Predefined colors》。]
54-
55-
#code(```typ
56-
#box(square(fill: red, size: 7pt))
57-
#box(square(fill: blue, size: 7pt))
58-
```)
59-
60-
== 颜色计算
61-
62-
Typst较LaTeX的一个有趣的特色是内置了很多方法对颜色进行计算。这允许你基于某个颜色主题（Theme）配置更丰富的颜色方案。这里给出几个常用的函数：
63-
64-
- `lighten/darken`：增减颜色的亮度，参数为绝对的百分比。
65-
- `saturate/desaturate`：增减颜色的饱和度，参数为绝对的百分比。
66-
- `mix`：参数为两个待混合的颜色。
67-
68-
#code(```typ
69-
#show square: box
70-
#set square(size: 15pt)
71-
#square(fill: red.lighten(20%))
72-
#square(fill: red.darken(20%)) \
73-
#square(fill: red.saturate(20%))
74-
#square(fill: red.desaturate(20%)) \
75-
#square(fill: blue.mix(green))
76-
```)
77-
78-
还有一些其他不太常见的颜色计算，详见#link("https://typst.app/docs/reference/visualize/color/#definitions-lighten")[《Typst Docs: Color operations》]。
79-
80-
== 渐变色
81-
82-
你可以以某种方式对Typst中的元素进行渐变填充。这有时候对科学作图很有帮助。
83-
84-
有三种渐变色的构造函数，可以分别构造出线性渐变（Linear Gradient），径向渐变（Radial Gradient），锥形渐变（Conic Gradient）。他们都接受一组颜色，对元素进行颜色填充。
85-
86-
#code(```typ
87-
#let sqr(f) = square(fill: f(
88-
..color.map.rainbow))
89-
#stack(
90-
dir: ltr, spacing: 10pt,
91-
sqr(gradient.linear),
92-
sqr(gradient.radial),
93-
sqr(gradient.conic ))
94-
```)
95-
96-
从字面意思理解`color.map.rainbow`是Typst为你预定义的一个颜色数组，按顺序给出了彩虹渐变的颜色。还有一些其他预定义的颜色数组，详见#link("https://typst.app/docs/reference/visualize/color/#predefined-color-maps")[《Typst Docs: Predefined color maps》]。
97-
98-
== 填充模式
99-
100-
Typst不仅支持颜色填充，还支持按照固定的模式将其他图形对元素进行填充。例如下面的pat定义了一个长为`61.8pt`，宽为`50pt`的图形。将其填充进一个矩形中，填充图形从左至右，从上至下布满矩形内容中。
101-
102-
#code(```typ
103-
#let pat = pattern(size: (61.8pt, 50pt))[
104-
#place(line(start: (0%, 0%), end: (100%, 100%)))
105-
#place(line(start: (0%, 100%), end: (100%, 0%)))
106-
]
107-
108-
#rect(fill: pat, width: 100%, height: 60pt, stroke: 1pt)
109-
```)

‎src/tutorial/scripting-shape.typ‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,112 @@
22

33
#show: book.page.with(title: "图形排版")
44

5+
== 颜色类型
6+
7+
Typst只有一种颜色类型，其由两部分组成。
8+
9+
#figure([
10+
#block(
11+
width: 200pt,
12+
align(left)[
13+
```typ
14+
#color.rgb(87, 127, 230)
15+
--------- ------------
16+
| +-- 色坐标
17+
+-- 色彩空间对应的构造函数
18+
```
19+
],
20+
)
21+
#text(todo-color)[这里有个图注解]
22+
])
23+
24+
25+
「色彩空间」（color space）是人们主观确定的色彩模型。Typst为不同的色彩空间提供了专门的构造函数。
26+
27+
「色坐标」（chromaticity coordinate）是客观颜色在「色彩空间」中的坐标。给定一个色彩空间，如果某种颜色*在空间内*，那么颜色能分解到不同坐标分量上，并确定每个坐标分量上的数值。反之，选择一个构造函数，并提供坐标分量上的数值，就能构造出这个颜色。
28+
29+
#todo-box[
30+
chromaticity coordinate这个名词是对的吗，每种色彩空间中的坐标都是这个名字吗？
31+
]
32+
33+
习惯上，颜色的坐标分量又称为颜色的「通道」。从物理角度，Typst使用`f32`存储颜色每通道的值，这允许你对颜色进行较复杂的计算，且计算结果仍然保证较好的误差。
34+
35+
== 色彩空间
36+
37+
RGB是我们使用最多的色彩空间，对应Typst的`color.rgb`函数或`rgb`函数：
38+
39+
#code(```typ
40+
#box(square(fill: color.rgb("#b1f2eb")))
41+
#box(square(fill: rgb(87, 127, 230)))
42+
#box(square(fill: rgb(25%, 13%, 65%)))
43+
```)
44+
45+
除此之外，还支持HSL（`hsl`）、CMYK（`cmyk`）、Luma（`luma`）、Oklab（`oklab`）、Oklch（`oklch`）、Linear RGB（`color.linear-rgb`）、HSV（`color.hsv`）等色彩空间。感兴趣的可以自行搜索并使用。
46+
47+
#pro-tip[
48+
尽管你可以随意使用这些构造器，但是可能会导致PDF阅读器或浏览器的兼容性问题。它们可能不支持某些色彩空间（或色彩模式）。
49+
]
50+
51+
== 预定义颜色
52+
53+
除此之外，你还可以使用一些预定义的颜色，详见#link("https://typst.app/docs/reference/visualize/color/#predefined-colors")[《Typst Docs: Predefined colors》。]
54+
55+
#code(```typ
56+
#box(square(fill: red, size: 7pt))
57+
#box(square(fill: blue, size: 7pt))
58+
```)
59+
60+
== 颜色计算
61+
62+
Typst较LaTeX的一个有趣的特色是内置了很多方法对颜色进行计算。这允许你基于某个颜色主题（Theme）配置更丰富的颜色方案。这里给出几个常用的函数：
63+
64+
- `lighten/darken`：增减颜色的亮度，参数为绝对的百分比。
65+
- `saturate/desaturate`：增减颜色的饱和度，参数为绝对的百分比。
66+
- `mix`：参数为两个待混合的颜色。
67+
68+
#code(```typ
69+
#show square: box
70+
#set square(size: 15pt)
71+
#square(fill: red.lighten(20%))
72+
#square(fill: red.darken(20%)) \
73+
#square(fill: red.saturate(20%))
74+
#square(fill: red.desaturate(20%)) \
75+
#square(fill: blue.mix(green))
76+
```)
77+
78+
还有一些其他不太常见的颜色计算，详见#link("https://typst.app/docs/reference/visualize/color/#definitions-lighten")[《Typst Docs: Color operations》]。
79+
80+
== 渐变色
81+
82+
你可以以某种方式对Typst中的元素进行渐变填充。这有时候对科学作图很有帮助。
83+
84+
有三种渐变色的构造函数，可以分别构造出线性渐变（Linear Gradient），径向渐变（Radial Gradient），锥形渐变（Conic Gradient）。他们都接受一组颜色，对元素进行颜色填充。
85+
86+
#code(```typ
87+
#let sqr(f) = square(fill: f(
88+
..color.map.rainbow))
89+
#stack(
90+
dir: ltr, spacing: 10pt,
91+
sqr(gradient.linear),
92+
sqr(gradient.radial),
93+
sqr(gradient.conic ))
94+
```)
95+
96+
从字面意思理解`color.map.rainbow`是Typst为你预定义的一个颜色数组，按顺序给出了彩虹渐变的颜色。还有一些其他预定义的颜色数组，详见#link("https://typst.app/docs/reference/visualize/color/#predefined-color-maps")[《Typst Docs: Predefined color maps》]。
97+
98+
== 填充模式
99+
100+
Typst不仅支持颜色填充，还支持按照固定的模式将其他图形对元素进行填充。例如下面的pat定义了一个长为`61.8pt`，宽为`50pt`的图形。将其填充进一个矩形中，填充图形从左至右，从上至下布满矩形内容中。
101+
102+
#code(```typ
103+
#let pat = pattern(size: (61.8pt, 50pt))[
104+
#place(line(start: (0%, 0%), end: (100%, 100%)))
105+
#place(line(start: (0%, 100%), end: (100%, 0%)))
106+
]
107+
108+
#rect(fill: pat, width: 100%, height: 60pt, stroke: 1pt)
109+
```)
110+
5111
== 线条
6112

7113
我们学习的第一个图形元素是直线。

0 commit comments

Comments
 (0)