fabric.js - 字体大小限制
fabric.js - fontsize limit
我在使用高分辨率打印 dataToURL 函数时 fabric.js (1.4.0) 和字体大小有问题。
当我在 canvas 上将文本缩放到大并且 dataToURL 有一个乘数来将结果放大到 300dpi 时,结果中的文本出错了。结果由 ajax 发送到 php 脚本以在服务器上呈现图像。 canvas 为 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 没问题。
知道如何避免这种情况吗?
或者如何获得支持的最大字体大小并禁止使其变大?
因为这似乎是 Firefox 的限制,我正在观察缩放事件并在最大定义的缩放处停止。
我在使用高分辨率打印 dataToURL 函数时 fabric.js (1.4.0) 和字体大小有问题。
当我在 canvas 上将文本缩放到大并且 dataToURL 有一个乘数来将结果放大到 300dpi 时,结果中的文本出错了。结果由 ajax 发送到 php 脚本以在服务器上呈现图像。 canvas 为 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 没问题。
知道如何避免这种情况吗? 或者如何获得支持的最大字体大小并禁止使其变大?
因为这似乎是 Firefox 的限制,我正在观察缩放事件并在最大定义的缩放处停止。