Question

我有两个盒子放在我试图居中的画布上。您可以在JS小提琴上查看：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放在画布的中心，这取决于我是否点击＆＃34;转到框1和＃34;或＆＃34;转到方框2＆＃34; （请参阅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);
  });
});

目前，点击其中任何一个＆＃34;转到方框1＆＃34;或＆＃34;转到方框2＆＃34;虽然在控制台中试验我的公式似乎表明不是这样，但是不会将画布置于Box 1或Box 2的中心。

Answer 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 []数组中的所有rects

将具有指定x / y偏移的所有rects绘制为其原始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);
    }
}

单击按钮时，计算将指定矩形拉到画布中心所需的偏移量

然后使用计算的偏移量重新绘制所有rects。

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);
}

使用HTML5将两个画布方块设置到画布的中心

1 个答案: