设置坐标系
撰写时间：2024-03-19
修订时间：2025-04-11
因有些API需要设置默认的颜色值，为避免看不到相关的图形，请先切换到暗黑模式下查看效果。
在JavaScript模块中使用geoGrp
也可以直接由geoGrp来代为创建一个canvas：
宽高值默认为300px及150px。
注意，要设置canvas的clientWidth及clientHeight属性值，在此之前就应先将canvas添加到DOM树中。
两种方式所返回的canvas，均已应用了devicePixelRatio。
设置坐标系
默认坐标系
canvas坐标系的原点位于canvas的左上角，X轴正轴朝右，Y轴正轴朝下。可使用下面代码设置该坐标系：
如果未指定任何参数，setupCoordinate使用canvas的原始坐标系作为新坐标系（但坐标值已不一样，详见下面）。
笛卡尔坐标系
笛卡尔坐标系的原点位于canvas的中心，Y轴正轴朝上。使用下面代码设置该坐标系：
第一个参数用以设置Y轴正轴的朝向。默认为"down"。
第二个参数用以设置坐标系的原点，geoGrp将在该点的位置建立起新的坐标系。getCenterPoint取出canvas原始坐标系的中心，以让setupCoordinate将其设置为新坐标系的原点。默认为getLeftTopCorner方法的返回值。
翻转笛卡尔坐标系
将笛卡尔坐标系中的Y轴翻转，让Y轴朝下。
这实际等于将canvas原始坐标系中的原点从左上角移至canvas的中心。
笛卡尔坐标系的第一象限
只取笛卡尔坐标系的第一象限。
自定义原点
代码{x:100, y:200}可在canvas原始坐标系中选取合适的一点，以此作为新坐标系的原点。
边距
绘制坐标轴及坐标刻度要占用一定的空间，因此真正绘制图像的区域离canvas的边缘有一定的边距。可调用drawBoundary方法绘制该边框。
X轴与Y轴的坐标刻度相互分离
X轴与Y轴的坐标刻度可以相互分离，从而允许在各自的值域内自由变化。
自定义用户坐标系的刻度
确定坐标系后，我们可以自由地定义X轴与Y轴的刻度。
参数6, 3, 9, 3表示，X轴正轴最大刻度为6，需要显示3个刻度；Y轴正轴最大刻度为9，需要显示3个刻度。
最后两个参数分别用于指定是否显示坐标轴及刻度。
引用用户坐标系的刻度
自定义了坐标刻度后，fillCircle中的参数Point(2, 3)，引用的不再是canvas原始坐标值，而是自定义的坐标值。geoGrp在背后会自动帮我们将用户坐标系的值转换为canvas原始坐标系的值。这给了我们极大的灵活性。
注意，由于两轴的单位刻度不一样，在指定圆的半径时，fillCircle方法将取两轴最小的单位刻度，并将所指定的自定义坐标系中的半径1.5与之相乘，最后再转换为canvas原始坐标值并绘制出来。
而在绘制圆角矩形时，圆角的值会取自最小刻度值，但长与宽则不受最小刻度值的影响。
通过引用用户坐标系，我们完美地解决了标准分辨率设备与高分辨率设备分别使用两套不同坐标系的问题。标准分辨率设备canvas默认宽度为300px，高分辨率设备canvas默认宽度为600px。通过转化并引用用户自定义坐标系，我们得以使用相同的代码，却可以在不同分辨率设备上绘制出相同比例大小的高清图像。