Fabric js中的画布客户端大小答案

【问题标题】：Canvas client size in fabric jsFabric js中的画布客户端大小
【发布时间】：2018-11-12 20:12:58
【问题描述】：

在通常的画布 css 宽度和客户端宽度可能不相等，如何在 Fabricjs 上得到这个？举个例子：我想在一个页面上有 640*360px 的画布，里面有 1280*720px 的图像。我知道我可以缩放图像，但 dataUrl 会给我一个更小的图片，不是吗？

【问题讨论】：

标签： fabricjs

【解决方案1】：

有一个solution。您可以使用 CSS 尺寸初始化 Fabric.js，然后使用 backstoreOnly 标志初始化 setDimensions，或者使用所需的客户端尺寸初始化并使用 setDimensions 和 cssOnly 标志。示例 #1：

var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});

示例 #2：

var canvas = new fabric.Canvas('c', {width: 1280, height: 720});
canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});

【讨论】：

您能否详细说明我正面临这个问题。 stackoverflow.com/questions/54237296/…
当我使用下面的代码对象变得模糊。 var canvas = new fabric.Canvas('c', {width: 240px, height: 300px}); canvas.setDimensions({width: '480px', height: '600px'}, {cssOnly: true});
@ChiragPatel 在这种情况下，您的画布网格将为 240*300，但页面上的画布元素将为 480*600。您设置的第一个坐标 - 是绘图坐标，您冷制作线 (0;0) -> (240;300) 它将跨越整个画布，无论实际画布的大小。
非常感谢！

【解决方案2】：

您可以使用画布http://fabricjs.com/docs/fabric.StaticCanvas.html#setWidth 的setWidth/setHeight 属性更改画布的大小

例如

canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(360);

虽然你应该澄清你的意思。

【讨论】：

这是 css 大小。如果更改它，页面上的画布将更改大小。看到那个小提琴：jsfiddle.net/IceCreamYou/whL8fu71
我不明白，我们在谈论fabricjs，那么这与默认画布有什么关系？
也许是因为我在询问 fabricjs 中的这个默认画布功能？
fabricjs 上的默认 css 属性不起作用......这就是为什么你有这些方法。
这就是我询问 css 大小和客户端大小的原因。我需要以响应大小（在页面加载时由 js 计算）在画布上保存图像的位置。 setWidth 和 setHeight 更改 css 和客户端大小。 720p 图像会溢出 640*360 画布。就像我之前写的那样，我可以为图像设置scale，但是 1. 画布大小是响应式的，因此每次缩放可能不同 2. 裁剪后的图像将小于原始未缩放的裁剪图像。