Pixi.js: 枢轴影响对象位置

我设法通过将图形的枢轴和位置设置为其中心来做到这一点，然后围绕该点绘制图形。

我在这里用代码示例回答了关于stackoverflow的问题： http :

@GoodBoyDigital枢轴影响位置吗？

我实际上对pivot和anchor感到困惑，可以将它们合并吗？

好吧， pivot和anchor在概念上是不同的。 枢轴会影响旋转点，而锚点是原点（位置的点）。 我不确定是否正确使用了数据透视。

听起来这可以用作同一点。 我实际上从来没有在渲染之前看到过这些分离（css转换源，flash的注册），是否有用例说明？ 如果是这样，是否一切都可以默认为一件事，然后使用另一件事（如果已设置）？

也许默认情况下将锚定到包括旋转在内的所有位置，除非枢轴是点，否则将其用于旋转？

更新：反之亦然，尽管我倾向于_anchor = default_和_pivot = rotation_，但更好地命名IMO。

anchor和pivot在渲染引擎中很常见。 在许多用例中，您想绕中心旋转，但位置由左上角确定。 这是我们不仅应该支持而且会支持的东西。

嗨，现在就来研究这个问题。 为了澄清一点， anchor是精灵特定的东西。 它用于对齐纹理。 当我用cocos2d制作东西时，我发现该功能非常有用，因此我真的想将其添加到pixi中。 pivot属于所有显示对象，本质上是旋转点。

解决此问题后将其关闭，枢轴/锚点将按预期工作。

很抱歉提出这个问题，但我一直在搜索/阅读此存储库，但仍不清楚如何从中心旋转DisplayObjectContainer。 使用枢轴不允许我的容器从中心翻转而不移动其他位置。 有任何想法吗？ 我看到＃93并以为是答案，但也许我没有正确理解它。 任何帮助，将不胜感激。 谢谢！

编辑：我认为提及我的对象正在屏幕上移动并且在移动时会翻转会很有帮助。 我还使用缩放来进行“翻转”。

@ mparker11绕一个点旋转并翻转（通过scale ）是不同的。 pivot将影响rotation ，我不确定您是否可以正确影响容器的缩放比例。

有想法@GoodBoyDigital吗？

@englercj感谢您的回复。 我读了一篇有关使用矩阵乘法来实现它的文章，我看到@GoodBoyDigital在他的PIXI.DisplayObject.prototype.updateTransform函数中使用了，但是对于我一生，我真的不明白如何更改它以使其按比例缩放中心，如果我甚至需要更改它。

嗯...绝对不了解如何使用枢轴。

我将精灵的位置设置在给定的位置。 然后，我想使其在中心旋转，因此将枢轴设置为sprite的中心（sprite.width / 2，sprite.height / 2）。 这导致我的精灵移动并使其旋转为0,0。

嗯我错过了什么？

@tleunen我相信您需要使用锚，因为您正在使用Sprites。

v4中会解决此问题吗？

我决定尝试Pixi，并立即击中该“错误”。
经过几个小时的谷歌搜索，我仍然不明白这应该如何工作。
论坛上的大多数人只是说“枢轴行为已损坏”。 不是很有帮助。

恐怕您的评论也没有。 这是pixi处理支点的方式。
如果这个“ bug”太多了，请提供公关或慢跑。

2016年3月10日，星期四，伊万·克莱恩（Ivan Kleshnin） [email protected]写道：

_这种行为会在v4中得到解决吗？_

我决定尝试Pixi，并立即击中该“错误”。
经过几个小时的谷歌搜索，我仍然不明白这应该如何
工作。
论坛上的大多数人只是说“枢轴行为已损坏”。 不是特别的
有帮助的。

-
直接回复此电子邮件或在GitHub上查看
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811。

马特·格罗夫斯

_技术合作伙伴_

电话：07708 114496 :: www.goodboydigital.com
E9 5EN伦敦白岗巷皇后区9B单元一楼
好孩子©。 版权所有。

恐怕你的评论也没有

请不要个人认为“不是很有帮助”。
这是为了描述我的情绪状态，而不是冒犯。

如果这个“ bug”太多了，请提供公关或慢跑。

我不知道这是否是错误，因为我是这个行业的新手。
这就是为什么我在引号上方加上“ bug”一词。 有人认为是。 有些-它不是。
我只是分享了我的经验，并询问了v4的变化。 我真的很想学习Pixi，但这使我失望。

主要问题：在阅读了10多个相关问题（在此处和在Internet上）后，我仍然不知道如何解决此问题，以及如何在定义的空间点内强制容器围绕其中心旋转。
而且我不是特别愚蠢。

嗨，您好！

不用担心，如果我有点矮，对不起，您在漫长的一天结束时抓住了我！

枢轴旨在充当非标准化锚点。

修复它的最简单方法是将对象添加到容器中并旋转容器，同时在内部移动对象。

希望有帮助！

没问题。 谢谢我会尝试使用您的建议。

我认为，围绕图形的中心点旋转图形（或容器）的最简单方法是保存绘制图形的中心点坐标。 然后，将图形的位置和枢轴设置为中心点。
这是一个例子：

例如，如果创建一个图形对象，则可以开始在其上绘制图元。
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
图元始终相对于Graphics对象的位置绘制（默认为0）。
因此，我们需要将图形对象的新位置设置为200，因为它是图元的当前中心点。
test.position.x = 200; test.position.y = 200;
现在我们可以看到，图元只是被移动了，因此我们需要将枢轴设置为相同的坐标，并且它将保持在绘制位置相同的位置。
test.pivot.x = 200; test.pivot.y = 200;

Pivot属性并不是马车，只是有点混乱，难以理解它的工作方式以及为什么它“影响对象位置”。 对象始终围绕自己的位置旋转，而枢轴可帮助我们从其旋转位置设置新点。

大家好！ 我可以在角度上使用枢轴吗？ 我正在尝试修改一个精灵的角度（使用枢轴来修改旋转位置）以跟随鼠标，但是我不能，请您能帮我吗？

检查我的代码笔示例=> http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
和错误=> http://screencast.com/t/hSSaaTO4j0

在此先感谢Nicholls

做完了！ 只使用pivot.y或pivot.x哈哈哈！ 感谢所有Pixi团队！ ：+1：

我认为，围绕图形的中心点旋转图形（或容器）的最简单方法是保存绘制图形的中心点坐标。 然后，将图形的位置和枢轴设置为中心点。
这是一个例子：

例如，如果创建一个图形对象，则可以开始在其上绘制图元。
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
图元始终相对于Graphics对象的位置绘制（默认为0）。
因此，我们需要将图形对象的新位置设置为200，因为它是图元的当前中心点。
test.position.x = 200; test.position.y = 200;
现在我们可以看到，图元只是被移动了，因此我们需要将枢轴设置为相同的坐标，并且它将保持在绘制位置相同的位置。
test.pivot.x = 200; test.pivot.y = 200;

Pivot属性并不是马车，只是有点混乱，难以理解它的工作方式以及为什么它“影响对象位置”。 对象始终围绕自己的位置旋转，而枢轴可帮助我们从其旋转位置设置新点。

嘿，伙计，我认为这是一个hack，因为它有副作用：位置已更改。

该线程已被自动锁定，因为它关闭后没有任何近期活动。 请为相关错误打开新一期。