react-fabric-canvas-designer
Version:
A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.
85 lines (84 loc) • 2.56 kB
JavaScript
export class WrapperFabric {
constructor(obj) {
Object.defineProperty(this, "obj", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "propertyListMap", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
this.obj = obj;
this.propertyListMap = {
"rotaion": this.setRotaion, "opacity": this.setOpacity,
"width": this.setWidth, "height": this.setHeight, "scaleX": this.setScaleX, "scaleY": this.setScaleY,
"skewX": this.setSkewX, "skewY": this.setSkewY
};
}
setWidth(width) {
// if (!width)
// width = 0
this.obj.set("width", width);
}
;
setHeight(height) {
// if (!height)
// height = 0
this.obj.set("height", height);
}
;
setRotaion(angle) {
// if (!angle)
// angle = 0
if (this.obj.originX !== "center")
this.obj.set('originX', "center");
if (this.obj.originY !== "center")
this.obj.set('originY', "center");
this.obj.set("angle", angle);
}
;
setOpacity(opacity) {
this.obj.set("opacity", opacity);
}
;
setScaleX(scaleX) {
// if (!scaleX)
// scaleX = 1
this.obj.set("scaleX", scaleX);
}
;
setScaleY(scaleY) {
// if (!scaleY)
// scaleY = 1
this.obj.set("scaleY", scaleY);
}
;
setSkewX(skewX) {
// if (!skewX)
// skewX = 0
this.obj.set("skewX", skewX);
}
;
setSkewY(skewY) {
// if (!skewY)
// skewY = 0
this.obj.set("skewY", skewY);
}
;
getObjectValues() {
return {
skewX: { type: "number", step: 1, value: this.obj.skewX },
skewY: { type: "number", step: 1, value: this.obj.skewY },
// scaleX: { type: "number", min: 0, step: 1, value: this.obj.scaleX },
// scaleY: { type: "number", min: 0, step: 1, value: this.obj.scaleY },
// width: { type: "number", min: 0, step: 1, value: this.obj.width },
// height: { type: "number", min: 0, step: 1, value: this.obj.height },
opacity: { type: "range", min: 0, max: 1, step: 0.1, value: this.obj.opacity },
rotaion: { type: "range", min: 0, max: 359, step: 1, value: this.obj.angle }
};
}
}