我正在创建一个横幅设计创建器(这样人们就可以使用自己的文本、背景、图像、形状等来制作自己的设计)。我的产品有各种尺寸,例如: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});
最佳答案
这是让横幅创建者响应显示尺寸的一种方法:
计算使横幅适合显示尺寸所需的比例缩放系数。
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 大小(现在它适合显示屏,但比例与横幅相同)。
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);
用户将文本放置在缩小的 Canvas 上后,您可以通过将鼠标坐标除以缩放系数,将其鼠标位置转换回“现实世界”坐标。
// convert mouse coordinates back to coordinates on the real banner size var realBannerX = mouseX/scaleFactor; var realBannerY = mouseY/scaleFactor;
关于javascript - 横幅设计创建者 - 测量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32159227/