loadFromJSON не включает в себя дополнительные свойства в ткани JS - PullRequest
Новая
       11

loadFromJSON не включает в себя дополнительные свойства в ткани JS

0 голосов
/ 30 мая 2018

У меня есть этот JSON: https://codepen.io/dhavalsisodiya/pen/RJNNXw
У этого json есть дополнительное свойство как textAnchor.Теперь проблема в том, что когда я пытаюсь загрузить этот json на холст, это свойство textAnchor не включается в объект canvas.

Вы можете проверить пример здесь: https://codepen.io/dhavalsisodiya/pen/VdYLwo Как вы можетесм. на canavs textAnchor не загружается на холст.

Так как решить эту проблему? 

var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';

var canvas1 = new fabric.Canvas('canvas1');
canvas1.loadFromJSON(json);
// re-render the canvas
canvas1.renderAll();
console.log(JSON.stringify(canvas1));
<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>

Примечание: я добавил поддержку textAnchor, используя этот вопрос: Как использовать text-anchor: middle в ткани js

Также в соответствии с документом: http://fabricjs.com/fabric-intro-part-3

Мы расширили существующий метод объекта toObject дополнительным свойством - «name», так что свойство теперь является частью вывода toObject, и в результате появляется вхолст JSON представление.Еще одна вещь, о которой стоит упомянуть: если вы расширяете объекты подобным образом, вам также нужно убедиться, что «класс» объекта (в данном случае fabric.Rect) имеет это свойство в массиве «stateProperties», чтобы загрузка canvas из строкового представлениябудет правильно разобрать и добавить его к объекту.

Так что не уверен, какую часть js мне нужно изменить?

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Я использую 2.4.6 и решаю проблемы. 

    canvas.loadFromJSON(Json, function ()
    {
        debugger;
        canvas.renderAll();
        console.log(JSON.stringify(canvas));
        var json = canvas.toJSON(['selectable', 'name', 'ownType', 'ddlValue', 'lockScalingX']);
        console.log(JSON.stringify(json))
    });
0 голосов
/ 30 мая 2018

Как и в учебнике , упоминается, что вы можете переопределить toobject метод, чтобы включить ваши пользовательские свойства. 

fabric.Textbox.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      textAnchor: this.textAnchor
    });
  };
})(fabric.Textbox.prototype.toObject);

DEMO 

var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';

var canvas1 = new fabric.Canvas('canvas1');

fabric.Textbox.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      textAnchor: this.textAnchor
    });
  };
})(fabric.Textbox.prototype.toObject);

canvas1.loadFromJSON(json,function(){
  // re-render the canvas
  canvas1.renderAll();
  console.log(JSON.stringify(canvas1));
});
<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>
...