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

Включить жест прокрутки мобильного устройства на холсте paperjs

Я разработал веб-приложение, которое использует библиотеку paper.js для отображения некоторых основных фигур рисования.

Моя проблема в том, что при просмотре на смартфоне веб-страницу нельзя прокручивать вверх или вниз с помощью жестов прокрутки, применяемых к элементу холста. Я также пробовал с пустым элементом холста того же размера, не используя paper.js для его создания, и он работает правильно. Таким образом, paperjs отвечает после обработки холста за отключение события для прокрутки с помощью жестов. Обратите внимание, что я не использую прослушиватели событий для событий мыши на холсте paperjs.

Спасибо

canvas scroll gesture paperjs
05.05.2015

Ответы:


1

Несколько советов, которые пришли мне в голову :)

  1. Если пользователь не должен взаимодействовать с холстом, вы можете наложить <div></div> на холст, чтобы событие касания никогда не достигало его. Вот так:

<div class="canvas-container" style="posistion:relative;"> <canvas style="position: relative"></canvas> <div class="canvas-overlay" style="position: absolute;width: 100%;height: 100%"></div> </div>

  1. Если по какой-то причине это не решает вашу проблему или вам нужно предоставить пользователю доступ к холсту, возможно, лучшим решением будет использование javascript для прослушивания события «touchmove» и самостоятельной прокрутки окна. Но это может вызвать у вас другие проблемы. Например, полностью заменить функцию прокрутки пользовательской.

    Вот ссылка с примером кода и документацией по событию touchmove .

  2. Вы можете реализовать функцию onMouseDrag из paper.js и самостоятельно прокручивать окно только тогда, когда пользователь пытается перетащить холст.

    А вот ссылка на onMouseDrag даже.

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

29.05.2015

2

Я предоставляю решение, которое я нашел для своей проблемы с Github в то время, на случай, если оно поможет некоторым людям:

Привет, после долгих проверок кода я нашел источник проблемы. В paper-core.js в строке 10451 (версия 0.9.22) к элементу canvas добавляются некоторые предопределенные стили CSS. Одним из них является touchAction, для которого установлено значение none. Поэтому, если вам не нужны какие-либо интерактивные функции в элементе холста, и вы все еще хотите включить перетаскивание на мобильных устройствах, вы должны вручную установить для этого свойства значение "", которое используется по умолчанию... Чтобы сделать это, я просто вызываю эта функция на моем элементе холста после настройки бумаги на javascript:

function(el){
    /*
        This function will accept the canvas html element and enable css drag that was originally disabled in paper.js for canvas that we do not need functionality and want mouse drag on
     */
    var name = 'touchAction';//the property that needs enabling for drag to work
    if (name in el.style) {
        el.style[name] = '';
    }
}
30.10.2015
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..