Установите два квадрата холста в центр холста с помощью HTML5

#javascript #html #canvas #centering

#javascript #HTML #холст #центрирование

Вопрос:

У меня есть два поля, расположенные на холсте, которые я пытаюсь центрировать. Вы можете просмотреть это в JS fiddle: http://jsfiddle.net/FVU47/5 /

Мой холст имеет высоту 1000 и ширину 1000 следующим образом:

 <canvas id="myCanvas" width="1000" height="1000" style="border:3px solid #385D8A; outline:1px solid #7592B5; margin-left: 0px; margin-top: 0px; background-color: #B9CDE5"></canvas>

Затем я пытаюсь центрировать два блока с помощью следующего кода, который поместит либо box1, либо box2 в центр холста, в зависимости от того, нажимаю ли я «Перейти к блоку 1» или «Перейти к блоку 2» (см. Нижнюю часть квадранта результатов JSFiddle:

 $(document).ready(function(){
  $("#box1click").click(function(){
    if (rect1.x <= 500) {
      positionWidthSet = Math.abs(rect1.x - canvas.width/2)   rect1.x;
    }
    else{
      positionWidthSet = Math.abs(Math.abs(rect1.x - canvas.width/2)   rect1.x)
    }
    if (rect1.y >= 500) {
      positionHeightSet = Math.abs(rect1.y -canvas.height/2);
    }
    else{
      positionHeightSet = Math.abs(Math.abs(rect1.y - canvas.height/2)   rect1.y);
    }

    positionCanvasContext(positionWidthSet,positionHeightSet);
  });
});


$(document).ready(function(){
  $("#box2click").click(function(){
     if (rect2.x <= 500) {
      positionWidthSet = Math.abs(rect2.x - canvas.width/2)   rect2.x;
    }
    else{
      positionWidthSet = Math.abs(Math.abs(rect2.x - canvas.width/2)   rect2.x)
    }
    if (rect2.y >= 500) {
      positionHeightSet = Math.abs(rect2.y -canvas.height/2);
    }
    else{
      positionHeightSet = Math.abs(Math.abs(rect2.y - canvas.height/2)   rect2.y);
    }

    positionCanvasContext(positionWidthSet,positionHeightSet);
  });
});

В настоящее время нажатие кнопки «Перейти к блоку 1» или «Перейти к блоку 2» не центрирует холст вокруг блока 1 или блока 2, хотя эксперименты с моими формулами в консоли, по-видимому, указывают на обратное.

1. Почему у вас есть 2 document.ready функции рядом друг с другом? jQuery-ers… Я тебе говорю…

2. Мои комментарии по этому вопросу намного выходят за рамки этого вопроса. Я бы хотел, чтобы ты присоединился ко мне в чате, но меня забанили на день, лол

3. Я уменьшил его до одного document.ready .

Ответ №1:

Вот один из способов: http://jsfiddle.net/m1erickson/GpMsk /

Поместите все ваши прямоугольники в массив:

 var rects=[];

rects.push({
  x: 103,
  y: 262,
  w: 200,
  h: 100,
  fillStyle: 'red',
  hovered: false
});

rects.push({
  x: 484,
  y: 170,
  w: 200,
  h: 100,
  fillStyle: 'blue',
  hovered: false
});

Создайте функцию draw(), которая рисует все прямоугольники в массиве rects[]

Нарисуйте все прямоугольники с указанным смещением x / y к их исходному x / y:

 function draw(offsetX,offsetY){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i  ){
        var r=rects[i];
        ctx.fillStyle=r.fillStyle;
        ctx.fillRect(r.x offsetX,r.y offsetY,r.w,r.h);
    }
}

При нажатии кнопки вычислите смещения, необходимые для перемещения указанного прямоугольника в центр холста

Затем перерисуйте все прямоугольники с вычисленными смещениями.

 var centerX=canvas.width/2;
var centerY=canvas.height/2;

function centerThisRect(rectsIndex){
    var r=rects[rectsIndex];
    var offsetX=centerX-r.x-r.w/2;
    var offsetY=centerY-r.y-r.h/2;
    draw(offsetX,offsetY);
}