Fabricjs: фоновое изображение не отображается при отмене - PullRequest
Новая
       6

Fabricjs: фоновое изображение не отображается при отмене

0 голосов
/ 07 июня 2018

Я реализую функцию отмены на своем холсте, и я застрял в свойстве фонового изображения.Я использую это, чтобы сохранить текущее состояние холста 

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 Ответ

0 голосов
/ 07 июня 2018

Вам нужно разобрать строковый json.

DEMO 

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();

...