{"id":254413,"date":"2015-04-02T23:54:03","date_gmt":"2015-04-02T19:54:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=254413"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=254413","title":{"rendered":"\u0417\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 Fabric.js. \u0427\u0430\u0441\u0442\u044c 3-\u044f"},"content":{"rendered":"

\t\t\t\u042d\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u043e\u0431 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 Javascript canvas \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Fabric.js.<\/i><\/p>\n

\u041c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043e Fabric \u0432 \u043f\u0435\u0440\u0432\u043e\u0439<\/a> \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 <\/a>\u0447\u0430\u0441\u0442\u044f\u0445 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0431\u043e\u043b\u0435\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b.
<\/a> <\/p>\n

\u0413\u0440\u0443\u043f\u043f\u044b<\/h2>\n

\"image\"\/<\/p>\n

\u041f\u0435\u0440\u0432\u043e\u0435, \u043e \u0447\u0435\u043c \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u2013 \u044d\u0442\u043e \u0433\u0440\u0443\u043f\u043f\u044b. \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u2013 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043c\u043e\u0449\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 Fabric. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b? \u0421\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043a\u0430\u043a \u0441 \u0435\u0434\u0438\u043d\u044b\u043c \u0446\u0435\u043b\u044b\u043c.<\/p>\n

\u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u043a\u0430\u043a \u043c\u044b \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043b\u0438<\/a> \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u044b\u0448\u0438? \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0438 \u0434\u0430\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u2014 \u0446\u0432\u0435\u0442, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u0440\u0430\u043c\u043a\u0443 \u0438 \u0442.\u0434.<\/p>\n

\u0418\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0433\u0440\u0443\u043f\u043f\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 canvas (\u043a\u0430\u043a \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0448\u0435), Fabric \u043d\u0435\u044f\u0432\u043d\u043e, \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0433\u0440\u0443\u043f\u043f\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e. \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043c\u044b\u0441\u043b fabric.Group<\/code>. <\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0433\u0440\u0443\u043f\u043f\u0443 \u0438\u0437 2 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0440\u0443\u0433\u0430 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n

var circle = new fabric.Circle({   radius: 100,   fill: '#eef',   scaleY: 0.5,   originX: 'center',   originY: 'center' });  var text = new fabric.Text('hello world', {   fontSize: 30,   originX: 'center',   originY: 'center' });  var group = new fabric.Group([ circle, text ], {   left: 150,   top: 100,   angle: -10 });  canvas.add(group); <\/code><\/pre>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u00abhello world\u00bb. \u0417\u0430\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c originX<\/code> \u0438 originY<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435  'center'<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b. \u041f\u0440\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0447\u043b\u0435\u043d\u044b \u0433\u0440\u0443\u043f\u043f\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 \u0433\u0440\u0443\u043f\u043f\u044b. \u0417\u0430\u0442\u0435\u043c \u043a\u0440\u0443\u0433 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0432 100px \u0437\u0430\u043a\u0440\u0430\u0441\u0438\u043b\u0438 \u0446\u0432\u0435\u0442\u043e\u043c "#eef" \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0441\u0436\u0430\u043b\u0438 (\u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0441\u0436\u0430\u0442\u0438\u044f \u2014 0.5). \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 fabric.Group<\/code> c \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 2 \u043d\u0430\u0448\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0412\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0437\u0430\u0434\u0430\u043b\u0438 \u0433\u0440\u0443\u043f\u043f\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u044e 150\/100 \u0438 \u0443\u0433\u043e\u043b -10. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0451 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 canvas.add()<\/code> \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u043b\u044e\u0431\u043e\u043c\u0443 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443. <\/p>\n
  \u0418, \u0432\u0443\u0430\u043b\u044f! \u0412\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 canvas, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u043d\u0430\u0434\u043f\u0438\u0441\u044c\u044e. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0435\u0433\u043e \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u043c\u0435\u043d\u044f\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0443\u043f\u043f\u044b. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043a\u0430\u043a \u0441 \u0435\u0434\u0438\u043d\u044b\u043c \u0446\u0435\u043b\u044b\u043c.<\/p>\n
  \"image\"\/<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0430 \u043d\u0430 canvas. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0435 \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c.<\/p>\n
group.item(0).setFill('red'); group.item(1).set({   text: 'trololo',   fill: 'white' });  canvas.renderAll(); <\/code><\/pre>\n
  \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 item()<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2013 \u044d\u0442\u043e \u0441\u0436\u0430\u0442\u044b\u0439 \u043a\u0440\u0443\u0433, \u0432\u0442\u043e\u0440\u043e\u0439 \u2013 \u0442\u0435\u043a\u0441\u0442. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c: <\/p>\n
  \"image\"\/<\/p>\n
  \u0412\u0430\u0436\u043d\u0430\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u2014 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0433\u0440\u0443\u043f\u043f\u044b \u0432\u044b\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430 \u0433\u0440\u0443\u043f\u043f\u044b. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0442\u0435\u043a\u0441\u0442-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043e\u043d \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c, \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u044b. \u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c, \u0437\u0430\u0434\u0430\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (\u043b\u0435\u0432\u043e\\\u0432\u0435\u0440\u0445).<\/p>\n
  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u043c 3 \u043a\u0440\u0443\u0433\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n
var circle1 = new fabric.Circle({   radius: 50,   fill: 'red',   left: 0 }); var circle2 = new fabric.Circle({   radius: 50,   fill: 'green',   left: 100 }); var circle3 = new fabric.Circle({   radius: 50,   fill: 'blue',   left: 200 });  var group = new fabric.Group([ circle1, circle2, circle3 ], {   left: 200,   top: 100 });  canvas.add(group); <\/code><\/pre>\n
  \"image\"\/<\/p>\n
  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/b>. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0433\u0440\u0443\u043f\u043f\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0443 Fabric \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n
fabric.Image.fromURL('\/assets\/pug.jpg', function(img) {   var img1 = img.scale(0.1).set({ left: 100, top: 100 });    fabric.Image.fromURL('\/assets\/pug.jpg', function(img) {     var img2 = img.scale(0.1).set({ left: 175, top: 175 });      fabric.Image.fromURL('\/assets\/pug.jpg', function(img) {       var img3 = img.scale(0.1).set({ left: 250, top: 250 });        canvas.add(new fabric.Group([ img1, img2, img3], { left: 200, top: 200 }))     });   }); }); <\/code><\/pre>\n
  \"image\"\/<\/p>\n
  \u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0443 \u0433\u0440\u0443\u043f\u043f. \u041c\u0435\u0442\u043e\u0434 getObjects()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a fabric.Canvas#getObjects()<\/code>, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0432\u0441\u0435\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0433\u0440\u0443\u043f\u043f\u044b. \u0415\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 size()<\/code>, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0447\u0438\u0441\u043b\u043e \u0432\u0441\u0435\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0433\u0440\u0443\u043f\u043f\u044b. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 contains()<\/code>, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0449\u0438\u0439 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435. \u0423\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u043c\u0435\u0442\u043e\u0434 item()<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b. \u041c\u0435\u0442\u043e\u0434 forEachObject()<\/code>, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a fabric.Canvas#forEachObject<\/code>, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438. \u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u0435\u0442\u043e\u0434\u044b add()<\/code> \u0438 remove()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0438 \u0443\u0434\u0430\u043b\u044f\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b. <\/p>\n
  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\/\u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0421 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438\/\u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0433\u0440\u0443\u043f\u043f\u044b \u0438 \u0431\u0435\u0437. 
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u0446\u0435\u043d\u0442\u0440 \u0433\u0440\u0443\u043f\u043f\u044b.<\/p>\n
group.add(new fabric.Rect({   ...   originX: 'center',   originY: 'center' })); <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 100px \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0433\u0440\u0443\u043f\u043f\u044b:<\/p>\n
group.add(new fabric.Rect({   ...   left: 100,   top: 100,   originX: 'center',   originY: 'center' })); <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u0446\u0435\u043d\u0442\u0440 \u0433\u0440\u0443\u043f\u043f\u044b \u0438<\/b> \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0433\u0440\u0443\u043f\u043f\u044b:<\/p>\n
group.addWithUpdate(new fabric.Rect({   ...   left: group.getLeft(),   top: group.getTop(),   originX: 'center',   originY: 'center' })); <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 100px \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0433\u0440\u0443\u043f\u043f\u044b \u0438<\/b> \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0433\u0440\u0443\u043f\u043f\u044b:<\/p>\n
group.addWithUpdate(new fabric.Rect({   ...   left: group.getLeft() + 100,   top: group.getTop() + 100,   originX: 'center',   originY: 'center' })); <\/code><\/pre>\n
  \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0443 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0430 canvas, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c:<\/p>\n
\/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u0443 \u0441 \u043a\u043e\u043f\u0438\u044f\u043c\u0438 2-\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. var group = new fabric.Group([   canvas.item(0).clone(),   canvas.item(1).clone() ]);  \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c. canvas.clear().renderAll();  \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u0443 \u043d\u0430 canvas. canvas.add(group); <\/code><\/pre>\n
  <\/p>\n
\u0421\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n
  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0447\u043d\u0435\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 canvas, \u0438\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0443, \u0442\u043e \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f canvas<\/b>. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043b\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 canvas? \u041c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c canvas \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2014 \u044d\u0442\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442, \u0447\u0435\u043c \u043a\u0430\u043a \u0440\u0430\u0437, \u0442\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441 Fabric.<\/p>\n
\u041c\u0435\u0442\u043e\u0434\u044b toObject, toJSON<\/h4>\n
  \u041e\u0441\u043d\u043e\u0432\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Fabri\u0441 \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b fabric.Canvas#toObject()<\/code> \u0438 fabric.Canvas#toJSON()<\/code>.
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0443\u0441\u0442\u043e\u0433\u043e canvas.<\/p>\n
var canvas = new fabric.Canvas('c'); JSON.stringify(canvas); \/\/ '{"objects":[],"background":"rgba(0, 0, 0, 0)"}' <\/code><\/pre>\n
  \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ES5 \u043c\u0435\u0442\u043e\u0434 JSON.stringify()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 toJSON<\/code> \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u041e\u0431\u044a\u0435\u043a\u0442 canvas \u0432 Fabric \u0438\u043c\u0435\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434, \u043e\u043d \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d \u0432\u044b\u0437\u043e\u0432\u0443 JSON.stringify(canvas.toJSON())<\/code>.<\/p>\n
  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 canvas. \u041e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 JSON, \u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 »objects» \u0438 »background». \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e »objects» \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0443\u0441\u0442\u043e\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430 canvas \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0442, \u0430 »background» \u0438\u043c\u0435\u0435\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u00abrgba(0, 0, 0, 0)\u00bb).<\/p>\n
  \u0417\u0430\u0434\u0430\u0434\u0438\u043c canvas \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u043d, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f.<\/p>\n
