Question

在HTML/CSS我们可以通过以下方式将孩子与父母的任何一方对齐：top，right，left，bottom

这可以应用于canvas＆＃39; s上的矩形，线等。或者他们是一种在定位中使用百分比的方法吗？

我的最终目标是获得一个矩形，其位置会捕捉到画布的右侧，并在画布调整大小时保持其位置。

我无法找到解决方法。

这就是我正在使用它。

ctx.rect(20,20,150,100);

Answer 1

Html＆amp; CSS可以重新定位子元素，因为这些子元素的定义保存在Document Object 模型（DOM）中。

Html Canvas元素不保存它自己绘制的任何矩形，线条等的定义。因此，它无法“调用”您的矩形来重新定位它。对于Canvas，您的矩形在其位图显示上变为未记忆的像素。

要重新定位矩形，您必须使用代码手动“记住”其定义。这通常通过将矩形的定义保存在这样的javascript对象中来完成：

var myRect={
    x:20,
    y:20,
    width:150,
    height:100,
}

当您想要重新定位画布矩形时（就像您希望它“粘贴”到调整大小的画布一样），您：

调整画布大小。（注意：调整canvas元素的大小会自动清除其内容）。
计算新的[x，y]，使您的矩形“卡在”画布的右侧。如果您希望矩形贴在右侧，请重新计算：var newX=canvas.width-myRect.width
将myRect中的[x，y]更改为新的x，y值。
使用myRect在新的所需位置重绘您的矩形。

这是带注释的示例代码和演示：

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// the definition of your rectangle 
// (this definition is used when your rectangle must be redrawn)
var myRect={
  x:20,
  y:20,
  width:150,
  height:100,
}

// call helper function to reset your rectangle's "x"
// so it's positioned to the right side
stickRight(myRect);

// call helper function to redraw your rectangle
redrawRect(myRect);

// listen for changes in the html slider that resizes the canvas
$myslider=$('#myslider');
$myslider.change(function(){

  // fetch the scaling factor the user has specified with the slider
  var scale=parseInt($(this).val());

  // resize the canvas to the specified size
  // NOTE: resizing the canvas automatically erases all content
  canvas.width=cw*scale/100;
  canvas.height=ch*scale/100;

  // again call helper function to reset your rectangle's "x"
  // so it's positioned to the right side
  stickRight(myRect);

  // call helper function to redraw your rectangle
  redrawRect(myRect);
});


function stickRight(rect){
  rect.x=canvas.width-myRect.width;
}

function redrawRect(rect){
  ctx.beginPath();
  ctx.rect(rect.x,rect.y,rect.width,rect.height);
  ctx.stroke()
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Resize: <input id=myslider type=range min=0 max=200 value=100><br>
<canvas id="canvas" width=300 height=300></canvas>

HTML / JS如何相对于父canvas元素的“any”侧定位矩形

1 个答案: