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

利弊

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

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

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

1 个答案:

利弊