fabric.js - fontsize limit

时间:2015-01-05 09:15:28

标签: jquery canvas fabricjs

在高分辨率下使用dataToURL函数进行打印时,我遇到fabric.js(1.4.0)和fontsize的问题。

当我在画布上将文本缩放为大并且dataToURL有一个乘数来将结果缩放到300dpi时,结果中的文本出错了。结果是由ajax发送到php脚本以在服务器上呈现图像。画布为430x430px,原始图像为4700px。

如果fontsize足够大,文本在结果中不会变大,只有字母之间的间距越来越大。如果font-size不是那么大,那么结果是正确的。

我做了一个简单的例子:http://jsfiddle.net/403e18m8/1/

$('#save').on('click', function() {
    var multiplier = 10;

    canvas.deactivateAll(); 
    canvas.setBackgroundColor('#FFFFFF');

    var dataURL = canvas.toDataURL({
        format: 'jpg',
        multiplier: multiplier
    });
    window.open(dataURL);
});

canvas = new fabric.Canvas('canvas');

canvas.setWidth(430);
canvas.setHeight(430);

var textObject = new fabric.Text('123', {
    fontFamily: 'Arial',
    textAlign: 'left',
    left: 10,
    top: 10,
    fontSize: 60,
    scaleX: 4,
    scaleY: 4
});

canvas.add(textObject);
canvas.renderAll();

使用保存按钮后创建的图像不正确。如果我将scaleX / Y更改为1或2就可以了。

知道如何避免这种情况吗? 或者也许如何获得最大支持的fontsize并且不允许它变大?

1 个答案:

答案 0 :(得分:0)

由于它似乎是Firefox限制,我正在观察缩放事件并停在最大定义的范围内。