Question

我正在我的画布中实现撤消功能，我被困在背景图像属性上。我用它来保存画布的当前状态

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

Answer 1

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

Fabricjs：背景图像在撤消时不呈现

1 个答案: