Nano Hash - криптовалюты, майнинг, программирование

Отключить панорамирование некоторых элементов Fabric.js

Я использую Fabric.js с реакцией, и у меня есть некоторые инструменты, реализованные на нем. Вот как это выглядит:

введите здесь описание изображения

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

Есть ли способ отключить панорамирование для некоторых элементов? Я пытался:

lockMovementX
lockMovementY
selectable: false
reactjs javascript fabricjs
21.02.2017

Ответы:


1

Хитрость заключается в том, чтобы вычесть движущиеся координаты из стационарных объектов при панорамировании:

canvas.on('mouse:move', function(e) {
  if (panning && e && e.e) {
    moveX = e.e.movementX;
    moveY = e.e.movementY;
    topRuler.set({
      top: topRuler.top - moveY,
      left: topRuler.left - moveX
    });
    leftRuler.set({
      top: leftRuler.top - moveY,
      left: leftRuler.left - moveX
    });
    canvas.relativePan(new fabric.Point(moveX, moveY));
  }
});

Вот рабочий JSFiddle, https://jsfiddle.net/rekrah/z3p8utmc/.

25.02.2017
  • Не волнуйтесь. Позвольте мне знать, если вам нужно что-нибудь еще. 26.02.2017
  • Привет Тим, Еще одна проблема. Это работает отлично, однако у меня есть комбинация с Zoom, и когда холст увеличивается или уменьшается, линейки все еще двигаются: prntscr.com/edxd1a 27.02.2017
  • Как теперь выглядит ваша функция масштабирования? Можете ли вы поделиться кодом? 27.02.2017
  • На самом деле это то, чего я пытаюсь добиться: vid.me/qs5Q Итак, линейки должны быть как-то расположены в зависимости от размера холста и уровня масштабирования при панорамировании, без перемещения вместе с другими элементами. Большое спасибо за помощь! Действительно ценится. 28.02.2017
  • Уважаемый TIm, у вас была возможность взглянуть на проблему? Спасибо. 02.03.2017
  • Не возражаете ли вы открыть его как отдельный вопрос с тем, что вы пробовали, и JSFiddle (возможно, тот, который вы обновили выше)? Спасибо. 02.03.2017
  • Конечно! Сделано здесь - › stackoverflow.com/questions/42578824/ 03.03.2017
  • Не могли бы вы помочь мне или дать мне хотя бы направление, как это сделать, потому что мне это очень нужно. Спасибо, Горан 06.03.2017
  • @GoranGjorgievski Я только что дал ответ. Хитрость заключается в расчете и пересчете всего по мере выполнения действий пользователя и запуска событий. Я надеюсь, что это помогает! 07.03.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..