Question

我正在创建一个横幅设计创建者（因此人们可以使用它自己的文本，背景，图像，形状等来制作自己的设计）。我有各种尺寸的产品，例如：800x2000毫米，A4（210 x 297毫米），3300x2200毫米。

用于绘画我使用html canvas。我一直在调整画布的大小。如何通过适当的用户体验处理不同的测量结果的最佳方法是什么？（宽度为3300的画布不太好）。

目前我有这段代码：

var proportion = variant.width >= variant.height ? variant.width / variant.height : variant.height / variant.width;
canvas.setDimensions({width: variant.width * proportion, height: variant.height * proportion});

Answer 1

这是让横幅广告制作者对展示尺寸做出响应的一种方法：

计算使横幅适合显示尺寸所需的比例缩放系数。

var displayWidth=1366;
var displayHeight=768;
var bannerWidth=3300;
var bannerHeight=2200;

// calculate the scaling factor required to make the banner fit on the display
var scalingFactor = Math.min((displayWidth/bannerWidth),(displayHeight/bannerHeight));

调整画布大小（它现在适合显示，但与横幅的比例相同）。

canvas.width=bannerWidth*scalingFactor;
canvas.height=bannerHeight*scalingFactor;

在横幅上应用背景颜色（如果需要）。

context.fillStyle='Gainsboro';
context.fillRect(0,0,canvas.width,canvas.height);

将缩放系数应用于实际的横幅文字字体大小。

// Scale a real banner 300pt font to display proportionally on the canvas
// The text on the canvas will be proportionally sized to the real banner size
var fontSizeInPoints=300;
fontSizeInPoints*=scalingFactor;
context.font=fontSizeInPoints+'pt Verdana';

让用户在横幅上定位文字。

// draw the text "Fun!" at the mouse position
context.textAlign='left';
context.textBaseline='top';
context.fillText('Fun!',mouseX,mouseY);

用户将文本放在缩小的画布上后，您可以通过将鼠标坐标除以缩放系数，将鼠标位置转换回“真实世界”坐标。

// convert mouse coordinates back to coordinates on the real banner size
var realBannerX = mouseX/scaleFactor;
var realBannerY = mouseY/scaleFactor;

横幅设计创作者 - 测量

1 个答案: