如何相对于画布大小javascript定位对象？

Question

我使用此代码将画布宽度和高度调整为浏览器的视口

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

它的工作真的很棒，但现在我想把我的对象文本的坐标等与我试过的画布的大小相关联

// 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'; 
    }
}

这适用于字体大小以及画布的某些宽度和高度，但不适用于所有比例。

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是一种方法，可以与边界框一起使用来定义文本应该适合的区域（使用基本大小和文本/基础预定义）获取字体高度的方法显示在同一链接中。

利弊

两者都有利弊：变换矩阵可以轻松扩展到任何大小，而无需对现有坐标进行太多操作。但是，它还会对图形进行插值/重采样，因此在较大的因素下，事物看起来会变得模糊，文字看起来可能会受到挤压等。

缩放坐标（路径）将获得完整质量，但需要更多步骤以及维持原始坐标。使文本适应也更复杂，因为它的大小基于高度和宽度。宽度也可以相对于高度是非线性的，这取决于字体以及如何在其使用的高度进行优化，因此需要特殊处理。