javascript - Fabricjs:撤消时不呈现背景图像
问题描述
我正在画布中实现撤消功能,但我被困在背景图像属性上。我正在使用它来保存画布的当前状态
var myjson = JSON.stringify(canvas);
$rootScope.state.push(myjson);
$rootScope.mods++;
在撤消时,我得到这个状态并使用这个代码加载:
$rootScope.undo = function () {
canvas.clear().renderAll();
canvas.loadFromJSON($rootScope.state[$rootScope.mods - 1], function(){
canvas.renderAll();
});
}
一切正常,除了背景图像根本不渲染。请帮忙。
如果有人想看,这是画布状态的 JSON 字符串。
"{\"objects\":[{\"type\":\"i-text\",\"originX\":\"left\",\"originY\":\"top\",\"left\":25,\"top\":25,\"width\":182,\"height\":41.95,\"fill\":\"#000\",\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"text\":\"Heading text\",\"fontSize\":32,\"fontWeight\":800,\"fontFamily\":\"Roboto\",\"fontStyle\":\"\",\"lineHeight\":1.16,\"textDecoration\":\"\",\"textAlign\":\"center\",\"textBackgroundColor\":\"\",\"styles\":{}}],\"background\":\"\",\"backgroundImage\":{\"type\":\"rect\",\"originX\":\"left\",\"originY\":\"top\",\"left\":0,\"top\":0,\"width\":250,\"height\":250,\"fill\":{\"type\":\"linear\",\"coords\":{\"x1\":0,\"y1\":0,\"x2\":125,\"y2\":125},\"colorStops\":[{\"offset\":\"0\",\"color\":\"rgb(210,77,87)\",\"opacity\":1},{\"offset\":\"1\",\"color\":\"rgb(249,191,59)\",\"opacity\":1},{\"offset\":\"0.5\",\"color\":\"rgb(31,58,147)\",\"opacity\":1}],\"offsetX\":0,\"offsetY\":0},\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"rx\":0,\"ry\":0}}"
解决方案
您需要解析字符串化的 json。
演示
var jsonS = "{\"objects\":[{\"type\":\"i-text\",\"originX\":\"left\",\"originY\":\"top\",\"left\":25,\"top\":25,\"width\":182,\"height\":41.95,\"fill\":\"#000\",\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"text\":\"Heading text\",\"fontSize\":32,\"fontWeight\":800,\"fontFamily\":\"Roboto\",\"fontStyle\":\"\",\"lineHeight\":1.16,\"textDecoration\":\"\",\"textAlign\":\"center\",\"textBackgroundColor\":\"\",\"styles\":{}}],\"background\":\"\",\"backgroundImage\":{\"type\":\"rect\",\"originX\":\"left\",\"originY\":\"top\",\"left\":0,\"top\":0,\"width\":250,\"height\":250,\"fill\":{\"type\":\"linear\",\"coords\":{\"x1\":0,\"y1\":0,\"x2\":125,\"y2\":125},\"colorStops\":[{\"offset\":\"0\",\"color\":\"rgb(210,77,87)\",\"opacity\":1},{\"offset\":\"1\",\"color\":\"rgb(249,191,59)\",\"opacity\":1},{\"offset\":\"0.5\",\"color\":\"rgb(31,58,147)\",\"opacity\":1}],\"offsetX\":0,\"offsetY\":0},\"stroke\":null,\"strokeWidth\":1,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeLineJoin\":\"miter\",\"strokeMiterLimit\":10,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"clipTo\":null,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"globalCompositeOperation\":\"source-over\",\"rx\":0,\"ry\":0}}";
var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(JSON.parse(jsonS),function(){
canvas.renderAll();
})
canvas{
border: 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=250 height=250></canvas>
要序列化画布,请使用canvas.toJSON()
var myjson = canvas.toJSON();
推荐阅读
- android - Convert callback hell to deferred object
- mysql - My-sql insert Error Code: 1093. You can't specify target table 'client_requests' for update in FROM clause
- javascript - 光标离开div区域时元素停止拖动反应
- c++ - 在我自己的命名空间中定义 size_t 会产生歧义或其他错误吗?
- sql - NVL 在查询中使用案例
- android - 无法修复意图方案
- c - 有没有办法在 C 中为 i_block 创建迭代器样式函数?
- debugging - 调试 .NET Core 源
- java - 如何以编程方式删除重复的联系人?
- html - 无法在简单的引导页面上的图像框之外获取标题