canvas.backgroundColor = 'red'; JSON.stringify(canvas); \/\/ '{"objects":[],"background":"red"}' <\/code><\/pre>\n
  \u041a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 canvas \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u043d. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n
canvas.add(new fabric.Rect({   left: 50,   top: 50,   height: 20,   width: 20,   fill: 'green' })); console.log(JSON.stringify(canvas)); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:  <\/p>\n
'{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}' <\/code><\/pre>\n
  \u0423\u0445 \u0442\u044b! \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0432\u0448\u0438\u0441\u044c, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0430\u043b \u0447\u0430\u0441\u0442\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 »objects», \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 JSON. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0448\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0438 \u0442.\u0434. \u0415\u0441\u043b\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043a\u0430\u0436\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0440\u0443\u0433, \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0437\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n
canvas.add(new fabric.Circle({   left: 100,   top: 100,   radius: 50,   fill: 'red' })); console.log(JSON.stringify(canvas)); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:  <\/p>\n
'{"objects":[{(\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a) "type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{(\u041a\u0440\u0443\u0433) "type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}' <\/code><\/pre>\n
  \u042f \u0432\u044b\u0434\u0435\u043b\u0438\u043b "type":"rect"<\/code> \u0438 "type":"circle"<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u0430\u044f, \u043d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u0446\u0432\u0435\u0442\u043e\u0447\u043a\u0438, \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 1\/10(!) \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0435\u0440\u043d\u0435\u0442 \u043d\u0430\u043c \u043c\u0435\u0442\u043e\u0434 canvas.toDataURL('png')<\/code>:<\/p>\n
