在 iOS 中与复杂图形交互答案

【问题标题】：Interact with complex figure in iOS在 iOS 中与复杂图形交互
【发布时间】：2015-12-27 05:08:30
【问题描述】：

我需要能够与一个包含许多不同部分的圆柱体的表示进行交互。当用户点击小矩形时，我需要显示与特定部分（表单）相关的弹出框。

下一张图片展示了一种逼真的 3D 方法。但是，我再说一遍，我需要解决这个问题，不需要 3d（虽然会很酷）。符合功能需求的表示就足够了。

制作绘图的零件信息来自 API（尺寸、位置等）

我真的不需要它是现实的。最简单的近似是在 2d 表示中显示一个圆柱体，就像一个由可交互的小矩形组成的矩形。

所以，正如我所提到的，我认为（在我看来）有两种相反的方法：现实的或简化的

有没有办法在中间实现一个好的解决方案？我应该研究哪些库、组件、框架？

我的研究将我带到了 SceneKit，但我仍然不知道我是否能够与之交互。 交互是一个非常重要的部分，因为当用户点击圆柱体上的任何小矩形时，我需要显示一个弹出框。

谢谢

【问题讨论】：

当您说静态 2D 版本也可以时，“交互是非常重要的部分”到底是什么意思？
当用户点击圆柱体的任何小矩形时，我需要显示一个弹出框
这是“简单”版本的正确表示：Cylinder Image？这一切都可以使用 UIKit 通过获取用户触摸的位置并使用带有相应数据的弹出框来完成。
是的，这将是一个正确的表示。不过，圆柱体内部的形状可能会更复杂一些。

标签： ios 3d 2d draw scenekit

【解决方案1】：

您不需要任何特殊的框架来实现这样的交互。这种效果可以通过标准的UIKit 和UIView 以及一点三角函数来实现。您实际上可以使用 2D 数学和绘图准确地绘制示例图像。我的答案不是一个精确的公式，而是考虑如何定义形状并将问题分解为可管理的步骤。

一个圆柱体可以由两个偏移圆来定义，这些圆代表端部，在它们的半径处连接。我将使用正交投影，这意味着随着深度延伸到背景中，圆柱体不会显得更小（但如果需要，您可以适应透视）。您可以在 UIView drawRect 中使用 CoreGraphics 进行绘制。

方形切片表示圆的一个角块，偏移量小于圆柱的长度，但方向相同，如下图所示（抱歉，绘制不准确）。

您感兴趣的这个正方形切片是用纯红色勾勒的区域，在第一个圆的半径之外，在想象的第二个圆的半径内（它只是从第一个圆偏移了您想要的任何长度）切片）。

要绘制此区域，您只需绘制每条弧线的轮廓路径并连接端点。

检查触摸是否在这些方形切片之一内：

检查触摸点是否在与原点a 之间的角度a 之间。
检查触摸点是否在内圆半径之外。
检查触摸点是否在外圆的半径内。（请注意，如果圆圈相距超过一个半径，这意味着什么。）

要找到一个点来显示弹出框，您可以平均切片上的端点或找到两条边之间的中间角并偏移一半距离。

【讨论】：

【解决方案2】：

理论上，在带有 SpriteKit 或 UIKit Popovers 的 Scene Kit 中执行此操作是理想的。

然而，Scene Kit（和 Sprite Kit）似乎处于不断变化的状态，Apple 没有人与用户就人们目前遇到的大量问题进行沟通。从 iOS 8.4 中相对稳定和高性能的 Sprite Kit 到 iOS 9 中性能下降似乎很常见。 Scene Kit 似乎还没有完成，因此文档和社区几乎都不存在。

话虽这么说......理论是这样的：

材质 ID 在传统 3D 应用中用于定义具有不同材质的对象区域。不知何故，这些材质 ID 在 SceneKit 中被称为“元素”。我无法找到更多关于此的信息。

应该可以检测到触摸对象下方的“元素”，并做出相应的响应。您甚至应该能够更改该元素上材料的状态/性质，以表明它是当前选定的。

根据您的示例，如果想要一个光滑、圆润的圆柱体，请从一个仅由足够多的段组成的圆柱体开始，以描述/定义要触摸“矩形”部分所需的材料 ID。

稍后您可以向圆柱体添加平滑操作以使其变圆，并且唯一材质 ID 的每个象限中的所有额外平滑几何体都应该是响应式的，无论您如何添加这些额外细节来平滑圆柱体的呈现.

【讨论】：

【解决方案3】：

“简化”版本的想法：

如果this representation 没问题，您可以使用 UICollectionView。由于

，每个单元格都可以具有定义的大小

collectionView:layout:sizeForItemAtIndexPath:

那么集合的每个单元格都可以是一个小矩形，代表一个圆柱体的可触摸部分。

并使用

collectionView:(UICollectionView *)collectionView 
   didSelectItemAtIndexPath:(NSIndexPath *)indexPath

去接触。

这将帮助您在正确的位置显示弹出框：

CGRect rect = [collectionView layoutAttributesForItemAtIndexPath:indexPath].frame;

最后，您可以在这里选择合适的弹出框（如果应用程序必须在 iPhone 上运行）： https://www.cocoacontrols.com/search?q=popover

不完美，但我认为这是有效的！

【讨论】：

从平面侧视图显示圆柱体不会向用户传达圆柱体。
“是的，这将是一个正确的表示。虽然圆柱体内部的形状可能更复杂一些。” – tomasbarrios 你可以参考评论；）

【解决方案4】：

是的，SceneKit。

当用户执行触摸事件时，这意味着您知道屏幕上的 2D 坐标，因此您唯一的决定是是否弹出视图，即使是 3D 模型也不存在。

首先，我们可以将需求逻辑拆分为两部分，确定触动的段，在每个段中显示正确的“颜色”。

我认为使用 3D 模型是为了确定在你的情况下显示哪条数据，如果我没有误解你的话。在这种情况下，SCNView 的命中测试方法将为您完成大部分工作。你要做的就是做一个hit test，取出hit节点和hit在这个节点的局部3D坐标，然后你就可以计算出这次touch命中了哪个segment并做决定。

现在如何绘制圆柱体的表面将是唯一剩下的问题，对吧？有多种方法可以做，例如简单地绘制您需要的每个图像并以编程方式将其附加到圆柱体的材质上，或者将您的图像文件放在磁盘上并用作圆柱体的材质......

我觉得问题基本解决了。

【讨论】：