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

How to position Objects relative to canvas size javascript?

本文关键字：javascript 定位 对象 布大小 相对于      更新时间：2023-09-26

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

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

这对于字体大小和画布的某些宽度和高度非常有效，但并非适用于所有比例。

您需要从用于计算的基本大小开始，比如代码中的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循环处理它们。

在字体的情况下，您可能会使用转换-可以在不使用的情况下近似大小-这里是一种可以与边界框一起使用的方法，用于定义文本应该适合的区域（使用基本大小和text/base字体预定义。获取字体高度的方法显示在同一链接中）。

优点和缺点

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

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

相关文章：