'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAK8CAYAAAAXo9vkAAAgAElEQVR4Xu3dP4xtBbnG4WPAQOQ2YBCLK1qpoQE1\/m+NVlCDwUACicRCEuysrOwkwcJgAglEItRQaWz9HxEaolSKtxCJ0FwMRIj32zqFcjm8e868s2fNWo\/Jygl+e397rWetk5xf5pyZd13wPwIECBAgQIAAAQIECBxI4F0H+hwfQ4AAAQIECBAgQIAAgQsCxENAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECyw+Qb134R\/U2fevC8q+5esGWESBAgAABAgQIEFiOwPL\/MC5AlvO0OBMCBAgQIECAAAECJxQQICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwT0dgIECBAgQIAAAQIE9hcQIPtbeSUBAgQIECBAgAABAicUECAnBPR2AgQIECBAgAABAgT2FxAg+1t5JQECBAgQIECAAAECJxQQICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwTc9+3z49yvmNd+dI7PzPHJOW6Y4wNzXD3HlXNc9pZdb85\/vzbHK3P8aY7n5vj1HL+Y43dz417f97O9jgABAgQIECBAgMBSBATIKd2JCY5dWNwyx5fn+PwcV5U\/6tXZ99M5fjjHk3Mjd6HifwQIECBAgAABAgQWLSBAirdnouP6WXfvHHfOcU1x9T6rXp4XPTLHA3NTX9jnDV5DgAABAgQIECBA4NACAuSE4hMdl8+Kr83xzTmuO+G61ttfnEXfnuN7c4PfaC21hwABAgQIECBAgMBJBQTIJQpOeFw7b71\/jtsvccWh3vbYfNB9c6NfOtQH+hwCBAgQIECAAAECFxMQIMd8No7C4+F5283HfOtZv\/ypOYG7hMhZ3wafT4AAAQIECBDYtoAA2fP+H\/1Vqwd3f4jf8y1Lfdkunu7xV7OWenucFwECBAgQIEBg3QICZI\/7O\/Fxx7xs9wf3t36r3D3evciX7L7F7+6rIY8u8uycFAECBAgQIE' <\/code><\/pre>\n
  \u0418 \u0435\u0449\u0435 ~17000 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432<\/a>.<\/p>\n
  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 fabric.Canvas#toObject<\/code>. \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e: toObject<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u0438 toJSON<\/code>, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0437\u044c\u043c\u0435\u043c canvas \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0432 \u0432\u0438\u0434\u0435 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. canvas.toObject()<\/code> \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n
{ "background" : "rgba(0, 0, 0, 0)",   "objects" : [     {       "angle" : 0,       "fill" : "green",       "flipX" : false,       "flipY" : false,       "hasBorders" : true,       "hasControls" : true,       "hasRotatingPoint" : false,       "height" : 20,       "left" : 50,       "opacity" : 1,       "overlayFill" : null,       "perPixelTargetFind" : false,       "scaleX" : 1,       "scaleY" : 1,       "selectable" : true,       "stroke" : null,       "strokeDashArray" : null,       "strokeWidth" : 1,       "top" : 50,       "transparentCorners" : true,       "type" : "rect",       "width" : 20     }   ] } <\/code><\/pre>\n
  \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0432\u044b\u0432\u043e\u0434 toJSON<\/code> \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435 \u0447\u0442\u043e \u0438\u043d\u043e\u0435 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 toObject<\/code>. \u041c\u0435\u0442\u043e\u0434 toObject<\/code> \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u0438 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u00ab\u0443\u043c\u043d\u044b\u0439\u00bb \u0438 \u00ab\u043b\u0435\u043d\u0438\u0432\u044b\u0439\u00bb. \u0422\u043e, \u0447\u0442\u043e \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u2013 \u044d\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u0441\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c canvas, \u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043c \u043c\u0435\u0442\u043e\u0434\u0430 toObject<\/code>. \u041e\u0431\u044a\u0435\u043a\u0442 \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb fabric.Path<\/code> \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 toObject<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 »points». \u0418 fabric.Image<\/code> \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434, \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e »src» \u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0421\u043b\u0435\u0434\u0443\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u041e\u041e\u041f, \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0441\u0435\u0431\u044f \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n
  \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb, \u0438\u043b\u0438 \u0436\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0435\u0442\u043e\u0434 toObject<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. 
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n
var rect = new fabric.Rect(); rect.toObject = function() {   return { name: 'trololo' }; }; canvas.add(rect); console.log(JSON.stringify(canvas)); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n
'{"objects":[{"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}' <\/code><\/pre>\n
  \u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u043c\u0430\u0441\u0441\u0438\u0432 »objects» \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u041d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0447\u0430\u0441\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f<\/b> \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 toObject<\/code> \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n
