编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

fabricJs自定义对象不会从JSON呈现:fabricJs custom object does not render from JSON

sotapme 面向对象 2022-5-11 19:31 6人围观

腾讯云服务器
fabricJs自定义对象不会从JSON呈现的处理方法

fabricJS版本2.2.3

fabricJS Version 2.2.3

测试 jsFiddle

我正在尝试使用LabeledRect子类,但是我的问题是,每当我尝试从JSON加载它时,它都不会呈现,并且在控制台中也没有出现错误.参见下面的小提琴.

I'm trying to use LabeledRect subclass but my problem is that whenever I try to load it from JSON, it does not render, and I got no error in console. See the fiddle below.

如何正确渲染?我认为我的问题出在fromObject函数中,但是我不知道在哪里.

How can I render it properly ? I think my problem is in the fromObject func but I got no idea where.

/** * fabric.js template for bug reports * * Please update the name of the jsfiddle (see Fiddle Options). * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js). */ // initialize fabric canvas and assign to global windows object for debug var canvas = window._canvas = new fabric.Canvas('c'); // ADD YOUR CODE HERE var json = '{"version":"2.2.3","objects":[{"type":"labeledRect","version":"2.2.3","originX":"left","originY":"top","left":0,"top":0,"width":100,"height":50,"fill":"#faa","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"label":"1"}]}'; fabric.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); } }); fabric.LabeledRect.fromObject = function(object, callback) { fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) { delete object.objects; callback && callback(new fabric.LabeledRect(enlivenedObjects, object)); }); }; fabric.LabeledRect.async = true; canvas.loadFromJSON(json); canvas.renderAll();
canvas { border: 1px solid #999; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas width="1000" height="600"></canvas>

问题解答

fabric.LabeledRect.fromObject = function(object, callback) { return fabric.Object._fromObject('LabeledRect', object, callback); }; 

fromObject

演示

DEMO

var canvas = window._canvas = new fabric.Canvas('c'); var json = '{"version":"2.2.3","objects":[{"type":"labeledRect","version":"2.2.3","originX":"left","originY":"top","left":0,"top":0,"width":100,"height":50,"fill":"#faa","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"label":"1"}]}'; fabric.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); } }); fabric.LabeledRect.fromObject = function(object, callback) { return fabric.Object._fromObject('LabeledRect', object, callback); }; canvas.loadFromJSON(json,canvas.renderAll.bind(canvas));
canvas { border: 1px solid #999; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas width="1000" height="600"></canvas>

这篇关于fabricJs自定义对象不会从JSON呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程技术网(www.editcode.net)!

腾讯云服务器 阿里云服务器
关注微信
^