创建画布应用程序的原则

Principles of creating a canvas application

本文关键字：原则 应用程序 创建      更新时间：2023-09-26

我创建了一些web应用程序，这些应用程序更多地围绕着画布应用程序，更具体地说，我创建了以下应用程序：

  • 允许用户拖放元素、创建图像并保存它们

现在这样做可能会出现一些问题，例如画布的响应性：

  • 在过去，我创建了响应画布，画布的尺寸会根据用户设备监视器的尺寸而变化，用户可以在任何设备中使用该应用程序
  • 但这造成了设计网页界面的一些困难，以及在facebook中共享图像时的问题，正如大家所知，当在facebook中共享链接时（我创建的应用程序共享链接而不是图像），如果附加的图像不是facebook指定的标准尺寸或比例，则它们将无法正确显示
  • 由于在我的应用程序中创建的图像永远不会有固定的标准尺寸，令人满意的facebook预览是不可能的

我在开发应用程序时是否遵循了正确的原则

我一直希望画布有固定的尺寸，但我一定会给客户想要的，对吧？？

现在我必须创建另一个应用程序，通常的拖放创建图像和其他东西。但这种情况有点不同，现在人们可以在画布上加载自己的图像，并在其中拖放内容。因此，以下是我可能出现的问题：

  • 首先，由于图像是由用户上传的，因此尺寸将是未知的
  • 上传的图像实际上将被视为画布的BG，如果与画布的当前尺寸相比，图像太小或过大、过于矩形或者过度方形，我该怎么办
  • 由于图像应该充当BG，我需要它来填充整个空间，如果它对当前画布尺寸来说太大，我也不会裁剪它的任何部分

HTML5/JS大师是如何解决这个问题的，我真的需要对这个问题有所了解

感谢您的帮助。

您需要的一件事是能够接收任何尺寸的传入图像，并将该图像调整为当前视口（画布显示大小），同时保持纵横比，这样图像就不会失真。这里有一个功能：

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}

当你在屏幕大小的画布上绘制图像时，你使用context.drawImage的缩放版本，如下所示：

var iw=image.width;
var ih=image.height;
var cw=canvas.width;
var ch=canvas.height;
var scale=scalePreserveAspectRatio(iw,ih,cw,ch);
context.drawImage(image, 0,0,iw,ih, 0,0,iw*scale,ih*scale);

是的。。。

如果接收到的图像与画布显示的比例不相同，则图像的某些部分将不适合画布显示。无论如何调整图像大小，方形图像都无法完全放在矩形显示器中。

因此，您必须做出如何处理这种不均衡的设计决策。

  • 在画布的左上角绘制缩放后的图像，使接收到的图像的溢出部分被剪裁。

  • 将缩放后的图像居中放置在画布上，这样可以在图像的外侧对图像进行相等的剪裁。这个想法是，图像中最有趣的部分可能在图像的中心附近，而图像中最不有趣的部分在其侧面。

  • 忘记比例缩放，只垂直缩放图像&水平以精确地适应画布显示尺寸。这将导致图像失真。但是图像的任何部分都不会被剪切掉。如果失真不大，这可能是一个有用的选择。

  • 缩放图像，使整个图像适合画布显示。这将导致画布显示的一部分为空白。这就是电视在宽屏幕电视上显示旧的（方形的）电视节目时经常做的事情

祝你的项目好运！

相关文章：