var rect = new fabric.Rect();  rect.toObject = (function(toObject) {   return function() {     return fabric.util.object.extend(toObject.call(this), {       name: this.name     });   }; })(rect.toObject);  canvas.add(rect);  rect.name = 'trololo';  console.log(JSON.stringify(canvas)); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n
'{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0,"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}' <\/code><\/pre>\n
  \u041c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043b\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 toObject<\/code> \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c »name». \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0442\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 fabric.Rect<\/code>) \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u043d\u043e\u0432\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 »stateProperties». \u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 toSVG<\/h4>\n
  \u0414\u0440\u0443\u0433\u043e\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 canvas \u2014 \u044d\u0442\u043e SVG \u0444\u043e\u0440\u043c\u0430\u0442. Fabric \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 SVG \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 canvas. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0438\u0437 canvas \u0432 SVG \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 canvas \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u043c\u0435\u0442\u043e\u0434 toSVG<\/code>:<\/p>\n
canvas.add(new fabric.Rect({   left: 50,   top: 50,   height: 20,   width: 20,   fill: 'green' })); console.log(canvas.toSVG()); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n
'<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-\/\/W3C\/\/DTD SVG 20010904\/\/EN" "http:\/\/www.w3.org\/TR\/2001\/REC-SVG-20010904\/DTD\/svg10.dtd"><svg xmlns="http:\/\/www.w3.org\/2000\/svg" xmlns:xlink="http:\/\/www.w3.org\/1999\/xlink" version="1.1" width="800" height="700" xml:space="preserve"><desc>Created with Fabric.js 0.9.21<\/desc><rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" \/><\/svg>' <\/code><\/pre>\n
  \u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u043a toJSON<\/code> \u0438\u043b\u0438 toObject<\/code>, toSVG<\/code>, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 canvas, \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 toSVG<\/code> \u043c\u0435\u0442\u043e\u0434, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c toSVG<\/code> \u043c\u0435\u0442\u043e\u0434, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c toObject<\/code>.<\/p>\n
  \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e SVG \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 toObject\/toJSON<\/code> \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043b\u044e\u0431\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c \u043a SVG-\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u043d\u0442\u0435\u0440, \u043a\u0430\u043c\u0435\u0440\u0430 \u0438 \u0442.\u0434.). \u0421 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 toObject\/toJSON \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 canvas. \u041a\u0441\u0442\u0430\u0442\u0438, \u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0430 canvas. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 canvas \u0432 \u0442\u0435\u043a\u0441\u0442, \u0430 \u043a\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c?<\/p>\n
