FabricJS
SinLios
http://sinlios.com
info@sinlios.com
SinLios Soluciones Digitales 2019
Version 3 (2019/08/19)
Wrapper for Fabric.js Canvas Library.
http://fabricjs.com
Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.
Fabric provides interactive object model on top of canvas element.
Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.
fabric-20.png
fabric-32.png
C:\Users\sinli\OneDrive\CloudStation\visualneo\VisualNeoWeb\Plugins\Fabric\fabric.nabp
yes
var fabContador=0;
var fbCurrent;
var fabPan="no";
var clipboard = null;
fabric.Object.prototype.set({
snapThreshold: 5,
snapAngle: 5
});
function fabInitialize(containerId) {
fabContenedor=containerId;
var ancho= $("#"+containerId).width();
var alto= $("#"+containerId).height();
$("#"+containerId).html('<canvas id="'+containerId+'Canvas" width="'+ancho+'" height="'+alto+'" style="width:'+ancho+'px;height:'+alto+'px"><\/canvas>');
window["Canvas"+containerId] = new fabric.Canvas(containerId+"Canvas", {
//Transparent Background.
backgroundColor: 'rgba(255,255,255,0)',
selectionColor: 'rgba(25,25,255,0.2)',
selectionBorderColor: 'rgba(25,25,255,0.7)',
preserveObjectStacking: true,
snapAngle:15,
selectionLineWidth: 1
});
window["Canvas"+containerId].centeredRotation=true;
window["Canvas"+containerId].on('object:selected', function(){
//La variable fabSelected guarda el objeto seleccionado en cada momento tan pronto como se selecciona.
window["fabSelected"]=window["Canvas"+containerId].getActiveObject();
});
//window["Canvas"+containerId].centeredScaling=true;
}
function fabInitializeStatic(containerId) {
var ancho= $("#"+containerId).width();
var alto= $("#"+containerId).height();
$("#"+containerId).html('<canvas id="'+containerId+'Canvas" width="'+ancho+'" height="'+alto+'" style="width:'+ancho+'px;height:'+alto+'px"><\/canvas>');
window["Canvas"+containerId] = new fabric.StaticCanvas(containerId+"Canvas", {
//Transparent Background.
backgroundColor: 'rgba(255,255,255,0)',
selectionColor: 'rgba(25,25,255,0.2)',
selectionBorderColor: 'rgba(25,25,255,0.7)',
preserveObjectStacking: true,
selectionLineWidth: 1
});
window["Canvas"+containerId].centeredRotation=true;
window["Canvas"+containerId].on('object:selected', function(){
//La variable fabSelected guarda el objeto seleccionado en cada momento tan pronto como se selecciona.
window["fabSelected"]=window["Canvas"+containerId].getActiveObject();
});
//window["Canvas"+containerId].centeredScaling=true;
}
function fabStartPan(event) {
if (event.button != 2) {
return;
}
var x0 = event.screenX,
y0 = event.screenY;
function continuePan(event) {
var x = event.screenX,
y = event.screenY;
if(fabPan==true){
window["Canvas"+fbCurrent].relativePan({ x: x - x0, y: y - y0 });
}
x0 = x;
y0 = y;
}
function stopPan(event) {
$(window).off('mousemove', continuePan);
$(window).off('mouseup', stopPan);
};
$(window).mousemove(continuePan);
$(window).mouseup(stopPan);
$(window).contextmenu(cancelMenu);
};
function cancelMenu() {
$(window).off('contextmenu', cancelMenu);
return false;
}
function fabPanning(containerId,valor){
fbCurrent=containerId;
if(fabPan=="no"){
var canvasWrapper = document.getElementById(containerId);
$(canvasWrapper).mousedown(fabStartPan);
}
fabPan=valor;
}
function fabSetSelected(containerId,name){
window[name].name=name;
}
function fabNewName(containerId){
fabContador++;
nombre=containerId+"Object"+fabContador;
return nombre;
}
function fabSaveAsPNG(containerId){
window.open(window["Canvas"+containerId].toDataURL('image/png'));
}
function fabSaveAsSVG(containerId){
var svg = window["Canvas"+containerId].toSVG();
return svg;
}
function fabSaveAsJSON(containerId){
var json = JSON.stringify(window["Canvas"+containerId].toJSON());
return json;
}
function fabLoadFromJSON(containerId,json){
window["Canvas"+containerId].clear();
window["Canvas"+containerId].loadFromJSON(json);
objects = window["Canvas"+containerId].getObjects();
for (var i = 0, len = window["Canvas"+containerId].size(); i < len; i++) {
nombre="Object"+i;
objects[i].name = nombre;
window[nombre]=objects[i];
fabSetSelected(containerId,nombre);
}
window["Canvas"+containerId].renderAll();
window["Canvas"+containerId].calcOffset();
}
function fabGroup(containerId){
var activegroup = window["Canvas"+containerId].getActiveGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function(newgroup) {
window["Canvas"+containerId].discardActiveGroup();
objectsInGroup.forEach(function(object) {
window["Canvas"+containerId].remove(object);
});
window["Canvas"+containerId].add(newgroup);
});
}
function fabUngroup(containerId){
var items = window["Canvas"+containerId].getActiveObject()._objects;
window["Canvas"+containerId].getActiveObject()._restoreObjectsState();
window["Canvas"+containerId].remove(window["Canvas"+containerId].getActiveObject());
for(var i = 0; i < items.length; i++) {
window["Canvas"+containerId].add(items[i]);
}
window["Canvas"+containerId].renderAll();
fabSelectAll(containerId);
fabUnselect(containerId);
}
function fabSelectAll(containerId){
var objs = window["Canvas"+containerId].getObjects().map(function(o) {
return o.set('active', true);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
window["Canvas"+containerId]._activeObject = null;
window["Canvas"+containerId].setActiveGroup(group.setCoords()).renderAll();
}
function fabNewText(containerId,name,texto,x,y,fill,fuente,tamano,angulo){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.Text(texto, {
fill: fill,
left: x,
top: y,
fontFamily: fuente,
fontSize: tamano,
angle:angulo
});
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabNewInteractiveText(containerId,name,texto,x,y,fill,fuente,tamano,angulo){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.IText(texto, {
fill: fill,
left: x,
top: y,
fontFamily: fuente,
fontSize: tamano,
angle:angulo
});
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabCloneSelectedObject(containerId,newName){
if(newName==""){
newName=fabNewName(containerId);
}
window[newName] = fabric.util.object.clone(window["Canvas"+containerId].getActiveObject());
window[newName].set("top", window[newName].top+5);
window[newName].set("left", window[newName].left+5);
window[newName].name=newName;
window["Canvas"+containerId].add(window[newName]);
fabSetSelected(containerId,newName);
}
function fabCopy(containerId) {
window["Canvas"+containerId].getActiveObject().clone(function(cloned) {
_clipboard = cloned;
});
}
function fabPaste(containerId) {
// clone again, so you can do multiple copies.
_clipboard.clone(function(clonedObj) {
window["Canvas"+containerId].discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
clonedObj.canvas = canvas;
clonedObj.forEachObject(function(obj) {
canvas.add(obj);
});
// this should solve the unselectability
clonedObj.setCoords();
} else {
window["Canvas"+containerId].add(clonedObj);
}
_clipboard.top += 10;
_clipboard.left += 10;
window["Canvas"+containerId].setActiveObject(clonedObj);
window["Canvas"+containerId].requestRenderAll();
});
window["Canvas"+containerId].renderAll();
}
function fabLoadImage(containerId,name,url,x,y){
if(name==""){
name=fabNewName(containerId);
}
var imgObj = new Image();
imgObj.src = url;
imgObj.onload = function () {
window[name] = new fabric.Image(imgObj);
window[name].set({
top: y,
left: x
});
window["Canvas"+containerId].add(window[name]);
window["Canvas"+containerId].renderAll();
}
}
function fabNewRect(containerId,name,x,y,width,height,fill){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.Rect({
left: x,
top: y,
fill: fill,
width: width,
height: height
});
window[name].name=name;
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabNewPath(containerId,name,path,x,y,fill){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.Path(path);
window[name].set({ left: x, top: y, fill: fill });
window[name].name=name;
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabNewLine(containerId,name,x1,y1,x2,y2,strokeWidth,strokeColor){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.Line([x1, y1, x2, y2], {
strokeWidth: strokeWidth,
stroke: strokeColor
});
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabNewCircle(containerId,name,x,y,radius,fill){
if(name==""){
name=fabNewName(containerId);
}
window[name] = new fabric.Circle({
radius: radius, fill: fill, left: x, top: y
});
window["Canvas"+containerId].add(window[name]);
fabSetSelected(containerId,name);
}
function fabSetShadow(containerId,name,theColor,despX,despY,theBlur){
if(name==""){
window["fabSelected"].setShadow({
color: theColor,
offsetX: despX,
offsetY: despY,
blur: theBlur
});
}else{
window[name].setShadow({
color: theColor,
offsetX: despX,
offsetY: despY,
blur: theBlur
});
}
window["Canvas"+containerId].renderAll();
}
function fabAnimate(containerId,name,animation,duration,easing){
ease=fabric.util.ease.easeOutCubic;
if(easing!=""){
ease=fabric.util.ease[easing];
}
if(name==""){
window["fabSelected"].animate(animation, {
duration: duration,
onChange: window["Canvas"+containerId].renderAll.bind(window["Canvas"+containerId]),
easing: ease
});
}else{
window[name].animate(animation, {
duration: duration,
onChange: window["Canvas"+containerId].renderAll.bind(window["Canvas"+containerId]),
easing: ease
});
}
window["Canvas"+containerId].renderAll();
}
function fabSetFill(containerId,name,value){
if(name==""){
window["fabSelected"].set({ fill: value });
}else{
window[name].set({ fill: value });
}
window["Canvas"+containerId].renderAll();
}
function fabBringToFront(containerId,name){
if(name==""){
window["fabSelected"].bringToFront(window[name]);
}else{
window[name].bringToFront(window[name]);
}
}
function fabSendToBack(containerId,name){
if(name==""){
window["fabSelected"].sendToBack(window[name]);
}else{
window[name].sendToBack(window[name]);
}
}
function fabScale(containerId,name,escala){
if(name==""){
window["fabSelected"].scale(parseFloat(escala)).setCoords();
}else{
window[name].scale(parseFloat(escala)).setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabCenterObject(containerId,name){
if(name==""){
window["fabSelected"].center();
window["fabSelected"].setCoords();
}else{
window[name].center();
window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabCenterObjectHorizontal(containerId,name){
if(name==""){
window["fabSelected"].centerH();
window["fabSelected"].setCoords();
}else{
window[name].centerH();
window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabCenterObjectVertical(containerId,name){
if(name==""){
window["fabSelected"].centerV();
window["fabSelected"].setCoords();
}else{
window[name].centerV();
window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabClear(containerId){
window["Canvas"+containerId].clear();
window["Canvas"+containerId].renderAll();
}
function fabRemove(containerId,name){
if(name==""){
window["Canvas"+containerId].remove(window["Canvas"+containerId].getActiveObject());
}else{
window["Canvas"+containerId].remove(window[name]);
}
}
function fabSetActiveObject(containerId,name){
if(name==""){
return
}else{
window["Canvas"+containerId].setActiveObject(window[name]);
}
}
function fabSetBgColor(containerId,color){
window["Canvas"+containerId].setBackgroundColor(color);
window["Canvas"+containerId].renderAll();
}
function fabUnselect(containerId){
window["Canvas"+containerId].discardActiveObject();
window["Canvas"+containerId].renderAll();
}
function fabSetZoom(containerId,zoom){
window["Canvas"+containerId].setZoom(zoom);
window["Canvas"+containerId].renderAll();
}
function fabZoomToPoint(containerId,zoom,x,y){
punto=new fabric.Point(x,y);
window["Canvas"+containerId].zoomToPoint(punto);
window["Canvas"+containerId].renderAll();
}
function fabPanTo(containerId,x,y){
punto=new fabric.Point(x,y);
window["Canvas"+containerId].absolutePan(punto);
}
function fabRelativePan(containerId,offsetX,offsetY){
punto=new fabric.Point(offsetX,offsetY);
window["Canvas"+containerId].relativePan(punto);
}
function fabGetProperty(containerId,name,property){
if(name==""){
resultado=window["fabSelected"].get(property);
}else{
resultado=window[name].get(property);
}
return resultado;
}
function fabSetProperty(containerId,name,property,valor){
if(name==""){
resultado=window["fabSelected"].set(property,valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set(property,valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSet(containerId,name,objeto){
if(name==""){
resultado=window["fabSelected"].set(objeto);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set(objeto);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabOriginX(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].originX=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].originX=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabOriginY(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].originY=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].originY=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabScaleToWidth(containerId,name,anchura){
if(name==""){
resultado=window["fabSelected"].scaleToWidth(anchura);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].scaleToWidth(anchura);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabScaleToHeight(containerId,name,altura){
if(name==""){
resultado=window["fabSelected"].scaleToHeight(altura);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].scaleToHeight(altura);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetLeft(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("left",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("left",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetTop(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("top",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("top",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetOpacity(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("opacity",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("opacity",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetStrokeColor(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("stroke",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("stroke",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetStrokeWidth(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("strokeWidth",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("strokeWidth",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSetTextAlign(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].textAlign=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].textAlign=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSelectable(containerId,name,valor){
window["Canvas"+containerId].discardActiveObject();
if(name==""){
resultado=window["fabSelected"].selectable=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].selectable=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabHasControls(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].hasControls=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].hasControls=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabHasBorders(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].hasBorders=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].hasBorders=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabHasRotatingPoint(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].hasRotatingPoint=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].hasRotatingPoint=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabFlipX(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("flipX",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("flipX",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabFlipY(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].set("flipY",valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].set("flipY",valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabLockMovementX(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].lockMovementX=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].lockMovementX=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabLockMovementY(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].lockMovementY=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].lockMovementY=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabLockRotation(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].lockRotation=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].lockRotation=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabLockScaling(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].lockScalingY=valor;
resultado=window["fabSelected"].lockScalingX=valor;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].lockScalingY=valor;
resultado=window[name].lockScalingX=valor;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabAddEvent(containerId,name,evento,funcion){
var neoApp = angular.element(document.getElementById("ng-view")).scope();
if(name==""){
window["fabSelected"].on(evento, funcion);
}else{
window[name].on(evento, funcion);
}
}
function fabDrawingMode(containerId,valor,elcolor,elwidth){
window["Canvas"+containerId].freeDrawingBrush.color=elcolor;
window["Canvas"+containerId].freeDrawingBrush.width=elwidth;
window["Canvas"+containerId].isDrawingMode=valor;
window["Canvas"+containerId].renderAll();
}
function fabSaveLocal(containerId,name){
if(!window.localStorage){alert("Not supported on this browser."); return;}
var json = JSON.stringify(window["Canvas"+containerId]);
window.localStorage.setItem(name, json);
}
function fabLoadLocal(containerId,thename){
if(!window.localStorage){alert("Not supported on this browser."); return;}
window["Canvas"+containerId].clear();
window["Canvas"+containerId].loadFromJSON(window.localStorage.getItem(thename));
objects = window["Canvas"+containerId].getObjects();
for (var i = 0, len = window["Canvas"+containerId].size(); i < len; i++) {
nombre="Object"+i;
objects[i].name = nombre;
window[nombre]=objects[i];
fabSetSelected(containerId,nombre);
}
window["Canvas"+containerId].renderAll();
window["Canvas"+containerId].calcOffset();
}
function fabDeleteLocal(name){
if(!window.localStorage){alert("Not supported on this browser."); return;}
window.localStorage.removeItem(name);
}
function fabFontFamily(containerId,name,fuente){
if(name==""){
resultado=window["fabSelected"].fontFamily=fuente;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].fontFamily=fuente;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabFontSize(containerId,name,size){
if(name==""){
resultado=window["fabSelected"].fontSize=size;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].fontSize=size;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabFontStyle(containerId,name,style){
if(name==""){
resultado=window["fabSelected"].fontStyle=style;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].fontStyle=style;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabFontWeight(containerId,name,weight){
if(name==""){
resultado=window["fabSelected"].fontWeight=weight;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].fontWeight=weight;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabTextAlign(containerId,name,align){
if(name==""){
resultado=window["fabSelected"].textAlign=align;
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].textAlign=align;
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
}
function fabSavePDF(containerId,name){
//Necesita jsPDF y FileSaver.js
window["Canvas"+containerId].renderAll();
var doc = new jsPDF();
var base64 = window["Canvas"+containerId].toDataURL('image/jpg');
doc.addImage(base64, 'JPEG', 0, 0);
var data = doc.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
array[i] = data.charCodeAt(i);
}
var blob = new Blob(
[array],
{type: 'application/pdf', encoding: 'raw'}
);
saveAs(blob, name);
window["Canvas"+containerId].renderAll();
}
function fabToggle(containerId,name,valor){
if(name==""){
resultado=window["fabSelected"].toggle(valor);
resultado=window["fabSelected"].setCoords();
}else{
resultado=window[name].toggle(valor);
resultado=window[name].setCoords();
}
window["Canvas"+containerId].renderAll();
};
var fabElNombre;
function fabLoadSVGFromString(containerId,name,svgStr,x,y){
if(name==""){
fabElNombre=fabNewName(containerId);
}else{
fabElNombre=name;
}
var path = fabric.loadSVGFromString(svgStr,function(objects, options) {
window[fabElNombre] = fabric.util.groupSVGElements(objects, options);
window[fabElNombre].set({ left:x, top:y});
window[fabElNombre].setCoords();
window["Canvas"+containerId].add(window[fabElNombre]).renderAll();
});
//fabSetSelected(containerId,name);
};
function fabIntersectsWith(name1,name2){
window[name1].setCoords();
window[name2].setCoords();
return window[name1].intersectsWithObject(window[name2])
};
//***********************************************************************************************
//
// ORGANIZATION CHART CAPABILITIES
//
//***********************************************************************************************
fabContenedor="";
fabLineColor="#ff0000";
function fabInitializeOrgChart(containerId) {
fabContenedor=containerId;
var ancho= $("#"+containerId).width();
var alto= $("#"+containerId).height();
$("#"+containerId).html('<canvas id="'+containerId+'Canvas" width="'+ancho+'" height="'+alto+'" style="width:'+ancho+'px;height:'+alto+'px"><\/canvas>');
window["Canvas"+containerId] = new fabric.Canvas(containerId+"Canvas", {
//Transparent Background.
backgroundColor: 'rgba(255,255,255,0)',
selectionColor: 'rgba(25,25,255,0.2)',
selectionBorderColor: 'rgba(25,25,255,0.7)',
selectionLineWidth: 1
});
window["Canvas"+containerId].centeredRotation=true;
window["Canvas"+containerId].on('object:selected', function(){
//La variable fabSelected guarda el objeto seleccionado en cada momento tan pronto como se selecciona.
window["fabSelected"]=window["Canvas"+containerId].getActiveObject();
});
fabAddChildMoveLine('object:selected');
fabAddChildMoveLine('object:scaling');
fabAddChildMoveLine('object:moving');
//window["Canvas"+containerId].centeredScaling=true;
}
window.fabAddChild = function(elcolor){
if(elcolor!=undefined){
fabLineColor=elcolor;
}
window["Canvas"+fabContenedor].fabAddChild = {
start: window["Canvas"+fabContenedor].getActiveObject()
};
window["Canvas"+fabContenedor].off('object:selected', fabAddChildLine);
window["Canvas"+fabContenedor].on('object:selected', fabAddChildLine);
};
function fabAddChildLine(options){
window["Canvas"+fabContenedor].off('object:selected', fabAddChildLine);
var fromObject = window["Canvas"+fabContenedor].fabAddChild.start;
var toObject = options.target;
var from = fromObject.getCenterPoint();
var to = toObject.getCenterPoint();
var line = new fabric.Line([from.x, from.y, to.x, to.y], {
fill: fabLineColor,
stroke: fabLineColor,
strokeWidth: 5,
selectable: false
});
window["Canvas"+fabContenedor].add(line);
line.sendToBack();
fromObject.fabAddChild = {
from: (fromObject.fabAddChild && fromObject.fabAddChild.from) || [],
to: (fromObject.fabAddChild && fromObject.fabAddChild.to)
};
fromObject.fabAddChild.from.push(line);
toObject.fabAddChild = {
from: (toObject.fabAddChild && toObject.fabAddChild.from),
to: (toObject.fabAddChild && toObject.fabAddChild.to) || []
};
toObject.fabAddChild.to.push(line);
line.fabAddChildRemove = function() {
fromObject.fabAddChild.from.forEach(function(e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
toObject.fabAddChild.to.forEach(function(e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
};
window["Canvas"+fabContenedor].fabAddChild = undefined;
};
function fabAddChildMoveLine(event){
window["Canvas"+fabContenedor].on(event, function(options) {
var object = options.target;
var objectCenter = object.getCenterPoint();
if (object.fabAddChild) {
if (object.fabAddChild.from)
object.fabAddChild.from.forEach(function(line) {
line.set({ 'x1': objectCenter.x, 'y1': objectCenter.y });
});
if (object.fabAddChild.to)
object.fabAddChild.to.forEach(function(line) {
line.set({ 'x2': objectCenter.x, 'y2': objectCenter.y });
});
}
window["Canvas"+fabContenedor].renderAll();
});
};
window.fabDeleteObject = function () {
var object = window["Canvas"+fabContenedor].getActiveObject();
if (object.fabAddChild) {
if (object.fabAddChild.from)
for (var i = object.fabAddChild.from.length - 1; i >= 0; i--) {
var line = object.fabAddChild.from[i];
line.fabAddChildRemove();
line.remove();
};
if (object.fabAddChild.to)
for (var i = object.fabAddChild.to.length - 1; i >= 0; i--) {
var line = object.fabAddChild.to[i];
line.fabAddChildRemove();
line.remove();
};
}
object.remove();
};
C:\Users\sinli\OneDrive\CloudStation\visualneo\VisualNeoWeb\Plugins\Fabric\fabric.js-3.2\fabric.min.js
Adds an event to an Object.
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;evento|ENUMLIST=added,removed,selected,deselected,modified,modified,moved,scaled,rotated,skewed,rotating,scaling,moving,skewing,mousedown,mouseup,mouseover,mouseout,mousewheel,mousedblclick,dragover,dragenter,dragleave,drop|Event Name;funcion|FUNCTION|Function name to call when event fires
fabAddEvent(containerId,name,evento,funcion);
Animates object's properties
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;animation|VARREF|Animation description (ie:{left:100,top:100,angle:'+=180'} or CSS object);duration|INTEGER|Duration in milliseconds;"easing|ENUMLIST=easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeInOutBounce,""easeOutBounce ""|Easing"
fabAnimate(containerId,name,animation,duration,easing);
Bring to front to an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabBringToFront(containerId,name);
Centers in canvas an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabCenterObject(containerId,name);
Centers horizontally in canvas an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabCenterObjectHorizontal(containerId,name);
Centers vertically in canvas an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabCenterObjectVertical(containerId,name);
Clear the canvas
containerId|STRING|Select an initializazed Container Object
fabClear(containerId);
containerId|OBJID|Select an initializazed Container Object;newName|STRING|Name for the new object
fabCloneSelectedObject(containerId,newName);
Deletes a previously saved local image
name|STRING|Image name (ie:mydrawing)
fabDeleteLocal(name);
Turns on or off the freehand drawing mode.
containerId|OBJID|Select an initializazed Container Object;valor|BOOLEAN|Drawing mode (true or false);elcolor|STRING|Line color (ie: #ff0000);elwidth|FLOAT|Line width
fabDrawingMode(containerId,valor,elcolor,elwidth);
Changes the font family in a Text Object
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;fuente|STRING|Font Family
fabFontFamily(containerId,name,fuente);
Changes the Font size (in pixels)
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;size|INTEGER|Font Size
fabFontSize(containerId,name,size);
Font style. Possible values: "", "normal", "italic" or "oblique".
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;style|ENUMLIST=normal,italic,oblique|Font Style
fabFontStyle(containerId,name,style);
Font weight (ie: bold, normal)
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;weight|ENUMLIST=normal,bold|Font Weight
fabFontWeight(containerId,name,weight);
When true, object is fliped horizontally
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|BOOLEAN|FlipX (true or false)
fabFlipX(containerId,name,valor);
When true, object is fliped vertically
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|BOOLEAN|FlipY (true or false)
fabFlipY(containerId,name,valor);
Gets an object property value
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;property|STRING|Property name;result|VARREF|Variable to store the result
result=fabGetProperty(containerId,name,property);
When set to false, object's controlling borders are not rendered
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|BOOLEAN|Has Borders (true or false)
fabHasBorders(containerId,name,valor);
When set to 'false', object's controls are not displayed and can not be used to manipulate object
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Has controls (true or false)
fabHasControls(containerId,name,valor);
Initializes the library on a container object
containerId|OBJID|Select a Container Object from your App
fabInitialize(containerId);
Initializes the library on a container Object with Org Chart Capabilities
containerId|OBJID|Select a Container Object from your App
fabInitializeOrgChart(containerId);
Initializes the library on a container Object without interactivity layer
containerId|OBJID|Select a Container Object from your App
fabInitializeStatic(containerId);
resultado|VARREF|Var to store the result;name1|STRING|Object 1 name;name2|STRING|Object 2 name
resultado=fabIntersectsWith(name1,name2);
Loads an image from a URL
containerId|OBJID|Select an initializazed Container Object;name|STRING|Image name;url|FILEPATH|Image URL and file name;x|INTEGER|Left position;y|INTEGER|Top position
fabLoadImage(containerId,name,url,x,y);
containerId|OBJID|Select an initializazed Container Object;json|STRING|JSON string
fabLoadFromJSON(containerId,json);
Loads a previously saved local image
containerId|OBJID|Select an initializazed Container Object;name|STRING|Image name (ie:mydrawing)
fabLoadLocal(containerId,name);
Loads a SVG image from a URL
containerId|OBJID|Select an initializazed Container Object;name|STRING|Image name;svgstring|HTML|SVG string;x|INTEGER|Left position;y|INTEGER|Top position
fabLoadSVGFromString(containerId,name,svgstring,x,y);
When true, object horizontal movement is locked
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Lock Movement X (true or false)
fabLockMovementX(containerId,name,valor);
When true, object vertical movement is locked
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Lock Movement X (true or false)
fabLockMovementY(containerId,name,valor);
When true, object rotation is locked
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Lock Rotation (true or false)
fabLockRotation(containerId,name,valor);
When true, object scaling is locked
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Lock Scaling (true or false)
fabLockScaling(containerId,name,valor);
Add a circle
containerId|OBJID|Select an initializazed Container Object;name|STRING|Circle name;x|INTEGER|Left position;y|INTEGER|Top position;radius|INTEGER|Circle radius;fill|STRING|Fill color. Ex: #ff0000
fabNewCircle(containerId,name,x,y,radius,fill);
Adds a line
containerId|OBJID|Select an initializazed Container Object;name|STRING|Line name;x1|INTEGER|X1 Left origin position;y1|INTEGER|Y1 Top origin position;x2|INTEGER|X2 Left destination position;y2|INTEGER|Y2 Top destination position;strokeWidth|INTEGER|Stroke Width;strokeColor|STRING|Stroke Color ie:#ff0000
fabNewLine(containerId,name,x1,y1,x2,y2,strokeWidth,strokeColor)
Adds a path
containerId|OBJID|Select an initializazed Container Object;name|STRING|Rectangle Name;path|STRING|Path to draw (ie: 'M 0 0 L 200 100 L 170 200 z');x|INTEGER|Left position;y|INTEGER|Top position;fill|STRING|Fill color Ex: #ff0000
fabNewPath(containerId,name,path,x,y,fill);
Adds a rectangle
containerId|OBJID|Select an initializazed Container Object;name|STRING|Rectangle Name;x|INTEGER|Left position;y|INTEGER|Top position;width|INTEGER|Rectangle width;height|INTEGER|Rectangle Height;fill|STRING|Fill color Ex: #ff0000
fabNewRect(containerId,name,x,y,width,height,fill);
Adds a new text
containerId|OBJID|Select an initializazed Container Object;name|STRING|Text name;texto|STRING|Text to write;x|INTEGER|Left position;y|INTEGER|Top position;fill|STRING|Fill color. Ex: #ff0000;fuente|STRING|Font Family (ie:Georgia);tamano|INTEGER|Font Size (ie:20);angulo|INTEGER|Angle (ie:45)
fabNewText(containerId,name,texto,x,y,fill,fuente,tamano,angulo);
Adds a new interactive (user editable) text
containerId|OBJID|Select an initializazed Container Object;name|STRING|Text name;texto|STRING|Text to write;x|INTEGER|Left position;y|INTEGER|Top position;fill|STRING|Fill color. Ex: #ff0000;fuente|STRING|Font Family (ie:Georgia);tamano|INTEGER|Font Size (ie:20);angulo|INTEGER|Angle (ie:45)
fabNewInteractiveText(containerId,name,texto,x,y,fill,fuente,tamano,angulo);
Horizontal origin of transformation of an object (one of "left", "right", "center")
containerId|OBJID|Select an initializazed Container Object;name|STRING|Text name;valor|STRING|Origin X (left,center,right)
fabOriginX(containerId,name,valor);
Vertical origin of transformation of an object (one of "top", "bottom", "center")
containerId|OBJID|Select an initializazed Container Object;name|STRING|Text name;valor|STRING|Origin Y (top,center,bottom)
fabOriginY(containerId,name,valor);
Pans the canvas to a specific absolute point
containerId|OBJID|Select an initializazed Container Object;x|INTEGER|X position;y|INTEGER|Y position
fabPanTo(containerId,x,y);
Turns On or Off panning with mouse right button
containerId|OBJID|Select an initializazed Container Object;valor|BOOLEAN|Pan when dragging with mouse right button
fabPanning(containerId,valor);
Pans the canvas by an offset distance in both axis
containerId|OBJID|Select an initializazed Container Object;offsetX|INTEGER|X Offset;offsetY|INTEGER|Y Offset
fabRelativePan(containerId,offsetX,offsetY);
Removes an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabRemove(containerId,name);
containerId|OBJID|Select an initializazed Container Object;mivar|VARREF|Variable to store the result
mivar= fabSaveAsJSON(containerId);
Saves the canvas as a PNG image file with background transparency
containerId|OBJID|Select an initializazed Container Object
fabSaveAsPNG(containerId);
Saves the canvas as a SVG image file into a variable
containerId|OBJID|Select an initializazed Container Object;mivar|VARREF|Variable to store the result
mivar= fabSaveAsSVG(containerId);
Save a copy on the local system
containerId|OBJID|Select an initializazed Container Object;name|STRING|Image name (ie:mydrawing)
fabSaveLocal(containerId,name);
Sets the scale to an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;escala|FLOAT|Scale (ie:0.25)
fabScale(containerId,name,escala);
Saves de image as PDF (needs jsPDF and FileSaver.js libraries to be loaded)
containerId|OBJID|Select an initializazed Container Object;name|STRING|PDF file name
fabSavePDF(containerId,name);
Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;altura|FLOAT|Height
fabScaleToHeight(containerId,name,altura);
Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;anchura|FLOAT|Width
fabScaleToWidth(containerId,name,anchura);
Sets the selectable property of an object
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Selectable (true or false)
fabSelectable(containerId,name,valor);
Sends to back to an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name
fabSendToBack(containerId,name);
Sets many properties on one single action
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;objeto|VARREF|Properties. ie: {top:0,left:10,angle:90} or CSS object
fabSet(containerId,name,objeto);
Sets an object active by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name (mandatory)
fabSetActiveObject(containerId,name);
Sets the canvas background color
containerId|OBJID|Select an initializazed Container Object;color|STRING|Color value (ie: #ff0000)
fabSetBgColor(containerId,color);
Sets the fill color for any object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Name of the object to fill. Left empty for currently selected object;value|STRING|Color value (ie: #ff0000)
fabSetFill(containerId,name,value);
Sets object's left position
containerId|STRING|Select an initializazed Container Object;name|STRING|Object name;valor|FLOAT|Left distance
fabSetLeft(containerId,name,valor)
Sets object's opacity
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|FLOAT|Opacity value (0-1)
fabSetOpacity(containerId,name,valor);
Set any property value
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;property|ENUMLIST=angle,left,top,skewX,skewY,scaleX,scaleY,scale,backgroundColor,fill,borderColor,centeredRotation,centeredScaling,flipX,flipY,height,width,hoverCursor,,|Property name;valor|STRING|Property value
fabSetProperty(containerId,name,property,valor);
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;property|ENUMLIST=angle,height,left,opacity,padding,scaleX,scaleY,skewX,skewY,strokeWidth,top,width|Property name;valor|FLOAT|Property value
fabSetProperty(containerId,name,property,valor);
When set to false, object's controlling rotating point will not be visible or selectable
containerId|OBJID|Select an initializazed Container Object;name|STRING|Objects name;valor|BOOLEAN|Has Rotating Point (true or false)
fabHasRotatingPoint(containerId,name,valor);
Sets a shadow to an object selected on canvas or by its name
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;theColor|STRING|Shadow color (ie:#000000);despX|INTEGER|X offset in pixels;despY|INTEGER|Y offset in pixels;theBlur|INTEGER|Blur (ie:10)
fabSetShadow(containerId,name,theColor,despX,despY,theBlur);
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|STRING|Stroke color (ie:#ff0000)
fabSetStrokeColor(containerId,name,valor);
Sets object's strokeWidth
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|FLOAT|Stroke width
fabSetStrokeWidth(containerId,name,valor);
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|STRING|left, right, center or justify
fabSetTextAlign(containerId,name,valor);
Sets object's top position
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|FLOAT|Top distance
fabSetTop(containerId,name,valor);
Sets the Canvas Zoom
containerId|OBJID|Select an initializazed Container Object;zoom|FLOAT|Zoom factor (ie:1.5)
fabSetZoom(containerId,zoom);
Text alignment. Possible values: "left", "center", "right" or "justify".
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;align|STRING|Alignment.(left,center,right or justify
fabTextAlign(containerId,name,align);
Toggles a boolean property from true to false or viceversa
containerId|OBJID|Select an initializazed Container Object;name|STRING|Object name;valor|STRING|Boolean property to toggle
fabToggle(containerId,name,valor);
Deactivate all selected objects
containerId|OBJID|Select an initializazed Container Object
fabUnselect(containerId);
Zoom the canvas centered in a given point
containerId|OBJID|Select an initializazed Container Object;zoom|FLOAT|Zoom factor (ie:1.5);x|INTEGER|X point coordinate;y|INTEGER|Y point coordinate
fabZoomToPoint(containerId,zoom,x,y);
Copy
containerId|OBJID|Select an initializazed Container Object
fabCopy(containerId);
Paste
containerId|STRING|Select an initializazed Container Object
fabPaste(containerId);
Group
containerId|STRING|Select an initializazed Container Object
fabGroup(containerId);
Ungroup
containerId|STRING|Select an initializazed Container Object
fabUngroup(containerId);