javascript 使用fabric js调整画布大小

Resize the canvas with fabric js

提问by Rohan210

The application lets user save the designs and post it so other users can view it later.

该应用程序允许用户保存设计并将其发布，以便其他用户可以稍后查看。

The original canvas saved with the proportions of width=700 and height=600. But when displaying the canvas, I want to resize the canvas to fit into dimensions of (350,300). half of the original. But if I directly apply those dimensions and load width setWidth() and setHeight() it loads with original proportions.

原始画布以宽=700 和高=600 的比例保存。但是在显示画布时，我想调整画布的大小以适应 (350,300) 的尺寸。原来的一半。但是如果我直接应用这些尺寸并加载宽度 setWidth() 和 setHeight() 它将以原始比例加载。

All I want is to display the canvas with new dimensions.

我想要的只是显示具有新尺寸的画布。

采纳答案by Kat

Previously answered here.

以前在这里回答过。

I'm not sure what you've been trying, but

我不确定你一直在尝试什么，但是

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

should work fine.

应该工作正常。

回答by JR.

If you are using the library fabric.js, that's not enough.

如果您正在使用库 fabric.js，那还不够。

Considering that 'canvas' is the fabric.js instance object, you should do this to avoid distorsion artifacts:

考虑到 'canvas' 是 fabric.js 实例对象，您应该这样做以避免失真工件：

canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();