Я всегда хотел создать свою собственную игру на основе сетки с множеством функций, таких как вращение, столкновение и масштабирование. Первым делом я пошел на https://d3js.org/ и просмотрел все примеры. Большинство из них устарело в d3 v3 trivial. Мне просто нужен чистый пример с осью в центре экрана, который можно масштабировать при любом разрешении без каких-либо побочных эффектов. Поэтому я решил покопаться в документации и разработать свой собственный пример.

В этой первой статье я расскажу об основах создания пользовательского интерфейса сетки с помощью d3. Готовый пример см. В сообщении на bl.ocks.org здесь - https://bl.ocks.org/evanjmg/c2ffda2df9748e56425194eb5e6ea878

На протяжении всего руководства, если вы видите суть .html, вы можете изменить gist.github.com на bl.ocks.org, чтобы увидеть живой пример :)

В этой первой статье я расскажу о следующем:

  • Настройка сетки
  • Реализация Zoom
  • Реализация перетаскивания

Настройка сетки

В приведенном ниже примере показана настройка процесса создания сетки. После того, как можно создать сетку, они могут помещать объекты поверх этой сетки и использовать шкалы и атрибуты D3 для изменения размера, перевода и модификации объектов в сетке на любом устройстве с любым разрешением. Самая важная вещь в сетке - это сделать центральную точку [0,0]. Это дает нам точку отсчета для размещения наших объектов с координатами x и y. Это также дает нам 4 квадранта. Просмотрите код ниже, чтобы узнать больше:

Добавление увеличения

Методы масштабирования D3 v4 - большое улучшение по сравнению с v3, упрощая настройку действий масштабирования и предотвращая столкновения с другими событиями. А пока мы просто добавим к нему базовое масштабирование и масштабируем сетку. Просто добавив эти строки ниже:

Воспроизвести пример с полным увеличением здесь: https://bl.ocks.org/evanjmg/7c43c37b1f7752a1ff438109f655bed3

В этом случае зум реагирует на события трекпада / мыши и панорамирует щелчком вниз. Мы также используем d3.event.transform (который по сути является объектом - {k: number (scale), x: number, y: number}, чтобы соответственно изменить размер оси.

Добавление перетаскиваемых объектов / объектов с привязкой

Добавление перетаскиваемых объектов и привязка их к сетке так же просто, как и масштабирование. Однако, когда вы комбинируете это с масштабированием, могут возникнуть побочные эффекты, с которыми вам придется справиться. Таким образом, важно отключить масштабирование с помощью мыши / трекпада. В примере ниже мы добавим пару квадратов и заставим их привязаться к нашей сетке. Вот код, который мы добавим:

Полный пример см. здесь: https://bl.ocks.org/evanjmg/ea3e59e67b4256c8831d3fc80f71294b

Обратите внимание, что при перетаскивании есть начальное состояние, состояние перетаскивания и конечное состояние. Начальное событие позволяет зафиксировать и сохранить исходную точку для использования в будущем. Это полезно для обновления точек данных и возврата точек в их исходное положение во время столкновений. Событие перетаскивания позволяет перемещать и изменять форму до события точки перетаскивания - это полезно для корректировки текста или других связанных элементов. Конечное состояние позволяет нам в конечном итоге сохранить законченную точку перетаскивания в наборе данных и, возможно, можно будет отправить запрос ajax на сервер, чтобы сохранить позицию.

Эти примеры не идеальны. Фактически, немного больше поработав с d3, я улучшил этот пример в своей работе в Velocity.

Если у вас есть предложения по повышению удобства использования и производительности.

Столкновения, сброс масштаба и поворот будут рассмотрены в следующей статье (подлежит уточнению). Подпишитесь на Velocity Engineering по адресу https://engineering.velocityapp.com/ , чтобы получить статью, когда она будет опубликована.

И оставьте, пожалуйста, свой отзыв ниже: