织物.js调整画布大小以适合屏幕

fabric.js resize canvas to fit screen

本文关键字：屏幕 布大小 js 调整 织物      更新时间：2023-09-26

我目前正在移动设备（Android和iPhone）上开发一个带有Ionic和cordova的应用程序。我想编辑一张图片。我使用织物.js库来做到这一点。织物.js将图像和其他项目转换为画布。然后我在画布上添加一些图像（贴纸）并将其导出为图像（数据URL）。因此，画布的大小非常重要，因为它是一个质量因素（基于小画布导出图像会导致质量不佳）。画布尺寸约为 607*1080 像素（取决于拍摄照片的设备）。我想在不损失质量的情况下将其放入屏幕（如下所述，我无法在不损失质量的情况下调整画布大小）。

我尝试了 3 个想法，但没有人奏效。

    调整画布大小
  1. ：导致质量损失（导出的图像将具有画布大小）
    2. 适应视口
  2. ：科尔多瓦不允许在移动设备上更改视口。有一个解决方法，但它会破坏我的设计（非常小的导航栏，较小的菜单，...
  3. 使用 CSS3 缩放属性 ：它在桌面上就像一个魅力，但在移动设备上存在事件映射问题（我没有在 ios 上尝试，但问题发生在 android Webview 上）。事件映射不会缩放。画布已缩小，但无法与画布元素交互。如果画布元素（贴纸）位于 x：100 y：100，当我将缩放属性设置为 0.5 时，该元素的位置将位于 （50,50） 处，不再位于 （100,100）。有没有办法根据安卓网络视图的缩放属性更正事件映射？

我不知道是否有其他方法可以做到这一点，但我被这个问题困住了 3 天，我花了很多时间在论坛、fabricjs 文档和谷歌上，我没有找到任何可行的解决方案或其他可以帮助我的东西。

编辑：下面有2个工作解决方案。检查我的答案，看看如何使用 css 做到这一点。

1. 使用 css 为画布设置正确的分辨率：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;

.css：

/* media query 1 */
    #canvas{
       width: 400px;
       height: 250px; 
    }
/* media query 2 */
#canvas{
       width: 200px;
       height: 120px; 
    }

优点：

所有分辨率均由画布宽度和高度（800/600）给出

缺点：

非常适合方形画布宽高比 （1：1），输出问题 对于需要计算 CSS 高度的奇怪纵横比 基于 

original height / original width * new width = new height;

这超出了我在 CSS 中的联盟...

前段时间阅读了织物.js git 问题部分，其中，技术 （CSS 调整大小）不建议使用，因为速度慢且对象不正确 交易，这可能会改变我知道我测试过并且对象是 重新调整大小不正确（随机彩色像素，交易阴影仍然存在 在画布上，换句话说就是一团糟）

2. 在需要提交时将画布调整为精确的尺寸（分辨率），然后生成图像

只需在窗口调整大小（响应式画布）时重新调整画布大小，当您需要导出到精确尺寸时，您需要将画布大小调整为精确的像素分辨率，或创建另一个隐藏的画布。

此示例适用于 1：1 比例画布（您需要将纵横比应用于画布和内部对象）：

$(window).resize(function (){
 if (canvas.width != $(".container").width()) {
            var scaleMultiplier = $(".container").width() / canvas.width;
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                objects[i].left = objects[i].left * scaleMultiplier;
                objects[i].top = objects[i].top * scaleMultiplier;
                objects[i].setCoords();
            }
            canvas.setWidth(canvas.getWidth() * scaleMultiplier);
            canvas.setHeight(canvas.getHeight() * scaleMultiplier);
            canvas.renderAll();
            canvas.calcOffset();
        }
});

在提交导出画布数据时，将画布大小调整为所需的分辨率，瞧：

function GetCanvasAtResoution(newWidth)
  {
    if (canvas.width != newWidth) {
                var scaleMultiplier = newWidth / canvas.width;
                var objects = canvas.getObjects();
                for (var i in objects) {
                    objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                    objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                    objects[i].left = objects[i].left * scaleMultiplier;
                    objects[i].top = objects[i].top * scaleMultiplier;
                    objects[i].setCoords();
                }
                canvas.setWidth(canvas.getWidth() * scaleMultiplier);
                canvas.setHeight(canvas.getHeight() * scaleMultiplier);
                canvas.renderAll();
                canvas.calcOffset();
            }
     return canvas.toDataURL();
   }
   );
与 1：

1 的口粮不同，这没什么大不了的，您还需要计算高度的比例多人游戏，易于理解的比例：http://andrew.hedges.name/experiments/aspect_ratio/

我找到了一个技巧来做到这一点，而不必复制画布。此解决方案非常接近 css 缩放属性，但事件处理正确。

下面是显示画布一半大小的示例：

-webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;
相关文章：