\u0414\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, SVG \u043f\u0430\u0440\u0441\u0435\u0440<\/h2>\n
  \u041a\u0430\u043a \u0438 \u0432 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0435\u0441\u0442\u044c 2 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c canvas \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438: \u0438\u0437 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f JSON \u0438 SVG. \u0414\u043b\u044f JSON \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b fabric.Canvas#loadFromJSON<\/code> \u0438 fabric.Canvas#loadFromDatalessJSON<\/code>. \u0414\u043b\u044f SVG \u2014 \u043c\u0435\u0442\u043e\u0434\u044b fabric.loadSVGFromURL<\/code> \u0438 fabric.loadSVGFromString<\/code>.
  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 canvas, \u0430 \u0434\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 fabric.<\/p>\n
  \u041e\u0441\u043e\u0431\u043e \u043d\u0435\u0447\u0435\u0433\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445. \u041e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0442 \u043d\u0438\u0445 \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c. \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 JSON \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043f\u0443\u0441\u0442\u043e\u0439 canvas:<\/p>\n
var canvas = new fabric.Canvas();  canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'); <\/code><\/pre>\n
  \u2026 \u041e\u0431\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 canvas:<\/p>\n
  \"image\"\/<\/p>\n
  \u041d\u0443 \u0447\u0442\u043e \u0436\u0435, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c canvas \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0430 \u043a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0433\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 loadFromDatalessJSON<\/code>? \u0412 \u0447\u0435\u043c \u0435\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043e\u0442 loadFromJSON<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438? \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434, \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 path \u043e\u0431\u044a\u0435\u043a\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0442 \u044d\u0442\u043e\u0442:<\/p>\n
  \"image\"\/<\/p>\n
  \u2026 \u0438 JSON.stringify(canvas)<\/code> \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
