Pixi.js: поворот влияет на положение объекта

Мне удалось сделать это, установив точку поворота и положение графики в ее центре, а затем я нарисовал графику вокруг этой точки.

Я ответил на ваш вопрос о stackoverflow с помощью примера кода здесь: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital Влияет ли поворот на положение, и если да, то можно ли это быстро исправить?

Я действительно запутался в pivot и anchor , можно ли их объединить?

Ну, pivot и anchor (концептуально) разные. Поворот влияет на точку поворота, а привязка - на начало координат (точку положения). Я не уверен, правильно ли используется pivot.

Похоже, это можно использовать как ту же точку. На самом деле я никогда раньше не видел, чтобы они были разделены при рендеринге (css transform-origin, регистрация 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.width / 2, sprite.height / 2). Это привело к перемещению моего спрайта и повороту на 0,0.

А? Я что-то пропустил?

@tleunen Я считаю, что вам нужно использовать якорь, поскольку вы используете спрайты.

Будет ли это поведение исправлено в версии 4?

Я решил попробовать Pixi и тут же обнаружил этот «баг».
После нескольких часов поиска в Google я все еще не понимаю, как это должно работать.
Большинство людей на форумах просто говорят: «Поведение пивота нарушено». Не очень полезно.

Боюсь, что и ваш комментарий тоже. Так pixi работает с pivot.
Если эта «ошибка» слишком велика, чтобы ее можно было обнажить, пожалуйста, сообщите об этом.

В четверг, 10 марта 2016 г., Иван Клешнин [email protected] написал:

_Будет ли исправлено это поведение в версии 4? _

Я решил попробовать Pixi и тут же обнаружил этот «баг».
После нескольких часов поиска в Google я все еще не понимаю, как это должно
Работа.
Большинство людей на форумах просто говорят: «Поведение пивота нарушено». Не очень
полезно.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Мэт Гровс

_Технический партнер_

Телефон: 07708 114496 :: www.goodboydigital.com
Первый этаж, блок 9B, Queens Yard, White Post Lane, Лондон, E9 5EN
Goodboy ©. Все права защищены.

Боюсь, что это тоже не твой комментарий

Пожалуйста, не принимайте «не очень полезно» на свой счет.
Он должен был описать мое эмоциональное состояние, а не обидеть.

Если эта «ошибка» слишком велика, чтобы ее можно было обнажить, пожалуйста, сообщите об этом.

Я не знаю, ошибка это или нет, потому что я новичок в этой индустрии.
Вот почему я заключил слово "ошибка" выше в кавычки. Некоторые считают, что это так. Некоторые - это не так.
Я просто поделился своим опытом и спросил об изменениях в v4. Я действительно хотел изучить Pixi, но этот меня подвел.

Основная проблема: прочитав> 10 связанных вопросов (здесь и в Интернете), я все еще не понимаю, как обойти это поведение и заставить контейнер вращаться вокруг своего центра в определенной точке пространства.
И я не такой уж и глупый.

Всем привет!

Не волнуйся, парень, извини, если я был немного невысоким, ты поймал меня в конце долгого дня!

Pivot должен действовать как ненормализованная опорная точка.

Самый простой способ исправить это - добавить объект в контейнер и повернуть его, одновременно перемещая объект внутри.

Надеюсь, это поможет!

Нет проблем. Спасибо. Постараюсь воспользоваться вашим советом.

На мой взгляд, самый простой способ повернуть изображение (или контейнер) вокруг его центральной точки - это сохранить координаты центральной точки, в которой было нарисовано изображение. Затем установите положение и поворот изображения в центральную точку.
Вот пример:

Если вы, например, создаете графический объект, вы можете начать рисовать на нем примитивы.
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

Заранее спасибо, Николлс

Готово! Только с использованием 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 не содержит ошибок, просто немного сложно понять, как оно работает и почему «влияет на положение объекта». Объект всегда вращается вокруг своей позиции, и точка поворота помогает нам установить новую точку, с которой он вращается.

Привет, чувак, я думаю, это был взлом, потому что у него есть побочный эффект: позиция была изменена.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.