Fabric JS中的画布客户端大小 [英] Canvas client size in fabric js

问题描述

在通常的画布中CSS宽度和客户端宽度可能彼此不相等，如何在Fabricjs上获得此宽度?例如:我要在页面上放置640 * 360px画布，并在其中放置1280 * 720px的图像. 我知道我可以缩放图像，但是dataUrl会给我一张较小的图片，不是吗?

In a usual canvas css width and client width could be not equal to each other, how to get this on Fabricjs? As an example: I want 640*360px canvas on a page with 1280*720px image inside. I know I could scale image, but dataUrl will give me a smaller picture, isn't it?

推荐答案

有一个解决方案.您可以使用CSS大小来初始化Fabric.js，然后使用backstoreOnly标志来初始化setDimensions，或者使用所需的客户端大小来初始化，然后将setDimensions与cssOnly标志一起使用. 范例1:

There is a solution. You could init Fabric.js with CSS sizes and then setDimensions with backstoreOnly flag or init with desired client size and use setDimensions with cssOnly flag. Example #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});

这篇关于Fabric JS中的画布客户端大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！