'{"objects":[{"type":"path","left":184,"top":177,"width":175,"height":151,"fill":"#231F20","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"path":[["M",39.502,61.823],["c",-1.235,-0.902,-3.038,-3.605,-3.038,-3.605],["s",0.702,0.4,3.907,1.203],["c",3.205,0.8,7.444,-0.668,10.114,-1.97],["c",2.671,-1.302,7.11,-1.436,9.448,-1.336],["c",2.336,0.101,4.707,0.602,4.373,2.036],["c",-0.334,1.437,-5.742,3.94,-5.742,3.94],["s",0.4,0.334,1.236,0.334],["c",0.833,0,6.075,-1.403,6.542,-4.173],["s",-1.802,-8.377,-3.272,-9.013],["c",-1.468,-0.633,-4.172,0,-4.172,0],["c",4.039,1.438,4.941,6.176,4.941,6.176],["c",-2.604,-1.504,-9.279,-1.234,-12.619,0.501],["c",-3.337,1.736,-8.379,2.67,-10.083,2.503],["c",-1.701,-0.167,-3.571,-1.036,-3.571,-1.036],["c",1.837,0.034,3.239,-2.669,3.239,-2.669],["s",-2.068,2.269,-5.542,0.434],["c",-3.47,-1.837,-1.704,-8.18,-1.704,-8.18],["s",-2.937,5.909,-1,9.816],["C",34.496,60.688,39.502,61.823,39.502,61.823],["z"],["M",77.002,40.772],["c",0,0,-1.78,-5.03,-2.804,-8.546],["l",-1.557,8.411],["l",1.646,1.602],["c",0,0,0,-0.622,-0.668,-1.691],["C",72.952,39.48,76.513,40.371,77.002,40.772],["z"],["M",102.989,86.943],["M",102.396,86.424],["c",0.25,0.22,0.447,0.391,0.594,0.519],["C",102.796,86.774,102.571,86.578,102.396,86.424],["z"],["M",169.407,119.374],["c",-0.09,-5.429,-3.917,-3.914,-3.917,-2.402],["c",0,0,-11.396,1.603,-13.086,-6.677],["c",0,0,3.56,-5.43,1.69,-12.461],["c",-0.575,-2.163,-1.691,-5.337,-3.637,-8.605],["c",11.104,2.121,21.701,-5.08,19.038,-15.519],["c",-3.34,-13.087,-19.63,-9.481,-24.437,-9.349],["c",-4.809,0.135,-13.486,-2.002,-8.011,-11.618],["c",5.473,-9.613,18.024,-5.874,18.024,-5.874],["c",-2.136,0.668,-4.674,4.807,-4.674,4.807],["c",9.748,-6.811,22.301,4.541,22.301,4.541],["c",-3.097,-13.678,-23.153,-14.636,-30.041,-12.635],["c",-4.286,-0.377,-5.241,-3.391,-3.073,-6.637],["c",2.314,-3.473,10.503,-13.976,10.503,-13.976],["s",-2.048,2.046,-6.231,4.005],["c",-4.184,1.96,-6.321,-2.227,-4.362,-6.854],["c",1.96,-4.627,8.191,-16.559,8.191,-16.559],["c",-1.96,3.207,-24.571,31.247,-21.723,26.707],["c",2.85,-4.541,5.253,-11.93,5.253,-11.93],["c",-2.849,6.943,-22.434,25.283,-30.713,34.274],["s",-5.786,19.583,-4.005,21.987],["c",0.43,0.58,0.601,0.972,0.62,1.232],["c",-4.868,-3.052,-3.884,-13.936,-0.264,-19.66],["c",3.829,-6.053,18.427,-20.207,18.427,-20.207],["v",-1.336],["c",0,0,0.444,-1.513,-0.089,-0.444],["c",-0.535,1.068,-3.65,1.245,-3.384,-0.889],["c",0.268,-2.137,-0.356,-8.549,-0.356,-8.549],["s",-1.157,5.789,-2.758,5.61],["c",-1.603,-0.179,-2.493,-2.672,-2.405,-5.432],["c",0.089,-2.758,-1.157,-9.702,-1.157,-9.702],["c",-0.8,11.75,-8.277,8.011,-8.277,3.74],["c",0,-4.274,-4.541,-12.82,-4.541,-12.82],["s",2.403,14.421,-1.336,14.421],["c",-3.737,0,-6.944,-5.074,-9.879,-9.882],["C",78.161,5.874,68.279,0,68.279,0],["c",13.428,16.088,17.656,32.111,18.397,44.512],["c",-1.793,0.422,-2.908,2.224,-2.908,2.224],["c",0.356,-2.847,-0.624,-7.745,-1.245,-9.882],["c",-0.624,-2.137,-1.159,-9.168,-1.159,-9.168],["c",0,2.67,-0.979,5.253,-2.048,9.079],["c",-1.068,3.828,-0.801,6.054,-0.801,6.054],["c",-1.068,-2.227,-4.271,-2.137,-4.271,-2.137],["c",1.336,1.783,0.177,2.493,0.177,2.493],["s",0,0,-1.424,-1.601],["c",-1.424,-1.603,-3.473,-0.981,-3.384,0.265],["c",0.089,1.247,0,1.959,-2.849,1.959],["c",-2.846,0,-5.874,-3.47,-9.078,-3.116],["c",-3.206,0.356,-5.521,2.137,-5.698,6.678],["c",-0.179,4.541,1.869,5.251,1.869,5.251],["c",-0.801,-0.443,-0.891,-1.067,-0.891,-3.473]'... <\/code><\/pre>\n
  \u2026 \u0438 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 5-\u044f (!) \u0447\u0430\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n
  \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? Path \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043e\u0442\u0435\u043d \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c. \u0412\u0441\u0435 \u044d\u0442\u0438 \u0447\u0430\u0441\u0442\u0438 ["c",0,2.67,-0.979,5.253,-2.048,9.079]<\/code> \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u2013 \u044d\u0442\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u0440\u0438\u0432\u044b\u0445. \u0418 \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u0438\u0445 \u043a\u0440\u0438\u0432\u044b\u0445 \u0441\u043e\u0442\u043d\u0438 \u0438\u043b\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u043d\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0430.<\/p>\n
  \u0427\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n
  \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043c\u0435\u0442\u043e\u0434 fabric.Canvas#toDatalessJSON<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c:<\/p>\n
