问题描述
出于良好的用户交互目的,我需要将大画布显示为较小的画布,但稍后再上传大画布.我正在使用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:
当我尝试如下调整大小时,它使画布为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调整画布/缩放大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!