无法使用Fabric.js调整画布/缩放大小 [英] Can't resize canvas/scale using Fabric.js

问题描述

出于良好的用户交互目的，我需要将大画布显示为较小的画布，但稍后再上传大画布.我正在使用Fabric.js，并尝试使用Canvas css技巧，在HTML中设置画布的宽度/高度，然后通过CSS将其设置为较小的宽度/高度，如此处所述:

I need to display a large canvas as a smaller one for the purposes of good user interaction, but uploading a large canvas later. I am using Fabric.js and am trying the Canvas css trick where you set the width/height for the canvas in HTML and then set it via CSS to smaller one as documented here:

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

当我尝试如下调整大小时，它使画布为300x150(默认画布)，并且不尊重我的CSS.

When I attempt to resize as follows, it makes the canvas 300x150 (default canvas) and doesn't respect my CSS.

HTML:

<canvas id="c"></canvas>

JavaScript:

JavaScript:

var canvas = new fabric.Canvas('c', {
        });

canvas.width = 1000;
canvas.height = 1000;

CSS:

#c {
    width: 650px;
    height: 436px;
}

如何通过fabric.js调整与用户交互的画布的尺寸"，同时保持较大画布的实际尺寸"?我也在使用引导程序，不确定是否会产生任何影响.

How can I adjust the "size" of the canvas the user interacts with while maintaining the "actual size" of the larger canvas via fabric.js? I am using bootstrap as well and am unsure if this would have any impact.

推荐答案

将您的JavaScript代码替换为:

Replace your javascript code with:

 var canvas = new fabric.Canvas('c', {});  
    canvas.setWidth(1000) ;  
    canvas.setHeight(1000);

这篇关于无法使用Fabric.js调整画布/缩放大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！