【问题标题】:fabric.js - fontsize limitfabric.js - 字体大小限制
【发布时间】:2015-01-09 00:16:24
【问题描述】:

在使用高分辨率的 dataToURL 函数进行打印时,fabric.js (1.4.0) 和字体大小存在问题。

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

如果字体大小足够大,结果中的文本不会变大,只有字母之间的间距会增加。如果字体大小不是那么大,则结果是正确的。

我做了一个简单的例子: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 就可以了。

知道如何避免这种情况吗? 或者也许如何获得最大支持的字体大小并禁止使其变大?

【问题讨论】:

  • 还使用来自 github 的最新版本 1.4.13 进行了测试
  • 看起来限制仅在 Firefox (34) 中。 Chrome (35) 没有限制或更高的限制。

标签: jquery canvas fabricjs


【解决方案1】:

由于这似乎是 Firefox 的限制,我正在观察缩放事件并在定义的最大比例处停止。

【讨论】:

    猜你喜欢
    • 2014-02-15
    • 2019-11-13
    • 2013-01-06
    • 2018-04-23
    • 1970-01-01
    • 1970-01-01
    • 2016-04-10
    • 1970-01-01
    • 2013-04-13
    相关资源
    最近更新 更多