代码之家 › 专栏 › 技术社区 › Ashish

fabricjs:撤消时不呈现背景图像

fabricjs canvas angularjs javascript

Ashish · 技术社区 · 6 年前

我在画布中实现了撤销功能,我被困在背景图像属性中。我用这个来保存画布的当前状态

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}}"

1 回复 | 直到 6 年前

Durga 6 年前

您需要解析字符串化的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();