通过 JSON 加载 curvedText 在 fabricJS 1.7.3 中不再有效
Loading curvedText via JSON no longer works in fabricJS 1.7.3
我正在使用 fabricjs 的优秀插件,"curvedText" 来自 https://github.com/EffEPi/fabric.curvedText
这很好用,但是,最近对 fabricjs 的更新使插件停止通过 JSON 加载。以下片段演示了这一点。
除了使用的 fabricJS 版本不同,以下两个片段完全相同。
1.7.2版本:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
1.7.3版本:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
1.7.2。版本工作正常,1.7.3。版本没有。保存过程似乎很好,但加载 JSON 时似乎没有任何反应。
查看 1.7.3 的发行说明 (https://github.com/kangax/fabric.js/releases/tag/v1.7.3) 似乎更改为 :
"Improvement: Better error managment in loadFromJSON #3586"
...可能有责任。有什么想法吗?
额外
没有控制台错误,也没有网络错误。如前所述,除了所使用的结构版本之外,脚本是相同的。我说的 JSON 是由 fabric 本身生成的。这允许保存和加载设计。单击 save/reload 按钮生成 JSON 然后重新加载(作为测试)。加载包含 curvedText
项的 JSON
时加载机制中断。没有消息以任何方式呈现。
好的,终于找到了 fabric.curvedText.js
中的错误。好吧,fabricjs
的 enlivenObjects
函数中的代码已从 1.7.2 更改。到 1.7.3。导致 curvedText 对象停止加载。
如果将 fabric.CurvedText 中的 fromObject
代码更改为:
fabric.CurvedText.fromObject=function (object)
{
return new fabric.CurvedText(object.text, clone(object));
};
对此:
fabric.CurvedText.fromObject=function (object, callback)
{
var newObject = new fabric.CurvedText(object.text, clone(object));
if(typeof callback !== "undefined")
callback(newObject, false);
else
return(newObject);
};
然后加载就可以了。希望这对其他人有帮助!
我正在使用 fabricjs 的优秀插件,"curvedText" 来自 https://github.com/EffEPi/fabric.curvedText
这很好用,但是,最近对 fabricjs 的更新使插件停止通过 JSON 加载。以下片段演示了这一点。
除了使用的 fabricJS 版本不同,以下两个片段完全相同。
1.7.2版本:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
1.7.3版本:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
1.7.2。版本工作正常,1.7.3。版本没有。保存过程似乎很好,但加载 JSON 时似乎没有任何反应。
查看 1.7.3 的发行说明 (https://github.com/kangax/fabric.js/releases/tag/v1.7.3) 似乎更改为 :
"Improvement: Better error managment in loadFromJSON #3586"
...可能有责任。有什么想法吗?
额外
没有控制台错误,也没有网络错误。如前所述,除了所使用的结构版本之外,脚本是相同的。我说的 JSON 是由 fabric 本身生成的。这允许保存和加载设计。单击 save/reload 按钮生成 JSON 然后重新加载(作为测试)。加载包含 curvedText
项的 JSON
时加载机制中断。没有消息以任何方式呈现。
好的,终于找到了 fabric.curvedText.js
中的错误。好吧,fabricjs
的 enlivenObjects
函数中的代码已从 1.7.2 更改。到 1.7.3。导致 curvedText 对象停止加载。
如果将 fabric.CurvedText 中的 fromObject
代码更改为:
fabric.CurvedText.fromObject=function (object)
{
return new fabric.CurvedText(object.text, clone(object));
};
对此:
fabric.CurvedText.fromObject=function (object, callback)
{
var newObject = new fabric.CurvedText(object.text, clone(object));
if(typeof callback !== "undefined")
callback(newObject, false);
else
return(newObject);
};
然后加载就可以了。希望这对其他人有帮助!