XY图坐标

Question

这个项目仍处于规划阶段。我正在努力理解最佳操作方式。 如果我有一个绘图区域，类似于图片上的绘图区域。然后添加jQuery UI可拖放功能以拖动图表中的对象，如何记录每个对象相对于彼此的位置？直接的答案是获取坐标点，但屏幕尺寸可能不同。

以下是需要回答的问题：

1. 是否可以以某种方式使用百分比来完成？
2. 如果我保存这些结果，如何按最高到最低的顺序显示物品列表？

- santa

Answer 1

你知道你的页面上的区域有多大（以像素为单位），可以指定特定大小的区域，或者在放置到页面上后询问它的大小。你的所有点都将有坐标（以像素为单位）。

因此，当你与服务器交互以保留这些点时，请告诉服务器容器的大小以及相对于容器坐标系的所有点的位置。所有这些值都可以在客户端JavaScript中轻松计算。

你的服务器代码可以跟踪上述所有内容并根据需要将它们映射到新坐标系统，或者可以将所有内容规范化为标准坐标系并在标准坐标系中存储物品；你可以说该区域始终是 X 个服务器单位宽，并进行一些数学计算，以按比例缩放输入坐标以匹配标准坐标系。在服务器上使用一个标准坐标系可能会让你的工作更加轻松。

至于“如何按最高到最低的顺序显示项目列表？”这个问题，答案取决于你如何定义“最高”。如果“高度”测量Y坐标，则只需按Y坐标排序（如果需要打破平局，则可能还要按X坐标排序）。如果“最高”是一种量度，则只需使用欧几里得范数即可。

d = sqrt(x*x + y*y)

按此排序。如果您仅仅使用大小来进行排序，那么可以通过放弃平方根并简单地按x*x + y*y进行排序（平方根不会改变顺序），甚至是曼哈顿范数（abs(x) + abs(y)）来节省一些CPU周期。

您可能会遇到排序中的并列情况，因此需要立即处理。您想让Y优先于X还是相反？您有一个字符串标签可以用作二级排序键吗？您的选择可能取决于您计划如何列出这些点：

• 如果您将点列为(x,y)坐标，则使用X作为次要键，因为这对人类更自然。
• 如果您将点列为(label,(x,y))对，则使用标签作为次要键。

目标有两个：

1. 生成对人类有意义的输出。
2. 在面对并列情况时保持一致的排序。

因此，请选择合理的次要排序键并保持一致。

- mu is too short

---

哇，谢谢，这非常有帮助！对于我的项目来说，它不必那么精确，但是如果我有两个“点”，其坐标如下：点1：X=2 Y=3和点2：X=3和Y2，哪一个会先显示？还是基于某个ORDER值？ - santa

@santa：我在底部添加了一点关于决胜规则的更新。它基本上是说“要明智和一致”的冗长方式。 - mu is too short

感谢您的补充。我的下一步是找出一种将网格转换为可移植系统的方法。我想要最大化屏幕的可用空间。很可能我会使用max-width和max-height来保持其合理大小，但总体而言，屏幕尺寸有太多变化。我想我会使用jQuery来获取初始网格的宽度和高度。可能将其除以1000并使用floor()值存储到我的自定义单位中，这样下次加载图形时，我将运行反向操作并将我的单位转换为像素来定位。听起来还不错，对吧？ - santa

@santa：是的，听起来大致正确。只需注意您的1000，确保没有超过它（多加一点小心谨慎不会有害），并且可能会使用 round 而不是 floor，但对于此类应用程序，这可能不会有任何区别。哦，我能在圣诞节得到一辆红色消防车吗？ - mu is too short