canvas.item(0).sourcePath = '\/assets\/dragon.svg'; console.log(JSON.stringify(canvas.toDatalessJSON())); <\/code><\/pre>\n
  \u2026 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n
{"objects":[{"type":"path","left":143,"top":143,"width":175,"height":151,"fill":"#231F20","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"path":"\/assets\/dragon.svg"}],"background":"rgba(0, 0, 0, 0)"} <\/code><\/pre>\n
  \u041d\u0443 \u0447\u0442\u043e \u0436, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435! \u0427\u0442\u043e \u0436\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438? \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 toDatalessJSON<\/code> \u043c\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00absourcePath\u00bb \u043e\u0431\u044a\u0435\u043a\u0442\u0430 path (dragon shape) \u0437\u0430\u0434\u0430\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 "\/assets\/dragon.svg". \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 toDatalessJSON<\/code>, \u0438 \u0432\u0441\u044f \u044d\u0442\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u0430\u044f path \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 "\/assets\/dragon.svg". <\/p>\n
  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0444\u043e\u0440\u043c, toDatalessJSON<\/code> \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 canvas, \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 path \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 SVG.<\/p>\n
  \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u043c\u0435\u0442\u043e\u0434\u0443 loadFromDatalessJSON<\/code>, \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c canvas \u0438\u0437 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 (dataless). loadFromDatalessJSON<\/code> \u0443\u043c\u0435\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u00abpath\u00bb \u0441\u0442\u0440\u043e\u043a\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a "\/assets\/dragon.svg") \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f path \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 SVG. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u043b\u0438 URL:<\/p>\n
fabric.loadSVGFromString('...', function(objects, options) {   var obj = fabric.util.groupSVGElements(objects, options);   canvas.add(obj).renderAll(); }); <\/code><\/pre>\n
  \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u044d\u0442\u043e SVG \u0441\u0442\u0440\u043e\u043a\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u043b\u043b\u0431\u044d\u043a. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 SVG \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: objects<\/code> \u0438 options<\/code>. objects<\/code> \u2013 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 SVG \u2013 paths, \u0433\u0440\u0443\u043f\u043f\u0430 path-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u0435\u043a\u0441\u0442 \u0438 \u0442.\u0434. \u0427\u0442\u043e\u0431\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e, \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a\u0438\u043c\u0438 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0432 SVG \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c fabric.util.groupSVGElements<\/code> \u043a\u0430\u043a \u0434\u043b\u044f objects<\/code>, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0438 options<\/code>. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c fabric.Path<\/code> \u043b\u0438\u0431\u043e fabric.PathGroup<\/code> \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 canvas.<\/p>\n
  fabric.loadSVGFromURL<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0443\u044e URL, \u0430 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 SVG. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e Fabric \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 URL \u0447\u0435\u0440\u0435\u0437 XMLHttpRequest, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 SVG \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c SOP.<\/p>\n
\u041f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u044b (Subclassing)<\/h2>\n
  \u0422\u0430\u043a \u043a\u0430\u043a Fabric \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u041e\u041e\u041f, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u00ab\u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u044b\u00bb \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438 \u043d\u0435\u043f\u0440\u0438\u043d\u0443\u0436\u0434\u0435\u043d\u043d\u043e. \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0435\u0440\u0438\u0438, \u0432 Fabric \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u0433\u0430\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0412\u0441\u0435 2D \u043e\u0431\u044a\u0435\u043a\u0442\u044b (path, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u0435\u043a\u0441\u0442, \u0438 \u0442.\u0434.) \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043e\u0442 fabric.Object<\/code>, \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u00ab\u043a\u043b\u0430\u0441\u0441\u044b\u00bb \u2014 \u0432\u0440\u043e\u0434\u0435 fabric.PathGroup<\/code> \u2014 \u0434\u0430\u0436\u0435 \u0438\u043c\u0435\u044e\u0442 3-\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n
  \u041a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u00ab\u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u00bb \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u00ab\u043a\u043b\u0430\u0441\u0441\u0435\u00bb \u0432 Fabric? \u0418\u043b\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb?<\/p>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434 fabric.util.createClass<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0432 javascript. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb Point:<\/p>\n
var Point = fabric.util.createClass({   initialize: function(x, y) {     this.x = x || 0;     this.y = y || 0;   },   toString: function() {     return this.x + '\/' + this.y;   } }); <\/code><\/pre>\n
  createClass<\/code> \u0431\u0435\u0440\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb. »initialize» \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Point, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 »x», »y» \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c »toString»:<\/p>\n
var point = new Point(10, 20);  point.x; \/\/ 10 point.y; \/\/ 20  point.toString(); \/\/ "10\/20" <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb Point, \u0441\u043a\u0430\u0436\u0435\u043c, \u0446\u0432\u0435\u0442\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (colored point), \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c createClass<\/code>:<\/p>\n
var ColoredPoint = fabric.util.createClass(Point, {   initialize: function(x, y, color) {     this.callSuper('initialize', x, y);     this.color = color || '#000';   },   toString: function() {     return this.callSuper('toString') + ' (color: ' + this.color + ')';   } }); <\/code><\/pre>\n
  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u0430 \u043f\u0435\u0440\u0432\u044b\u043c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb Point, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 callSuper<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u00ab\u043a\u043b\u0430\u0441\u0441\u0435\u00bb. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c Point, \u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0441\u043d\u0443\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0438 ColoredPoint<\/code>. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n
var redPoint = new ColoredPoint(15, 33, '#f55');  redPoint.x; \/\/ 15 redPoint.y; \/\/ 33 redPoint.color; \/\/ "#f55"  redPoint.toString(); "15\/35 (color: #f55)" <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u00ab\u043a\u043b\u0430\u0441\u0441\u044b\u00bb \u0438 \u00ab\u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u044b\u00bb, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432 Fabric. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb LabeledRect<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u043d\u0430\u0434\u043f\u0438\u0441\u044c\u044e. \u041a\u043e\u0433\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043d\u0430 canvas, \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u041d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 (\u043a\u0440\u0443\u0433 \u0438 \u0442\u0435\u043a\u0441\u0442) \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435 ‘\u0413\u0440\u0443\u043f\u043f\u044b’. \u041a\u0441\u0442\u0430\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u0441 Fabric \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u0440\u0443\u043f\u043f, \u0442\u0430\u043a \u0438 \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438\u00bb.<\/p>\n
var LabeledRect = fabric.util.createClass(fabric.Rect, {    type: 'labeledRect',    initialize: function(options) {     options || (options = { });      this.callSuper('initialize', options);     this.set('label', options.label || '');   },    toObject: function() {     return fabric.util.object.extend(this.callSuper('toObject'), {       label: this.get('label')     });   },    _render: function(ctx) {     this.callSuper('_render', ctx);      ctx.font = '20px Helvetica';     ctx.fillStyle = '#333';     ctx.fillText(this.label, -this.width\/2, -this.height\/2 + 20);   } }); <\/code><\/pre>\n
  \u041a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u0442\u0443\u0442 \u0432\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u00ab\u043a\u043b\u0430\u0441\u0441\u00bb \u043a\u0430\u043a fabric.Rect<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e. \u0417\u0430\u0442\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e »type» \u0438 \u0437\u0430\u0434\u0430\u0435\u043c \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 »labeledRect». \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 Fabric, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0442\u0430\u043c \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e »type» (\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u043a\u0440\u0443\u0433, path, \u0442\u0435\u043a\u0441\u0442 \u0438 \u0442.\u0434.).<\/p>\n
  \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 (initialize<\/code>) \u043d\u0430\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c, \u0432 \u043d\u0435\u043c \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c callSuper<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 initialize<\/code> \u043d\u0430 fabric.Rect<\/code>. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043c\u044b \u0434\u0430\u0451\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043d\u0430\u0434\u043f\u0438\u0441\u044c (label), \u0432\u0437\u044f\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 options<\/code>. <\/p>\n
  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c 2 \u043c\u0435\u0442\u043e\u0434\u0430 \u2013 toObject<\/code> \u0438 _render<\/code>. toObject<\/code>, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c \u0438\u0437 \u0433\u043b\u0430\u0432\u044b \u043f\u0440\u043e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u0435\u043d \u0437\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. <\/p>\n
  \u0422\u0430\u043a \u043a\u0430\u043a LabeledRect<\/code> \u0438\u043c\u0435\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a (rect), \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043b\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 toObject<\/code>, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0435\u043c\u0443 \u043c\u0435\u0442\u043a\u0443 (label).<\/p>\n
  \u0427\u0442\u043e \u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u0430 _render<\/code>, \u0442\u043e \u043e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (callSuper<\/code>) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430. <\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n
var labeledRect = new LabeledRect({   width: 100,   height: 50,   left: 100,   top: 100,   label: 'test',   fill: '#faa' }); canvas.add(labeledRect); <\/code><\/pre>\n
  \u2026 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
  \"image\"\/<\/p>\n
  \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (label \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e) \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443:<\/p>\n
labeledRect.set({   label: 'trololo',   fill: '#aaf',   rx: 10,   ry: 10 }); <\/code><\/pre>\n
  \"image\"\/<\/p>\n
  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435. \u0418\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432 toObject<\/code>, \u0438 initialize<\/code>:<\/p>\n
... initialize: function(options) {   options || (options = { });    this.callSuper('initialize', options);    \/\/ \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u0441\u0435\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c \u0441 \u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443\/\u0432\u044b\u0441\u043e\u0442\u0443 \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 100\/50   this.set({ width: 100, height: 50 });    this.set('label', options.label || ''); } ... _render: function(ctx) {    \/\/ \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438   ctx.font = this.labelFont;   ctx.fillStyle = this.labelFill;    ctx.fillText(this.label, -this.width\/2, -this.height\/2 + 20); } ... <\/code><\/pre>\n
  \u041d\u0430 \u044d\u0442\u043e\u043c \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f 3-\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0441\u0435\u0440\u0438\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0433\u0440\u0443\u043f\u043f\u0430\u0445, \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u0445\u00bb, \u00ab\u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430\u0445\u00bb \u0438 (\u0434\u0435)\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0440\u0435\u0448\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Fabric. \u0415\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0432 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0435\u0440\u0438\u0438.<\/p>\n
  \u0423\u0441\u043f\u0435\u0445\u043e\u0432 \u0438 \u0443\u0434\u0430\u0447\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438!<\/p>\n
  \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u0435\u043d \u0441 \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435\u043c \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0443\u0447\u0430\u0441\u0442\u0438\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u043e\u0432. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a><\/i>. \t\t\t<\/p>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/254763\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
 \t\t\t\u042d\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u043e\u0431 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 Javascript canvas \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Fabric.js.<\/i><\/p>\n
  \u041c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043e Fabric \u0432 \u043f\u0435\u0440\u0432\u043e\u0439<\/a> \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 <\/a>\u0447\u0430\u0441\u0442\u044f\u0445 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0431\u043e\u043b\u0435\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-254413","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=254413"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254413\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=254413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=254413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=254413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}