root (e.g. view of a view controller)
|_superview: A view where we will draw a cross using core graphics
|_container: Clips subview
|_subview: A view where we will show a cross adding subviews,which has to align perfectly with the cross drawn in superview
|_horizontal line of cross
|_vertical line of cross
任务：
在给定全局变换的情况下,superview和subview的十字架必须始终对齐. “要求”部分中的更多详细信息.
语境：
上面的视图层次结构属于图表.为了提供最大的灵活性,它允许提供图表点和&相关内容有3种不同的方式：
>在图表的基本视图(superview)中绘制绘制方法.
>将子视图添加到子视图.子视图在缩放/平移时进行转换,并自动显示其子视图.
>将子视图添加到子视图的同级中.为简单起见,未在视图层次结构中显示,因为它与问题无关.这里只提一下概述.这个方法和2.之间的区别在于,这里视图没有被转换,所以它留给内容的实现来“手动”更新所有子节点的转换.
最大的灵活性！但实现这一目标的成本实施起来有点棘手.具体点2.
目前我通过基本上分别处理超视图核心图形绘制和子视图的变换来进行缩放/平移工作,但是这导致冗余和容易出错,例如,重复的边界检查代码等
所以现在我正在尝试重构它以使用一个全局矩阵来存储所有变换并从中导出所有变换.将全局矩阵应用于superview用于绘制的坐标是微不足道的,但是根据下一节中列出的要求导出子视图矩阵,而不是如此.
我在视图层次结构部分提到了“十字架”,因为这是我在游乐场中使用的一个图表点的简化表示(使用x / y指南)(您可以向下滚动图像和要点).
要求：
>内容可以缩放和平移.
>十字架始终保持完美对齐.
>子视图的子视图,即无法触摸十字线视图(例如,将变换应用于它们) – 所有可以修改的都是子视图的变换.
>缩放和平移变换仅存储在全局矩阵矩阵中.
>然后使用矩阵计算在superview(平凡)中绘制的交叉的坐标,以及子视图的转换矩阵(不是平凡的 – 这个问题的原因).
>由于似乎不可能从全局矩阵中唯一地导出子视图矩阵,因此允许将其他数据存储在变量中,然后将这些变量与全局矩阵一起用于计运算符视图的矩阵.
>在缩放/平移期间,容器的大小/来源可能会发生变化.这样做的原因是y轴的标签可以具有不同的长度,并且图表需要动态地使内容大小适应标签占据的空间(在缩放和平移期间).
>当然,当容器的大小发生变化时,域 – 屏幕坐标的比例必须相应地改变,这样完整的原始可见域继续包含在容器中.例如,如果我在宽度为500pt的容器框架中显示带有域[0,10]的x轴,即将域点转换为屏幕坐标的比率为500/10 = 50,并收缩容器宽度为250,现在我的[0,10]域必须适合这个新宽度,其比率为25.
>它还必须为多个十字架(同时)和每个的任意域位置工作.这应该通过解决1-7自动发生,但提到完整性.
我做了什么：
以下是我试图更好地理解问题的逐步操场：
第1步(工作)：
如开头所述构建层次结构,只显示在(编程)缩放期间必须保持对齐的十字架.泛.符合要求1,2,3,4和5：
特殊性：
>我跳过容器视图,以保持简单.子视图是superview的直接子视图.
> subview与superview具有相同的大小(当然是在缩放之前),也是为了保持简单.
>我将子视图的锚点设置为原点(0,0),这似乎是与全局矩阵同步的必要条件.
>必须记住用于锚更改的翻译,以便再次将其与全局矩阵一起应用.否则会被覆盖.为此,我使用变量subviewAnchorTranslation.这属于我在要求5下的子弹中想到的额外数据.
好吧,你看到一切都在这里工作.是时候尝试下一步了.
第2步(工作)：
第1步操场的副本和修改：
>添加了容器视图,现在类似于开头描述的视图层次结构.
>为了使子视图(现在是容器的子视图继续显示在同一位置),必须通过-container.origin将其移动到顶部和左侧.
>现在,缩放和平移调用随机调用交错,以更改容器的帧位置/大小.
十字架继续保持同步.满足要求：全部来自第1步要求6.
Gist with playground
第3步(不起作用)：
到目前为止,我一直在使用从0开始的屏幕范围(可见游乐场结果的左侧).这意味着容器不能满足其包含范围的功能,即要求7.为了满足这一要求,容器的原点必须包含在比率计算中.
现在还必须缩放子视图以适应容器/在正确的位置显示十字架.其中添加了第二个变量(首先是subviewAnchorTranslation),我称之为contentScalingFactor,包含此缩放,必须包含在子视图的矩阵计算中.
在这里,我做了多次实验,但都失败了.在当前状态下,子视图以与容器相同的框架开始,并且在容器框架更改时调整其框架的缩放比例.此外,子视图现在位于容器内,即它的原点现在是容器的原点而不是superview的原点,我必须设置更新其锚点,使得原点不在(0,0)但是(-x,-y),是x和y容器原点的坐标,使得子视图继续与superview的原点相关.每次容器更改其原点时更新此锚点似乎是合乎逻辑的,因为这会更改从内容的原点到superview的原点的相对位置.
我为此上传了代码 – 在这种情况下是一个完整的iOS项目,而不仅仅是一个游乐场(我最初认为它正在工作,并希望使用实际手势进行测试).在实际项目中,我正在努力改造工作,但我找不到差异.无论如何它不能很好地工作,在某些时候总是存在小的偏移并且点/交叉点不同步.
好的,我如何解决这个问题,以满足所有条件.十字架必须保持同步,连续缩放/平移并在两者之间改变容器的框架.
解决方法
无论该子视图已被转换多少,位于另一视图的坐标系中的子视图中的点的坐标是什么.
为了将Parent与剪切容器分离并提供通用答案,我建议在概念上将它们放在同一级别,并在视觉上以不同的顺序放置(†)：
使用常见的超级视图
要应用从子项到父项的滚动,缩放或任何其他转换,请通过公共超级视图(在本示例中命名为Coordinator).
该方法与this Stack Overflow answer非常相似,其中两个UIScrollView以不同的速度滚动.
注意红色细线和黑色细线如何重叠,无论位置,滚动,转换任何和所有关闭子层次结构中的视图,包括容器的视图.
码
协调转换
为简洁起见,在子视图的坐标系中使用任意点(50,50)(有效绘制该点),并在父视图系统中转换它,如下所示：
func coordinate() {
let transfer = theChild.convert(CGPoint(x:50,y:50),to: coordinator)
let final = coordinator.convert(transfer,to: theParent)
theParent.transformed = final
theParent.setNeedsdisplay()
}
放大&翻译容器
func zoom(center: CGPoint,delta: CGPoint) {
theContainer.transform = theContainer.transform.scaledBy(x: delta.x,y: delta.y)
coordinate()
}
func translate(delta: CGPoint) {
theContainer.transform = theContainer.transform.translatedBy(x: delta.x,y: delta.y)
coordinate()
}
(†)我已经分别将Superview和Subview重命名为Parent和Child.
