基于图像分辨率和用户大小输入计算字体大小
我有一个项目和一个基于canvas.js的字体缩放问题。
项目细节：
基于javascript
- convas的
- 基于node.js
- 使用vue.js /vue.js实现vue
问题：
我从工作中的一名前雇员那里拿了一个项目。用户可以选择上传图像，并将其显示在画布上作为背景(它是一种木制品)。他无法上传图片或文本并将其放置在上面。当用户上传产品图像时，他可以将其高度和宽度指定为值(cm)。
接下来，他可以在其上放置一个文本元素(画布)，并设置字体大小(在“pt”中)。问题是，我必须从用户输入的产品背景(24cmx21cm)中缩放相对于产品大小的字体。
因此，有以下值：
具有分辨率的
- 背景图像：大小:24x21 14
- 字体大小供选择: 14，16，.(在pt中)-认为我必须在px中设置画布的值，但这可以计算。
如何缩放字体相对于实际雕刻的产品具有正确字体大小并且在画布中也正确显示的值？
我的前雇员在项目中有休假跟随计算(字体大小以毫米为单位)：
设fontFactor =(图像高度950 of * 10) /产品高度21 of * 100
设fontSize (毫米)= fontValue 16,18.* fontFactor
回答 1
Stack Overflow用户
发布于 2020-03-05 21:35:19
线性标度
只要你建立象素和你正在工作的尺度之间的关系，就可以直接进行缩放来匹配给定的维度。
例如，图像大小和具有代表性的物理大小可以表示为
const imageSize = {
cm: {width: 24, height: 21},
px: {width: 1200, height: 950},
cm2px: {width: 1200 / 24, height: 950 / 21},
px2cm: {width: 24 / 1200, height: 21 / 950},
};给出画布和实物的大小，以及它们之间的转换尺度。
这样，并且知道“点”和" cm“之间的比例关系为1pt = 0.0353，就可以缩放画布文本，以匹配画布厘米尺度中的点大小。
使用上述信息缩放并呈现从"px“到"point”的
const pt2cm = 0.0353;
const textPointSize = 38;
ctx.font = textPointSize + "px arial"; // In px (pixels)
const xScale = pt2cm * imageSize.cm2px.width;
const yScale = pt2cm * imageSize.cm2px.height;
ctx.setTransform(xScale, 0, 0, yScale, 100, 100);
ctx.fillText("38pt text", 0, 0);示例
该示例创建一个画布并绘制一个cm网格。然后在画布上绘制不同大小的字体。
函数drawText以点表示字体大小，文本位置以cm为单位。
38 in文本在画布图像的比例尺上大约有13毫米高，点大小为0.0352778cm。
const ctx = canvas.getContext("2d");
const imageSize = {
cm: {width: 24, height: 21},
px: {width: 1200, height: 950},
cm2px: {width: 1200 / 24, height: 950 / 21},
px2cm: {width: 24 / 1200, height: 21 / 950},
};
const pt2cm = 0.0352778;
canvas.width = imageSize.px.width;
canvas.height = imageSize.px.height;
drawGrid();
for (let i = 10; i < 40; i += 4) {
drawText("Test text "+i+"pt", i, 3, 1 + (i - 10) / 2);
}
function drawText(text, sizePt, xCm, yCm) {
const x = imageSize.cm2px.width * xCm;
const y = imageSize.cm2px.height * yCm;
ctx.font = sizePt+"px Arial";
ctx.textAlign = "left";
ctx.textBaseline = "top"
ctx.fillStyle = "#000";
const xs = pt2cm * imageSize.cm2px.width;
const ys = pt2cm * imageSize.cm2px.height;
ctx.setTransform(xs, 0, 0, ys, x, y);
ctx.fillText(text, 0, 0);
ctx.setTransform(1,0,0,1,0,0);
}
// Draws a grid
function drawGrid() {
const w = imageSize.px.width;
const h = imageSize.px.height;
const sx = imageSize.cm2px.width;
const sy = imageSize.cm2px.height;
ctx.globalAlpha = 0.3;
ctx.fillStyle = "#aaa";
ctx.beginPath();
for(let i = 0; i < Math.max(imageSize.cm.height, imageSize.cm.width) * 5; i += 1) {
if (i % 5) {
ctx.rect(0, i * sy / 5 | 0, w, 1);
ctx.rect(i * sx / 5 | 0, 0, 1, h);
}
}
ctx.fill();
ctx.fillStyle = "#000";
ctx.beginPath();
for(let i = 0; i < Math.max(imageSize.cm.height, imageSize.cm.width); i += 1) {
ctx.rect(0, i * sy | 0, w, 1);
ctx.rect(i * sx | 0, 0, 1, h);
}
ctx.fill();
ctx.globalAlpha = 1;
ctx.font = "12px arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#000";
ctx.strokeStyle = "#FFF";
ctx.lineWidth = 4;
ctx.strokeText("cm", 12, 10);
ctx.fillText("cm", 12, 10);
for(let i = 1; i < Math.max(imageSize.cm.height, imageSize.cm.width); i += 1) {
ctx.strokeText(i, 10, i * sy);
ctx.strokeText(i, i * sx, 10);
ctx.fillText(i, 10, i * sy);
ctx.fillText(i, i * sx, 10);
}
}<canvas id="canvas"></canvas>
注意到的物理尺寸和像素大小不匹配，因此画布比例尺向y方向拉伸。
要获得一个方的方面，您应该只使用一个刻度的x和y比例，或改变画布的大小，以匹配物理方面。
https://stackoverflow.com/questions/60551520
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号