Правитель Fabric.js с зумом

Question

У меня вопрос. Я кодирую редактор вроде this, и я также хочу, чтобы линейка его добавляла (что меняет значения с помощью мыши-прокрутки (увеличение и уменьшение масштаба))

Но я не могу этого сделать. Я пробовал все правители на github, но у них работает только тег тела.

К сожалению, для увеличения или уменьшения изображения нет документов.

Я новый с холстом HTML5, и я застрял. Жду ваших помощников. Благодаря!

Answer 1

Один подход состоит в том, чтобы иметь три отдельных холста, один из которых является основным холстом и по одному для верхних/левых правителей.

При увеличении /, вы установите уровень масштабирования на основной холст, но вам нужно будет перерисовывать правителей вручную, здесь очень простой пример:

function redrawRulers() { 
    topRuler.clear(); 
    leftRuler.clear(); 
    topRuler.setBackgroundColor('#aaa'); 
    leftRuler.setBackgroundColor('#aaa'); 

    zoomLevel = mainCanvas.getZoom(); 

    for (i = 0; i < 600; i += (10 * zoomLevel)) { 
    var topLine = new fabric.Line([i, 25, i, 50], { 
     stroke: 'black', 
     strokeWidth: 1 
    }); 
    topRuler.add(topLine); 
    var leftLine = new fabric.Line([25, i, 50, i], { 
     stroke: 'black', 
     strokeWidth: 1 
    }); 
    leftRuler.add(leftLine); 
    }} 

Fiddle

UPDATE: для правителей, вот некоторые очень простой код, чтобы рисовать фигуры на верхней линейке (манящую также обновлено):

// Numbers 
for (i = 0; i < 600; i += (100 * zoomLevel)) { 
    var text = new fabric.Text((Math.round(i/zoomLevel)).toString(), { 
    left: i, 
    top: 10, 
    fontSize: 8 
    }); 
    topRuler.add(text); 
} 

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

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

$(mainCanvas.wrapperEl).on('mousewheel', function(e) { 
    var dir = e.originalEvent.wheelDelta; 
    if (dir > 0){ 
     var ZoomValue = mainCanvas.getZoom() * 1.2;   

    } else { 
     var ZoomValue = mainCanvas.getZoom() * .83333333333333333; 
    } 

    redrawRulers(); 
    mainCanvas.setZoom(ZoomValue, e); 
    e.originalEvent.returnValue = false; 
}); 

Updated Fiddle For Mouse Scroll