Холст, определяющий границу панорамирования, независимо от разрешения экрана и изменения размера холста

Question

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

Поэтому я устанавливаю эти переменные - я исключу логику оси Y, и любое сохранение & восстанавливается для простоты.

var translationX = 0; //This is where to start the clipping region 

Это моя логика рисования. Холст - это изображение, которое нужно нарисовать, bCanvas - это «окно просмотра» для размещения над изображением. Когда я не увеличен, это просто отображает весь холст. Все работает по назначению.

function drawBuffer(){ 

    //If zoomed in I set the clipping region dimensions to half, 
     //having the effect of scaling by 2. 

    if(stateManager.getZoomState() == "zoomIn") 
     bContext.drawImage(canvas,translationX,translationY, 
          bCanvas.width*0.5,bCanvas.height*0.5, 
          0,0, 
          bCanvas.width,bCanvas.height); 


    //Otherwise just draw the image to a scale of 1 
    else 
     bContext.drawImage(canvas,0,0,bCanvas.width,bCanvas.height); 
} 

Это логика для перемещения вырезанной по холсту по оси X, и где проблема - в том состоянии, что государства, когда остановить увеличивающиеся translationX.

function moveClippingRegion(){ 

    if(state is set to zoomed in){ 

     if(Right arrow key is pressed){ 

     //This condition admittedly is just the result of hacking away, but it works 
      // in the sense that I stop incrementing translationX when 
      //at the edge of the canvas 

      if(translationX>= (bCanvas.width -canvas.width) - translationX - 64){ 
       //The -64 literal is definitely a hacking attempt, 
       //but without the clipping region increments two times more than 
       //it should, thus going off the canvas. 

      } 
      else 
       translationX += 16; 

     } 
} 

Ok так это все работает, когда окно не было изменено, так что то, что я ищу некоторое направление, в каком состоянии поставить в том, что весы с bCanvas на изменение размера.

Вот функция изменения размера в случае, если имеет какое-то значение:

 function onResize(){ 

    bCanvas.width = window.innerWidth * 0.60952380952380952380952380952381;  

    bCanvas.height = window.innerHeight * 0.83116883116883116883116883116883; 
    drawBuffer(); 
} 

размеры холста рисунка являются 1024 х 768, так что эти уродливые литералы просто сделать bCanvas те же размеры, что и холст.

Это работает только на моем разрешении экрана, и когда окно не было изменено. Я нахожусь на моем конце witts, пытаясь заставить это работать независимо от разрешения/после изменения размера окна.

И наконец, вот изображение, которое поможет проиллюстрировать проблему, возникающую при разных разрешениях/после изменения размера окна, если размер окна был изменен до действительно небольшого размера, область отсечения даже не перемещается, что следует ожидать с logc в заявлении, если в функции moveClippingRegion .:

Спасибо за чтение этого заранее, любая помощь будет принята с благодарностью!

Answer 1

Рисование холстов может помочь вам.

Должно предоставить вам решение, подобное приведенному ниже. Увидев, что скорость масштабирования - это x2 (.5) половина холста масштабирования и минус левая позиция из холста масштабирования/2 из ширины холста.Или наоборот (головной скребок: P)

var StepRate; // <- your step increment when moving. 
if(translationX >= (canvas.width/2) - (((zoomCanvas.width - canvas.width)/2) + StepRate)){} 
else 
    translationX += StepRate; 

Answer 2

Я делал веб-приложение типа краски, когда сталкивался с чем-то похожим. Вам нужно будет добавить/вычесть смещение сверху/снизу и умножить/разделить высоту/ширину смещения ваших элементов. Там какая-то странная математика, и, к сожалению, потребуется много времени для вас. Вам придется просто играть с цифрами, пока вы не поправите их. Убедитесь, что вы используете смещения, что даст вам фактическую позицию вместо того, что установлено в CSS или JS. Установленные значения не являются действительными числами для расчета размеров элементов & позиций. Я не уверен, что сказать вам о масштабировании, потому что я добавил функцию масштабирования, чтобы я мог манипулировать размерами. Вот фрагмент из моего приложения, в котором будет отображаться хотя бы начальная точка:

$('#pg'+id).mousemove(function(e) { 
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null 
    if (x==null) return; 
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left); 
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top); 

    $('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging 
});