我使用此代码将 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 的某些宽度和高度非常有效,但不适用于所有比例。
最佳答案
您需要从用于计算的基本尺寸开始,例如代码中的 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 - 如何相对于 Canvas 大小javascript定位对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36270415/