我正在寻找一种扩展基础fabric.Object类的方法,该类具有自定义属性,我可以保存为JSON并从JSON加载,它将一直传播到各个子类中.
具体来说,我想存储一个深度属性,所以当我从JSON加载对象时,我将能够为对象添加适当的视差.
我想解决方案将包括修改fabric.Object.prototype.但我仍在学习如何使用原型.
以下是我尝试过的一些示例:http: //www.sitepoint.com/fabric-js-advanced/
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
rect.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
depth: 10
});
};
})(rect.toObject);
这在为特定对象'rect'提供所需属性以及使其在toJSON()方法中可用方面做得很好.但它无法使其可用于所有对象,当我使用loadFromJSON()它时,它不包含新属性.
任何帮助,将不胜感激!
让我更接近解决方案的其他资源:
Fabric.js - 如何使用自定义属性在服务器上保存画布
- 使用自定义属性创建子类,但不从中继承任何属性.
https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON
- 完全重写所需的方法以包含自定义属性(我宁愿不修改核心of fabricjs)
我正在使用Fabric.js库在Canvas中创建一个“类似于地图”的应用程序。实际上，我放下图像，然后使用正确的坐标在图像上方放置圆圈。点位置和名称作为从ajax调用接收的JSON数据传递。我需要一种方法来引用任何一个单独的圈子，以便可以获取有关该圈子的更多信息（每个圈子都有一个弹出窗口，其中包含更多详细信息）。
我在说明如何执行此操作的文档中找不到任何地方，我曾尝试向这样的对象添加ID：
tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));
没有运气找回它。任何帮助将不胜感激。这也是我第一次与这个社区互动，所以如果我的问题不够详细，或者其他问题，我深表歉意。
我有一张画布，上面有多个image objects. 每个对象都有一些自定义属性。我需要将此画布作为 json 对象保存到数据库中。我使用以下代码将 canvas 转换为 json。
canvasJson = JSON.stringify(canvas);
转换后，canvasJson不能有任何自定义属性及其值。它只有默认属性和宽度、高度、不透明度等值。
我该如何解决这个问题？请建议一些正确的方法来解决这个问题......
编辑
以下是我的图像对象创建代码，用于在画布中创建图像对象。
var imgObj = new Image();
var imgSrc = $IMAGE_URL;
imgObj.src = imgSrc;
var image = new fabric.Image(imgObj);
image.set({
left: 0,
top: 0,
angle: 0,
padding: 0,
cornersize: 0,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
elementId: $elementID,
elementname: $elementName,
elementstatus: $elementStatus,
width: componentImageWidth,
height: componentImageHeight
});
canvas.add(image);
image.setCoords();
canvas.renderAll();
canvas.selection = false;
canvas.renderAll();
setObjectAction(image, false);
JSON.stringify(canvas);使用elementId,elementname和elementstatus …
我正在尝试使用以下建议的方式在服务器中存储画布：
Fabric.js - 如何使用自定义属性在服务器上保存画布
但就我而言，我正在从一个 url 加载图像，例如：
fabric.Image.fromURL(url, function(image) {
image.alt = product.skuId;
image.productClass = product.productClass;
canvas.add(image);
}, {
crossOrigin: "Annoymous"
});
但是当我尝试在数据库中存储相同的属性时，不会存储较新的属性。
有没有办法在数据库中存储自定义属性（甚至“alt”）？
编辑：
用我尝试过的方法创建了一个小提琴：https : //jsfiddle.net/anjhawar/dpyb7cf7/
当我们按保存时，画布被转储到本地存储中，但是当我们检查“objects”数组时，我们没有得到自定义属性，即“id”和“alt”，如示例所示。
我错过了什么吗？