javascript - 如何相对于 Canvas 大小javascript定位对象？

Question

我使用此代码将 Canvas 的宽度和高度调整为浏览器视口(viewport)的大小

function scaleCanvas(){
    c.width = Math.max(document.documentElement.clientWidth,  window.innerWidth || 0); 
    c.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    drawMenu();
}

它的效果非常好，但现在我想将我的对象文本等的坐标与我尝试过的 Canvas 的大小相关

// Canvas grösse
c.width = 1280;
c.height = 720;
// Text Schwer
var schwerx = 890;
var schwery = 52;
var schwerw = 100;
var schwerh = 30;
var schwerf = 22;
// Basis Höhe und Breite
var basex = 1280;
var basey = 720;
// Function Schwer
 function schwer(){
  var rx = schwerx / basex;
  var x = rx * c.width;
  var ry = schwery / basey;
  var y = ry * c.height;
  var rw = schwerw / basex;
  var w = rw * c.width;
  var rh = schwerh / basey;
  var h = rh * c.height;
   ctx.save();
   ctx.rotate(16.3*Math.PI/180);
   ctx.font = getFont();
   ctx.fillStyle = "#feec47";
   ctx.fillText('SCHWER', x, y, w, h);
   ctx.restore();
   function getFont() {
    var ratio = schwerf / basex;   
    var size = c.width * ratio;   
    return (size|0) + 'px Pokemon'; 
    }
}

这对于字体大小以及 Canvas 的某些宽度和高度非常有效，但不适用于所有比例。

Answer 1

您需要从用于计算的基本尺寸开始，例如代码中的 1280x720。

从那里您需要两个因素，一个用于水平缩放，一个用于垂直缩放。

使用基本尺寸标准化当前尺寸 - 这将是您用于缩放两个尺寸的比例因子:

var factorX = newWidth / baseWidth;
var factorY = newHeight / baseHeight;

您现在可以使用以下两种方法之一进行缩放:任一缩放都会转换上下文的缩放比例:

ctx.setTransform(factorX, 0, 0, factorY, 0, 0);

或者生成现有点的新临时点:

var schwerx = 890;
var schwery = 52;
var nSchwerx *= factorX;
var nSchwery *= factorY;
etc...

如果可以方便地将这些坐标存储在对象或数组中，以便可以使用 for 循环对其进行处理。

对于字体，您可能会使用转换 - 可以近似大小而无需 - here 是一种可以与边界框一起使用来定义文本应适合的区域的方法(使用基本尺寸和文本/基本字体进行预定义。获取字体高度的方法如上所示)链接)。

优点和缺点

两者各有利弊:变换矩阵可以轻松缩放到任何大小，而无需对现有坐标做太多处理。然而，它也会对图形进行插值/重新采样，因此在较大的因素下，事情会开始看起来模糊，文本可能看起来被挤压等。

缩放坐标(路径)将获得完整的质量，但需要更多步骤并保持原始坐标。让文本适合也更复杂，因为其大小基于高度和宽度。宽度相对于高度也可能是非线性的，具体取决于字体以及它在所使用的高度上的优化方式，因此需要特殊处理。