Блог

Я пишу простой редактор изображений в React Konva. Я сгенерировал <Stage width={500} height={500}> , но в меньших видовых экранах я пытаюсь масштабировать лист холста с помощью CSS.

Например:

 const Component = () => (
    <Div>
        <Stage {...size}> ... </Stage>
    </Div>
)

const Div = styled.div`
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .konvajs-content {
    width: initial !important;
    height: initial !important;
  }
`;

 

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

Пример: https://youtu.be/ulu_ot5f9Xg

Я не могу масштабировать холст с помощью окна просмотра. Другие функции используют этот холст и ожидают большого разрешения.

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

Вместо этого вам следует просто прочитать размер элемента DOM контейнера и применить этот размер к сцене. При необходимости вы можете использовать scaleX и scaleY для сцены, чтобы настроить содержимое.

Для демонстрации посмотрите здесь: https://konvajs.org/docs/sandbox/Responsive_Canvas.html#Do-you-need-responsive-adaptive-canvas-for-you-desktop-and-mobile-applications