javascript - 横幅设计创建者 - 测量

Question

我正在创建一个横幅设计创建器(这样人们就可以使用自己的文本、背景、图像、形状等来制作自己的设计)。我的产品有各种尺寸，例如:800x2000 mm、A4(210 x 297mm)、3300x2200mm。

对于绘画，我使用 html canvas。我坚持调整 Canvas 的大小。以适当的用户体验处理不同测量的最佳方法是什么？ (宽度为 3300 的 Canvas 不太好)。

目前我有这个代码:

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

这是让横幅创建者响应显示尺寸的一种方法:

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));
   

2. 调整 Canvas 大小(现在它适合显示屏，但比例与横幅相同)。

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

3. 为横幅应用背景颜色(如果需要)。

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

4. 将缩放系数应用到实际横幅文本字体大小。

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

5. 让用户在横幅上放置文本。

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

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

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