Javascript TypeError:“输入错误”；实例[methodName]不是函数"；-结构js错误
我试着用线连接画布上的两个人物，这条线会粘在人物上，所以人物在画布上移动的地方，相应的箭头也会移动 它的工作方式与我预期的相同，但在我通过调用方法Javascript TypeError:“输入错误”；实例[methodName]不是函数"；-结构js错误,javascript,angular,typescript,fabricjs,Javascript,Angular,Typescript,Fabricjs,我试着用线连接画布上的两个人物，这条线会粘在人物上，所以人物在画布上移动的地方，相应的箭头也会移动 它的工作方式与我预期的相同，但在我通过调用方法“rasterizeJSON（）”生成JSON时，它给了我一个错误，在应用JSON.stringify（objectName）时，它没有将对象更改为字符串 错误-TypeError:“实例[methodName]不是函数” _ToObject网页包- 导出类工作流编辑器组件{ @ViewChild（“启动”）启动：ElementRef； REC_宽度=
“rasterizeJSON（）”JSON.stringify（objectName）时，它没有将对象更改为字符串
错误-TypeError:“实例[methodName]不是函数”
_ToObject网页包-
导出类工作流编辑器组件{
@ViewChild（“启动”）启动：ElementRef；
REC_宽度=60；
REC_高度=30；
三角宽度=10；
TRI_高度=10；
disX；
迪西；
_self=这个；
开始
私人画布：任何；
私人道具：任何={
画布填充：“#ffffff”，
拉票图像：“”，
id:null，
名称：空，
不透明度：空，
填充：空，
fontSize:null，
线宽：空，
字符间距：null，
fontWeight:null，
fontStyle:null，
textAlign:null，
fontFamily:null，
文本装饰：“”
};
私有文本字符串：字符串；
私有url:string=''；
私人大小：任意={
宽度：1000，
身高：400
};
私有json：任何；
私有全局编辑器：布尔值=false；
私有文本编辑器：boolean=false；
私有imageEditor:boolean=false；
私有figureEditor:boolean=false；
私人选择：任何；
构造函数（）{}
恩戈尼尼特（）{
//['object:moving'].forEach（this.addChildMoveLine）；
//设置正面画布
this.canvas=new fabric.canvas（'canvas'{
光标悬停：“指针”，
选择：正确，
选择边框颜色：“蓝色”
});
变量HideControls={
“tl”：对，
tr:错,，
“bl”：是的，
“br”：是的，
“ml”：对，
“mt”：没错，
“先生”：是的，
“mb”：对，
"港铁":对
};
这是帆布({
'对象：移动'：（e）=>{
这条线（e）；
//控制台日志（e）；
//this.addDeleteBtn（e.target.ocoods.tr.x，e.target.ocoods.tr.y）；
},
'对象：已修改'：（e）=>{
//console.log（“对象修改”）；
this.addDeleteBtn（e.target.ocoods.tr.x，e.target.ocoods.tr.y）；
},
'对象：选定'：（e）=>{
//console.log（“选中画布内部”）；
这条线（e）；
this.addDeleteBtn（e.target.ocoods.tr.x，e.target.ocoods.tr.y）；
让selectedObject=e.target；
console.log（“打印所选对象”+所选对象）；
this.selected=selectedObject
selectedObject.hasRotatingPoint=true；
selectedObject.transparentCorners=false；
//选择Object.cornerColor='rgba（255,87,34,0.7）'；
这是resetPanels（）；
if（selectedObject.type！=='group'&&selectedObject）{
这个.getId（）；
这个.getOpacity（）；
开关（selectedObject.type）{
案例“rect”：
案例“循环”：
案例“三角形”：
this.figureEditor=true；
这个.getFill（）；
打破
案例“i-text”：
this.textEditor=true；
此参数为.getLineHeight（）；
这个.getCharSpacing（）；
这个。getBold（）；
这个.getFontStyle（）；
这个.getFill（）；
this.getTextDecoration（）；
这是getTextAlign（）；
这个.getFontFamily（）；
打破
案例“图像”：
console.log（'image'）；
打破
}
}
},
“选择：清除”：（e）=>{
this.selected=null；
这是resetPanels（）；
}
});
this.canvas.setWidth（this.size.width）；
this.canvas.setHeight（this.size.height）；
//获取对html画布元素及其上下文的引用
//this.canvas.on（'mouse:down'，（e）=>{
//让canvasElement:any=document.getElementById（'canvas'）；
//console.log（canvasElement）
// });
}
//方法将箭头从一个形状连接到另一个形状
addChild（）{
if（this.canvas.getActiveObject（）==null）{
console.log（“内部添加子项if”）；
返回“getactiveobject为空（添加子对象）”；
}
this.canvas.addChild={
开始：this.canvas.getActiveObject（）
};
//当两次单击addChild时的
这是帆布({
'对象：选定'：（e）=>{
此.addChildLine（e）
控制台日志（“移开”+e）；
//this.addDeleteBtn（e.target.ocoods.tr.x，e.target.ocoods.tr.y）；
},
})
这是帆布({
'对象：选定'：（e）=>{
此.addChildLine（e）
控制台日志（“移动行”）；
},
}
);
}
钙质（x1，y1，x2，y2）{
var角度=0，
x、 y；
控制台日志（“箭头角度”，x1，y1，x2，y2）；
x=（x2-x1）；
y=（y2-y1）；
如果（x==0）{
角度=（y==0）？0:（y>0）？Math.PI/2:Math.PI*3/2；
}如果（y==0），则为else{
角度=（x>0）？0:Math.PI；
}否则{
角度=（x<0）？Math.atan（y/x）+Math.PI：（y<0）？Math.atan（y/x）+（2*Math.PI）：Math.atan（y/x）；
}
log（“PI”，Math.PI）；
返回（角度*180/Math.PI+90）；
}
addChildLine（选项）{
这是帆布({
'对象：选定'：（e）=>{
此.addChildLine（e）
控制台日志（“移入线关闭”）；
//this.addDeleteBtn（e.target.ocoods.tr.x，e.target.ocoods.tr.y）；
},
}
)
var fromObject=this.canvas.addChild.start；
console.log（fromObject）；
var toObject=options.target；
console.log（toObject）；
var from=fromObje
export class WorkFlowEditorComponent {
@ViewChild('launch') launch: ElementRef;
REC_WIDTH = 60;
REC_HEIGHT = 30;
TRI_WIDTH = 10;
TRI_HEIGHT = 10;
disX;
disY;
_self = this;
start;
private canvas: any;
private props: any = {
canvasFill: '#ffffff',
canvasImage: '',
id: null,
name: null,
opacity: null,
fill: null,
fontSize: null,
lineHeight: null,
charSpacing: null,
fontWeight: null,
fontStyle: null,
textAlign: null,
fontFamily: null,
TextDecoration: ''
};
private textString: string;
private url: string = '';
private size: any = {
width: 1000,
height: 400
};
private json: any;
private globalEditor: boolean = false;
private textEditor: boolean = false;
private imageEditor: boolean = false;
private figureEditor: boolean = false;
private selected: any;
constructor() { }
ngOnInit() {
// ['object:moving'].forEach(this.addChildMoveLine);
//setup front side canvas
this.canvas = new fabric.Canvas('canvas', {
hoverCursor: 'pointer',
selection: true,
selectionBorderColor: 'blue'
});
var HideControls = {
'tl': true,
'tr': false,
'bl': true,
'br': true,
'ml': true,
'mt': true,
'mr': true,
'mb': true,
'mtr': true
};
this.canvas.on({
'object:moving': (e) => {
this.addChildMoveLine(e);
//console.log(e);
//this.addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
},
'object:modified': (e) => {
//console.log("object modified");
this.addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
},
'object:selected': (e) => {
// console.log("inside canvas selected");
this.addChildMoveLine(e);
this.addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
let selectedObject = e.target;
console.log("printing selected object" + selectedObject);
this.selected = selectedObject
selectedObject.hasRotatingPoint = true;
selectedObject.transparentCorners = false;
// selectedObject.cornerColor = 'rgba(255, 87, 34, 0.7)';
this.resetPanels();
if (selectedObject.type !== 'group' && selectedObject) {
this.getId();
this.getOpacity();
switch (selectedObject.type) {
case 'rect':
case 'circle':
case 'triangle':
this.figureEditor = true;
this.getFill();
break;
case 'i-text':
this.textEditor = true;
this.getLineHeight();
this.getCharSpacing();
this.getBold();
this.getFontStyle();
this.getFill();
this.getTextDecoration();
this.getTextAlign();
this.getFontFamily();
break;
case 'image':
console.log('image');
break;
}
}
},
'selection:cleared': (e) => {
this.selected = null;
this.resetPanels();
}
});
this.canvas.setWidth(this.size.width);
this.canvas.setHeight(this.size.height);
// get references to the html canvas element & its context
// this.canvas.on('mouse:down', (e) => {
// let canvasElement: any = document.getElementById('canvas');
// console.log(canvasElement)
// });
}
//method to connect arrow from one shape to another
addChild() {
if (this.canvas.getActiveObject() == null) {
console.log("inside add child if");
return "getactiveobject is null (add child)";
}
this.canvas.addChild = {
start: this.canvas.getActiveObject()
};
//for when addChild is clicked twice
this.canvas.off({
'object:selected': (e) => {
this.addChildLine(e)
console.log("move off" + e);
//this.addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
},
})
this.canvas.on({
'object:selected': (e) => {
this.addChildLine(e)
console.log("move line");
},
}
);
}
calcArrowAngle(x1, y1, x2, y2) {
var angle = 0,
x, y;
console.log("arrow angle", x1, y1, x2, y2);
x = (x2 - x1);
y = (y2 - y1);
if (x === 0) {
angle = (y === 0) ? 0 : (y > 0) ? Math.PI / 2 : Math.PI * 3 / 2;
} else if (y === 0) {
angle = (x > 0) ? 0 : Math.PI;
} else {
angle = (x < 0) ? Math.atan(y / x) + Math.PI : (y < 0) ? Math.atan(y / x) + (2 * Math.PI) : Math.atan(y / x);
}
console.log("PI", Math.PI);
return (angle * 180 / Math.PI + 90);
}
addChildLine(options) {
this.canvas.off({
'object:selected': (e) => {
this.addChildLine(e)
console.log("move line in off");
//this.addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
},
}
)
var fromObject = this.canvas.addChild.start;
console.log(fromObject);
var toObject = options.target;
console.log(toObject);
var from = fromObject.getCenterPoint();
// console.log(from)
var to = toObject.getCenterPoint();
var fromX = from.x;
var fromY = from.y;
var toX = to.x;
var toY = to.y;
// var disX = REC_WIDTH/2 + TRI_WIDTH/2;
// var disY = REC_HEIGHT/2 + TRI_HEIGHT/2;
//var distanceX, distanceY;
//calibrateLine(fromX, fromY, toX, toY);
var calibrateX = this.REC_WIDTH / 2 + this.TRI_WIDTH / 2;
var calibrateY = this.REC_HEIGHT / 2 + this.TRI_HEIGHT / 2
//storing and calculate x and y axis of the imagrd to be connected
var distanceX, distanceY;
if (fromX < toX) {
distanceX = toX - fromX;
} else {
distanceX = fromX - toX;
}
if (fromY < toY) {
distanceY = toY - fromY;
} else {
distanceY = fromY - toY;
}
if (distanceX > distanceY) {
if (fromX < toX) {
toX -= calibrateX;
} else {
toX += calibrateX;
}
} else {
if (fromY < toY) {
toY -= calibrateY;
} else {
toY += calibrateY;
}
}
var line = new fabric.Line([fromX, fromY, toX, toY], {
fill: 'red',
stroke: 'red',
strokeWidth: 1,
selectable: false,
fromObject: fromObject,
toObject: toObject,
});
// leftover code that we might need but probably not
/*
centerX = (from.x + to.x)/2;
centerY = (from.y + to.y)/2;
deltaX = line.left - centerX;
deltaY = line.top - centerY;
*/
console.log(line.x1)
line.triangle = new fabric.Triangle({
left: line.x2,
top: line.y2,
angle: this.calcArrowAngle(line.x1, line.y1, line.x2, line.y2),
originX: 'center',
originY: 'center',
hasBorders: false,
hasControls: false,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
pointType: 'arrow_start',
width: this.TRI_WIDTH,
height: this.TRI_HEIGHT,
fill: 'red',
selectable: false,
});
var Group = new fabric.Group([line, line.triangle]);
// canvas.add(Group);
var objs = [line, line.triangle];
var add = new fabric.Group(objs);
// this.extend(add, this.randomId());
this.canvas.add(line, line.triangle);
//this.canvas.add(add);
//this.selectItemAfterAdded(add);
//this.canvas.add(Group);
// so that the line is behind the connected shapes
line.sendToBack();
// add a reference to the line to each object
//console.log(fromObject.addChild);
fromObject.addChild = fromObject.addChild || {};
fromObject.addChild.lines = fromObject.addChild.lines || [];
console.log(fromObject.addChild.lines);
fromObject.addChild.lines.push(line);
toObject.addChild = toObject.addChild || {};
//console.log(toObject.addChild);
toObject.addChild.lines = toObject.addChild.lines || [];
console.log(toObject.addChild.lines);
toObject.addChild.lines.push(line);
// to remove line references when the line gets removed
line.addChildRemove = function () {
fromObject.addChild.lines.forEach(function (e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
};
// undefined instead of delete since we are anyway going to do this many times
this.canvas.addChild = undefined;
}
addChildMoveLine(e) {
var self = this;
//console.log("inside child move line");
// this.canvas.on({
// 'object:moving': (e) => {
// console.log("move");
// console.log(e.target);
// this.canvas.on(event, function(options) {
var object = e.target;
// console.log("addChildMoveLine");
// udpate lines (if any)
if (object.addChild && object.addChild.lines) {
object.addChild.lines.forEach(function (line) {
console.log(line.fromObject.getCenterPoint());
var fcenter = line.fromObject.getCenterPoint(),
fx = fcenter.x,
fy = fcenter.y,
tcenter = line.toObject.getCenterPoint(),
tx = tcenter.x,
ty = tcenter.y,
xdis = self.REC_WIDTH / 2 + self.TRI_WIDTH / 2,
ydis = self.REC_HEIGHT / 2 + self.TRI_HEIGHT / 2,
horizontal = Math.abs(tx - line.x1) > Math.abs(ty - line.y1)
line.set({
'x1': fx,
'y1': fy,
'x2': tx + xdis * (horizontal ? (tx < line.x1 ? 1 : -1) : 0),
'y2': ty + ydis * (horizontal ? 0 : (ty < line.y1 ? 1 : -1)),
});
//this.calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
line.triangle.set({
'left': line.x2, 'top': line.y2,
'angle': self.calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
});
});
}
this.canvas.renderAll();
}
calibrateLine(fromX, fromY, toX, toY) {
var distanceX = 0;
var distanceY = 0;
// if (fromX < toX) {
// distanceX = toX - fromX;
// } else {
// distanceX = fromX - toX;
// }
// if (fromY < toY) {
// distanceY = toY - fromY;
// } else {
// distanceY = fromY - toY;
// }
if (distanceX > distanceY) {
if (fromX < toX) {
toX -= this.disX;
} else {
toX += this.disX;
}
} else {
if (fromY < toY) {
toY -= this.disY;
} else {
toY += this.disY;
}
}
}
addDeleteBtn(x, y) {
$(".deleteBtn").remove();
var btnLeft = x - 10;
var btnTop = y - 10;
// <button data-toggle="tooltip" data-placement="bottom" title="Delete element" type="button" class="btn btn-outline-danger"
// [disabled]="!selected" (click)="removeSelected();">
// </button>
var deleteBtn = ' <i class="fa fa-trash deleteBtn" aria-hidden="true" style="position:absolute;top:' + btnTop + 'px;left:' + btnLeft + 'px;cursor:pointer;width:20px;height:20px; " onclick=alert("hrllo")></i>';
$(".canvas-container").append(deleteBtn);
}
/*------------------------Block elements------------------------*/
//Block "Size"
changeSize(event: any) {
console.log("changeSize")
this.canvas.setWidth(this.size.width);
this.canvas.setHeight(this.size.height);
}
//Block "Add text"
addText() {
let textString = this.textString;
let text = new fabric.IText(textString, {
left: 10,
top: 10,
fontFamily: 'helvetica',
angle: 0,
fill: '#000000',
scaleX: 0.5,
scaleY: 0.5,
fontWeight: '',
hasRotatingPoint: true
});
this.extend(text, this.randomId());
this.canvas.add(text);
this.selectItemAfterAdded(text);
this.textString = '';
}
//Block "Add images"
getImgPolaroid(event: any, src: any) {
console.log("inside polaroid method");
let el = event.target;
console.log(src);
fabric.Image.fromURL(src, (image) => {
image.set({
left: 10,
top: 10,
angle: 0,
padding: 10,
cornersize: 10,
//hasRotatingPoint: true,
peloas: 12,
hasControls: false
});
image.setWidth(50);
image.setHeight(50);
this.extend(image, this.randomId());
this.canvas.add(image);
this.selectItemAfterAdded(image);
});
}
//Block "Upload Image"
addImageOnCanvas(url) {
if (url) {
fabric.Image.fromURL(url, (image) => {
image.set({
left: 10,
top: 10,
angle: 0,
padding: 10,
cornersize: 10,
hasRotatingPoint: true
});
image.setWidth(200);
image.setHeight(200);
this.extend(image, this.randomId());
this.canvas.add(image);
this.selectItemAfterAdded(image);
});
}
}
readUrl(event) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (event) => {
this.url = event.target['result'];
}
reader.readAsDataURL(event.target.files[0]);
}
}
removeWhite(url) {
this.url = '';
};
//Block "Add figure"
addFigure(figure) {
let add: any;
switch (figure) {
case 'rectangle':
add = new fabric.Rect({
width: 60, height: 30, left: 100, top: 100, angle: 0,
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1,
hasControls: false
});
break;
case 'square':
add = new fabric.Rect({
width: 50, height: 50, left: 10, top: 10, angle: 0,
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1,
hasControls: false
});
break;
case 'triangle':
add = new fabric.Rect({
left: 100, top: 100, width: 20, height: 20, angle: 45,
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1,
hasControls: false
});
break;
case 'circle':
add = new fabric.Circle({
radius: 20, left: 10, top: 10,
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1,
hasControls: false
});
break;
case 'line':
var triangle = new fabric.Triangle({
width: 10,
height: 15,
fill: 'red',
left: 235,
top: 65,
angle: 90
});
var line = new fabric.Line([50, 100, 200, 100], {
left: 75,
top: 70,
stroke: 'red'
});
var objs = [line, triangle];
add = new fabric.Group(objs);
break;
}
this.extend(add, this.randomId());
this.canvas.add(add);
this.selectItemAfterAdded(add);
}
/*Canvas*/
cleanSelect() {
this.canvas.deactivateAllWithDispatch().renderAll();
}
selectItemAfterAdded(obj) {
this.canvas.deactivateAllWithDispatch().renderAll();
this.canvas.setActiveObject(obj);
}
setCanvasFill() {
if (!this.props.canvasImage) {
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
}
}
extend(obj, id) {
obj.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
id: id,
name: name
});
};
})(obj.toObject);
}
setCanvasImage() {
console.log("setCanvasImage");
let self = this;
if (this.props.canvasImage) {
this.canvas.setBackgroundColor({ source: this.props.canvasImage, repeat: 'repeat' }, function () {
// self.props.canvasFill = '';
self.canvas.renderAll();
});
}
}
randomId() {
return Math.floor(Math.random() * 999999) + 1;
}
/*------------------------Global actions for element------------------------*/
getActiveStyle(styleName, object) {
object = object || this.canvas.getActiveObject();
if (!object) return '';
return (object.getSelectionStyles && object.isEditing)
? (object.getSelectionStyles()[styleName] || '')
: (object[styleName] || '');
}
setActiveStyle(styleName, value, object) {
object = object || this.canvas.getActiveObject();
if (!object) return;
if (object.setSelectionStyles && object.isEditing) {
var style = {};
style[styleName] = value;
object.setSelectionStyles(style);
object.setCoords();
}
else {
object.set(styleName, value);
}
object.setCoords();
this.canvas.renderAll();
}
getActiveProp(name) {
var object = this.canvas.getActiveObject();
if (!object) return '';
return object[name] || '';
}
setActiveProp(name, value) {
var object = this.canvas.getActiveObject();
if (!object) return;
object.set(name, value).setCoords();
this.canvas.renderAll();
}
clone() {
let activeObject = this.canvas.getActiveObject(),
activeGroup = this.canvas.getActiveGroup();
if (activeObject) {
let clone;
switch (activeObject.type) {
case 'rect':
clone = new fabric.Rect(activeObject.toObject());
break;
case 'circle':
clone = new fabric.Circle(activeObject.toObject());
break;
case 'triangle':
clone = new fabric.Triangle(activeObject.toObject());
break;
case 'i-text':
clone = new fabric.IText('', activeObject.toObject());
break;
case 'image':
clone = fabric.util.object.clone(activeObject);
break;
}
if (clone) {
clone.set({ left: 10, top: 10 });
this.canvas.add(clone);
this.selectItemAfterAdded(clone);
}
}
}
getId() {
//console.log("getId");
this.props.id = this.canvas.getActiveObject().toObject().id;
}
setId() {
console.log("setId");
let val = this.props.id;
let complete = this.canvas.getActiveObject().toObject();
console.log(complete);
this.canvas.getActiveObject().toObject = () => {
complete.id = val;
return complete;
};
}
setName() {
console.log("setName");
let val = this.props.name;
let complete = this.canvas.getActiveObject().toObject();
console.log(complete);
this.canvas.getActiveObject().toObject = () => {
complete.name = val;
return complete;
};
}
getOpacity() {
this.props.opacity = this.getActiveStyle('opacity', null) * 100;
}
setOpacity() {
this.setActiveStyle('opacity', parseInt(this.props.opacity) / 100, null);
}
getFill() {
this.props.fill = this.getActiveStyle('fill', null);
}
setFill() {
this.setActiveStyle('fill', this.props.fill, null);
}
getLineHeight() {
console.log("getLineHeight");
this.props.lineHeight = this.getActiveStyle('lineHeight', null);
}
setLineHeight() {
this.setActiveStyle('lineHeight', parseFloat(this.props.lineHeight), null);
}
getCharSpacing() {
this.props.charSpacing = this.getActiveStyle('charSpacing', null);
}
setCharSpacing() {
this.setActiveStyle('charSpacing', this.props.charSpacing, null);
}
getFontSize() {
this.props.fontSize = this.getActiveStyle('fontSize', null);
}
setFontSize() {
this.setActiveStyle('fontSize', parseInt(this.props.fontSize), null);
}
getBold() {
this.props.fontWeight = this.getActiveStyle('fontWeight', null);
}
setBold() {
this.props.fontWeight = !this.props.fontWeight;
this.setActiveStyle('fontWeight', this.props.fontWeight ? 'bold' : '', null);
}
getFontStyle() {
this.props.fontStyle = this.getActiveStyle('fontStyle', null);
}
setFontStyle() {
this.props.fontStyle = !this.props.fontStyle;
this.setActiveStyle('fontStyle', this.props.fontStyle ? 'italic' : '', null);
}
getTextDecoration() {
this.props.TextDecoration = this.getActiveStyle('textDecoration', null);
}
setTextDecoration(value) {
let iclass = this.props.TextDecoration;
if (iclass.includes(value)) {
iclass = iclass.replace(RegExp(value, "g"), "");
} else {
iclass += ` ${value}`
}
this.props.TextDecoration = iclass;
this.setActiveStyle('textDecoration', this.props.TextDecoration, null);
}
hasTextDecoration(value) {
return this.props.TextDecoration.includes(value);
}
getTextAlign() {
this.props.textAlign = this.getActiveProp('textAlign');
}
setTextAlign(value) {
this.props.textAlign = value;
this.setActiveProp('textAlign', this.props.textAlign);
}
getFontFamily() {
this.props.fontFamily = this.getActiveProp('fontFamily');
}
setFontFamily() {
this.setActiveProp('fontFamily', this.props.fontFamily);
}
/*System*/
removeSelected() {
console.log("removeSelected");
let activeObject = this.canvas.getActiveObject(),
activeGroup = this.canvas.getActiveGroup();
if (activeObject) {
this.canvas.remove(activeObject);
// this.textString = '';
}
else if (activeGroup) {
let objectsInGroup = activeGroup.getObjects();
this.canvas.discardActiveGroup();
let self = this;
objectsInGroup.forEach(function (object) {
self.canvas.remove(object);
});
}
}
bringToFront() {
console.log("bringToFront");
let activeObject = this.canvas.getActiveObject(),
activeGroup = this.canvas.getActiveGroup();
if (activeObject) {
activeObject.bringToFront();
// activeObject.opacity = 1;
}
else if (activeGroup) {
let objectsInGroup = activeGroup.getObjects();
this.canvas.discardActiveGroup();
objectsInGroup.forEach((object) => {
object.bringToFront();
});
}
}
sendToBack() {
let activeObject = this.canvas.getActiveObject(),
activeGroup = this.canvas.getActiveGroup();
if (activeObject) {
activeObject.sendToBack();
// activeObject.opacity = 1;
}
else if (activeGroup) {
let objectsInGroup = activeGroup.getObjects();
this.canvas.discardActiveGroup();
objectsInGroup.forEach((object) => {
object.sendToBack();
});
}
}
confirmClear() {
console.log("confirmClear");
if (confirm('Are you sure?')) {
this.canvas.clear();
}
}
rasterize() {
console.log("rasterize");
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
console.log(this.canvas.toDataURL('png'))
//window.open(this.canvas.toDataURL('png'));
var image = new Image();
image.src = this.canvas.toDataURL('png')
var w = window.open("");
w.document.write(image.outerHTML);
}
}
rasterizeSVG() {
console.log("rasterizeSVG");
console.log(this.canvas.toSVG())
// window.open(
// 'data:image/svg+xml;utf8,' +
// encodeURIComponent(this.canvas.toSVG()));
// console.log(this.canvas.toSVG())
// var image = new Image();
// image.src = this.canvas.toSVG()
var w = window.open("");
w.document.write(this.canvas.toSVG());
};
saveCanvasToJSON() {
let json = JSON.stringify(this.canvas);
localStorage.setItem('Kanvas', json);
console.log('json');
console.log(json);
}
loadCanvasFromJSON() {
let CANVAS = localStorage.getItem('Kanvas');
console.log('CANVAS');
console.log(CANVAS);
// and load everything from the same json
this.canvas.loadFromJSON(CANVAS, () => {
console.log('CANVAS untar');
console.log(CANVAS);
// making sure to render canvas at the end
this.canvas.renderAll();
// and checking if object's "name" is preserved
console.log('this.canvas.item(0).name');
console.log(this.canvas);
});
};
rasterizeJSON() {
console.log("inside rasterize json method");
console.log(this.canvas);
try {
this.json = JSON.stringify(this.canvas);
}
catch (error) {
console.log(error);
}
//below line used for storing json locally on browser
localStorage.setItem("Kanvas", this.json);
}
resetPanels() {
console.log("resetPanels");
// this.launch.nativeElement.click();
this.textEditor = false;
this.imageEditor = false;
this.figureEditor = false;
}
}