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

【问题标题】：How to position Objects relative to canvas size javascript?如何相对于画布大小javascript定位对象？
【发布时间】：2019-03-03 17:54:22
【问题描述】：

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

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

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

【问题讨论】：

我不确定我是否理解，但您不应该在字体比例中使用basey 吗？ (var ratio = schwerf / basex;) 因为字体大小是基于字体高度，而不是宽度。
那是真的，谢谢我昨晚凌晨 4 点写的，我想知道为什么它实际上仍然有效，但位置无效
字体占据一个矩形，而字符串将返回它所占用的尺寸的矩形。也许两者都有一个 var ratio = schwerf / basex;和 var ratio = schwerf / basey;如果您想使用极端的画布尺寸，则需要解决方案。
所以任何人都知道如何计算与画布大小相关的坐标的解决方案？

标签： javascript html canvas

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

优点和缺点

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

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

【讨论】：