Fabricjs программно панорамирует холст на мобильном браузере

Question

У меня есть веб-сайт с тканью, и он прекрасно отображает PDF (в виде изображений).с мобильным браузером он отображается нормально, и я включил allowtouchscrolling и могу панорамировать изображение (почти равно прокрутке, но не так эффективно, как прокрутка).У меня есть аннотации на изображении, на которые пользователь должен ответить.на данный момент утомительно находить каждый объект аннотации.Есть ли способ, которым я могу программно панорамировать полотно холста с центром в определенной х, у?

спасибо прем

Answer 1

1. Панорамирование холста, так что [0,0] появляется в центре области просмотра.Для этого выполните canvas.absolutePan(new fabric.Point(-canvas.getWidth() / 2, -canvas.getHeight() / 2)

2. и затем дополнительно сместите холст к координатам вашего объекта (в моем примере я использую [left,top] + [halfWidth, halfHeight] для вычисления смещения центра объекта.

Итак, завершите создание canvas.absolutePan to [-canvas.getWidth() / 2 + obj.left + obj.width / 2, -canvas.getHeight() / 2 + obj.top + obj.height / 2

Рабочий пример вы можете найти здесь: http://jsfiddle.net/mmalex/2rsevdLa/

function panTo(canvas, obj) {
    let w = canvas.getWidth();
    let h = canvas.getHeight();

    let targetX = obj.left + obj.width / 2;
    let targetY = obj.top + obj.height / 2;

    canvas.absolutePan(new fabric.Point(-w/2+targetX, -h/2+targetY))
}

function recenterCanvas() {
    panTo(canvas, refRect);
    canvas.bringToFront(refRect);
    canvas.renderAll();
}