DEV Community ·

[学习笔记] Hightopo的HT for Web (3) - Host和Anchor

💡 原文英文，约1100词，阅读约需4分钟。

📝

内容提要

本文介绍了Hightopo的HT for Web中的Host和Anchor概念。Host用于定义节点间的附着关系，节点会随Host的移动和旋转。Anchor点决定节点的坐标位置，默认位于节点中心。通过setHost()和getAttaches()方法，可以设置和获取附着节点。Anchor点以百分比表示，影响节点的旋转和缩放。

🎯

关键要点

Host和Anchor是HT for Web中的两个重要概念，分别用于定义节点间的附着关系和节点的坐标位置。
Host用于定义节点的附着关系，节点会随Host的移动和旋转。
Anchor点决定节点的坐标位置，默认位于节点中心，可以通过百分比表示。
使用setHost()和getAttaches()方法可以设置和获取附着节点。
isHostOn()和isLoopedHostOn()方法用于判断节点的附着关系。
节点的旋转和缩放受Anchor点的影响，Anchor点是节点的中心点。
Anchor点的值以百分比表示，默认值为{x:0.5,y:0.5}。
可以通过node.getAnchor()和node.setAnchor()方法获取和设置Anchor点。
在3D场景中，Anchor点的原理与2D类似，但增加了一个维度。
总结中强调了节点的附着和Anchor点功能的重要性。

🔎

延伸解读

Host与Anchor的实际应用

在HT for Web中，Host和Anchor的概念不仅是理论上的定义，它们在实际应用中极大地影响了节点的交互和动画效果。通过合理设置Host，开发者可以实现复杂的节点关系，使得多个节点能够协同移动和旋转，提升用户体验。

Anchor点的灵活性

Anchor点的设置允许开发者根据需求灵活调整节点的坐标和旋转中心。默认的中心点设置虽然适用于大多数情况，但在特定场景下，调整Anchor点的位置可以实现更精确的控制，尤其是在3D场景中，Anchor点的三维设置更是关键。

注意节点附着关系的递归性

在使用setHost()方法时，需注意节点的附着关系具有递归性。虽然直接获取的附着节点数量可能较少，但实际上，附着关系可能会影响到多个节点的移动和旋转。因此，在设计节点结构时，需考虑到这种递归影响，以避免意外的行为。

❓

延伸问答

Host和Anchor在HT for Web中有什么作用？

Host用于定义节点间的附着关系，节点会随Host的移动和旋转；Anchor决定节点的坐标位置，默认位于节点中心。

如何设置节点的Host？

可以使用setHost()方法来设置节点的Host对象。

Anchor点的默认值是什么？

Anchor点的默认值为{x:0.5,y:0.5}，表示节点的中心。

如何获取节点的附着节点？

可以使用getAttaches()方法获取所有附着在该Host上的节点。

Anchor点如何影响节点的旋转和缩放？

Anchor点作为节点的中心点，影响节点的坐标位置，同时也是旋转和缩放的中心。

在3D场景中，Anchor点的原理与2D有什么不同？

在3D场景中，Anchor点的原理与2D类似，但增加了一个维度，涉及到Z轴的设置。

🏷️