开始之前
在纸上画直线和曲线，是大多数人从幼儿园起就已经练习过的技能。 在 open clothes 中，我们用代码绘制直线和曲线，这会更抽象一些， 但只要理解几个基础构件，它并不复杂。
理解用代码设计服装纸样所涉及的概念，会在后续开发中持续带来帮助。 因此我们建议你先熟悉以下主题：
不需要一开始就掌握所有内容
open clothes 位于制作者与开发者两个世界的交汇处。 如果你有开发背景，可能不需要解释 SVG 是什么，但你可能 并不熟悉服装纸样设计。 如果你的背景是缝纫或纸样设计，你可能会疑惑 NodeJS 到底是什么，以及为什么需要了解它。
很少有人同时熟悉这两个领域，所以开始使用 open clothes 时， 你大概率会一路学到一些新知识。
如果遇到问题， Discord 社区 聊天室 是获得帮助的最佳地点。
可缩放矢量图形（SVG）
纸样会渲染为 SVG（即可缩放矢量图形） 这是一种基于 XML 的矢量图像格式，也是开放标准。 你不需要成为 SVG 专家，但对这种格式有基本了解， 会非常有助于理解 open clothes。
例如，坐标系统和路径的组织方式 都与 SVG 绘图系统相关，而 SVG 绘图系统又与 PostScript 或 PDF 等其他二维绘图技术密切相关。
坐标系统
open clothes 和 SVG 中的坐标系统遵循与页面文字相同的规则。 起点位于左上角，向右移动时 X 坐标会增加。 向下移动时 Y 坐标会增加。
- 预览
- 代码
- 透视
({ Point, points, paths, Path, part }) => {
points.origin = new Point(10, 10)
points.x = new Point(100, 10)
points.y = new Point(10, 50)
points.textX = new Point(85, 20).addText('X', 'text-lg')
points.textY = new Point(12, 43).addText('Y', 'text-lg')
paths.coords = new Path()
.move(points.y)
.line(points.origin)
.line(points.x)
.addClass('mark')
.attr('marker-start', 'url(#dimensionFrom)')
.attr('marker-end', 'url(#dimensionTo)')
return part
}
SVG 文档中的坐标系统
上图展示了 X 轴和 Y 轴。
在 X 轴上， 20 比 10.
在 Y 轴上， 50 低于 20.
在许多绘图程序中，Y 轴是反向的，原点
(0,0) 位于左下角，而不是左上角。
这是常见的混淆点，所以要记住：Y 轴可能 并不会按你的直觉方式变化。
open clothes 中的单位
open clothes 使用 毫米（mm） 作为全部内部单位。 系统支持英制和公制单位，界面可显示为 为 cm 或 inch, 但底层始终以毫米处理。
因此，作为版型设计者，你会直接使用 mm。
当你写 1 时，它表示 1 毫米。 当你写 7.8 时，它表示 7.8 mm。
虽然你可以在 open clothes 网站上使用 cm 或 inch，但那只是 内部单位之上的显示层；内部单位始终是 mm。
理解贝塞尔曲线
在计算机中，直线只需要起点和终点即可存储， 但曲线需要更多信息。 在 open clothes 中 — 和 SVG 以及许多其他计算机应用一样 — 曲线会被存储为 贝塞尔曲线, 这个名称来自法国工程师 Pierre Bézier，他在 20 世纪 60 年代推广了这种曲线的使用。
在 open clothes 中，我们使用所谓的三次贝塞尔曲线，它包含：
- 起点
- 与起点关联的第一个控制点
- 与终点关联的第二个控制点
- 终点
- 预览
- 代码
- 透视
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 40)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-注意")
return part
}
使用 Path.curve() 方法绘制的贝塞尔曲线示例
贝塞尔曲线及其 手柄 或 控制点 其实非常直观。 下面的图很好地说明了它们是如何构造的：
你不需要理解贝塞尔曲线背后的数学原理。 只要你能直观理解控制点如何影响曲线，就可以继续使用。