共计 9779 个字符，预计需要花费 25 分钟才能阅读完成。
<script>
export default {data () {
return {
setColor: ['#FF0000', '#F2C94C', '#EBFF00', '#9B51E0', '#6FCF97',
'#F2F2F2', '#00FFF0', '#33FF00', '#00A3FF', '#FF00C7', '#FF7A00', '#0075FF']
}
},
mounted () {},
methods: {oCoords (w, h, x2, y2, reg) {
return {tl: this.rotatoNi(x2 - w / 2, y2 - h / 2, x2, y2, reg),
tr: this.rotatoNi(x2 + w / 2, y2 - h / 2, x2, y2, reg),
bl: this.rotatoNi(x2 - w / 2, y2 + h / 2, x2, y2, reg),
br: this.rotatoNi(x2 + w / 2, y2 + h / 2, x2, y2, reg)
}
},
rotatoNi (x1, y1, x2, y2, reg) {// 在平面坐标上，任意点 P(x1,y1)，绕一个坐标点 Q(x2,y2)逆时针旋转 θ 角度后, 新的坐标设为 (x, y) 的计算公式：// x= (x1 - x2)*cos(θ) - (y1 - y2)*sin(θ) + x2 ;
// y= (x1 - x2)*sin(θ) + (y1 - y2)*cos(θ) + y2 ;
let x = parseInt((x1 - x2) * Math.cos(Math.PI * reg / 180) - (y1 - y2) * Math.sin(Math.PI * reg / 180) + x2);
let y = parseInt((x1 - x2) * Math.sin(Math.PI * reg / 180) + (y1 - y2) * Math.cos(Math.PI * reg / 180) + y2);
return {x: x, y: y} // 旋转后的坐标(x,y)
},
rotatoNi2 (x1, y1, x2, y2, reg) {let x = ((x1 - x2) * Math.cos(Math.PI * reg / 180) - (y1 - y2) * Math.sin(Math.PI * reg / 180) + x2);
let y = ((x1 - x2) * Math.sin(Math.PI * reg / 180) + (y1 - y2) * Math.cos(Math.PI * reg / 180) + y2);
return {x: x, y: y} // 旋转后的坐标(x,y)
},
// 左上角直角三角形
creatPath (list, i, type) {//console.log('以后箱体左上角直角三角形数据', list, i, type)
let wc = 0
let x1 = list.x - list.width / 2 + wc
let y1 = list.y - list.height / 2 + wc
let prot = this.rotatoNi(x1, y1, list.x, list.y, list.rotationAngle)
let x = prot.x
let y = prot.y
let u = 'M' + x + '' + y +' L '+ (x + 10) +' '+ y +' L '+ x +' '+ (y + 10) +' z'
var path = new fabric.Path(u);
//console.log(i + '三角形的坐标点', x, y)
return path.set({
angle: list.rotationAngle,
left: x, // 间隔画布上边的间隔
top: y, // 间隔画布左侧的间隔，单位是像素
fill: '#FFFFFF', // 填充的色彩
selectable: false,
stroke: '#FFFFFF', // 边框色彩
opacity: 0.3,
strokeWidth: 1,
id: list.id,
networkPort: list.networkPort,
operateType: type,
});
},
// 创立中心点
makeCircle2 (list) {
var circle = new fabric.Circle({
originX: "center",
originY: "center",
left: list.x, // 间隔画布上边的间隔
top: list.y, // 间隔画布左侧的间隔，单位是像素
radius: 4, // 圆形半径
fill: '#000', // 填充的色彩
stroke: this.setColor[list.portId % 12] ? this.setColor[list.portId % 12] : '#fff', // 边框色彩
selectable: false,
evented: false,
id: list.id,
networkPort: list.networkPort,
index: list.index,
hoverCursor: "pointer",// 鼠标指针形式
strokeWidth: 2 // 边框大小
});
return circle
},
// 创立文本
makeText (t, list, i, type) {
let x1 = list.x - list.width / 2
let y1 = list.y - list.height / 2
let prot = this.rotatoNi(x1, y1, list.x, list.y, list.rotationAngle)
let x = (prot.x - list.x) / 1.5 + list.x
let y = (prot.y - list.y) / 1.5 + list.y
//console.log(i + '文本的坐标点', x, y)
var textBox = new fabric.Textbox(t, {
/* originX: "left",
originY: "top", */
originX: "center",
originY: "center",
left: x,
top: y,
centeredRotation: true, // 核心旋转
fontSize: 12,
selectable: false,
evented: false,
networkPort: list.networkPort,
fill: '#fff',
id: list.id,
operateType: type,
});
return textBox
},
// 创立矩形
makeRect (left, top, ids, width, height, angle, groupId, boxId, boxFileId) {
let rect = new fabric.Rect({
//rx: 4, // 圆角半径
// ry: 4, // 圆角半径
angle: angle,
left: left,
top: top,
originX: "center", // 绝对于坐标点地位
originY: "center", // 绝对于坐标点地位
width: width,
height: height,
//hoverCursor: "pointer",
fill: "rgba(0,153,255,0.20)",//"#1C445E",
stroke: '#136094', // 边框色彩
strokeWidth: 2, // 边框大小
borderColor: "#0099FF", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "#0099FF", // 手柄背景色
cornerStrokeColor: "#0099FF", // 手柄框边框
hasControls: true, // 手柄
hasBorders: true, // 手柄线
visible: true, // 是否可见
selectable: true, // 是否可抉择的对象
evented: true, // 是否拖动
centeredRotation: true, // 核心旋转
centeredScaling: true, // 居中缩放
transparentCorners: false, // 选中框通明角
preserveObjectStacking: true,
// opacity: 0.5,
networkPort: ids.networkPort,// 网口
index: ids.index,// 序号
groupId: groupId,
id: boxId ? boxId : null,
boxFileId: boxFileId,
//lockRotation: true,// 锁定对象旋转
});
rect.setControlsVisibility({
mt: false,
mb: false,
bl: false,
br: false,
tl: false,
tr: false,
mr: false,
ml: false,
mtr: true,
});
return rect;
},
// 创立线段
/*
coords 坐标
list 以后对象
arr 虚线
jt, 虚线箭头
*/
makeLine (coords, list, arr, jt, startId, endId) {//console.log('list.networkPort', list.networkPort)
return new fabric.Line(coords, {fill: this.setColor[list && list.portId % 12] ? this.setColor[list && list.portId % 12] : '#fff',
stroke: this.setColor[list && list.portId % 12] ? this.setColor[list && list.portId % 12] : '#fff',
strokeWidth: 2,
originX: "center",
originY: "center",
selectable: false,
evented: false,
hasControls: false,
hasBorders: false,
hasRotatingPoint: false,
hoverCursor: "default",
index: list.index,
networkPort: list && list.networkPort,
jt: jt || '',
id: list && list.id,
startId,
endId, //myJoker: arr,
strokeDashArray: arr || [],
huadongbs: list.huadongbs || false
});
},
// 创立连线上的实体三角形箭头
createArrowHead (x1, y1, x2, y2, width, height, list, type, startId, endId) {
return new fabric.Triangle({angle: this.getAngle(x1, y1, x2, y2),
fill: "white",
top: y2,
left: x2,
width: width,
height: height,
originX: "center",
originY: "center",
selectable: false,
evented: false,
id: list.id,
index: list.index,
networkPort: list.networkPort,
startId,
endId,
huadongbs: list.huadongbs || false
});
},
/* 绘制箭头函数 ------->--------
fromX, fromY：终点坐标（也能够换成 p1，只不过它是一个数组）toX, toY：起点坐标 (也能够换成 p2，只不过它是一个数组)
theta：三角斜边一直线夹角
headlen：三角斜边长度
width：箭头线宽度
color：箭头色彩 */
drawArrow (canvas, fromX, fromY, toX, toY, theta, headlen, width, color) {
width = 1;// 箭头宽度设置为 1
var theta = theta || 30,
headlen = headlen || 10,
width = width || 1,
color = color || '#000',
angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
angle1 = (angle + theta) * Math.PI / 180,
angle2 = (angle - theta) * Math.PI / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
botY = headlen * Math.sin(angle2);
var arrowX, arrowY;
arrowX = toX + topX; // 箭头结尾右边坐标
arrowY = toY + topY;
canvas.add(this.makeLine([arrowX, arrowY, toX, toY], '', [],'jt'));
//ctx.moveTo(arrowX, arrowY);
//ctx.lineTo(toX, toY); // 箭头开始坐标
arrowX = toX + botX; // 箭头结尾左边坐标
arrowY = toY + botY;
canvas.add(this.makeLine([arrowX, arrowY, toX, toY], '', [],'jt'));
// ctx.lineTo(arrowX, arrowY);
},
// 三角形角度计算
getAngle (x1, y1, x2, y2) {
var dx = x2 - x1,
dy = y2 - y1,
angle = Math.atan2(dy, dx);
angle *= 180 / Math.PI;
angle += 90;
return angle;
},
// // 扭转画布大小
// zoomIt (factor) { // factor：比例
// let cWidth = canvas.width;
// canvas.setWidth(cWidth * factor);
// canvas.setHeight(cWidth * factor);
// if (canvas.backgroundImage) {
// var bi = canvas.backgroundImage;
// bi.width = bi.width * factor;
// bi.height = bi.height * factor;
// }
// var objects = canvas.getObjects();
// for (var i in objects) {// var scaleX = objects[i].scaleX;
// var scaleY = objects[i].scaleY;
// var left = objects[i].left;
// var top = objects[i].top;
// var tempScaleX = scaleX * factor;
// var tempScaleY = scaleY * factor;
// var tempLeft = left * factor;
// var tempTop = top * factor;
// objects[i].scaleX = tempScaleX;
// objects[i].scaleY = tempScaleY;
// objects[i].left = tempLeft;
// objects[i].top = tempTop;
// objects[i].setCoords();
// }
// canvas.renderAll();
// canvas.calcOffset();
// },
// 阻止右键默认行为
preventYj () {$(document).contextmenu(function (ev) {if (ev.preventDefault) {ev.preventDefault();
} else {window.event.returnValue = false;}
})
},
getTanDeg (tan) {var result = Math.atan(tan) / (Math.PI / 180);
result = parseInt(result);
return result;
},
// 自定义批改序号从新排序
setArrIndex (str, end, list) {for (var i = 0; i < list.length; i++) {if (end.index > list[i].index && list[i].index > str.index) {list[i].index = list[i].index + 1
}
if (end.id == list[i].id) {list[i].index = str.index + 1
}
}
list = list.sort((a, b) => {return a.index - b.index});
return list;
},
// 自定义批改序号从新排序
setArrIndex2 (str, end, list) {
// 序号 2 和 4 理论就是 3 和 4 调换地位
if (str.index < end.index) {list[str.index] = list.splice(end.index - 1, 1, list[str.index])[0];
for (var i = 0; i < list.length; i++) {list[i].index = i + 1
}
} else {list[end.index - 1].index = str.index
for (var i = 0; i < list.length; i++) {if (str.index > list[i].index && list[i].index > end.index) {list[i].index = list[i].index - 1
}
}
list[str.index - 1].index = str.index - 1
list = list.sort((a, b) => {return a.index - b.index});
}
return list;
},
compare (pro) {return function (obj1, obj2) {var val1 = obj1[pro];
var val2 = obj2[pro];
if (val1 < val2) { // 正序
return 1;
} else if (val1 > val2) {return -1;} else {return 0;}
}
},
isMouseoeut (x, y) {
let that = this
var a = -15
let cdiv = document.getElementById("canvasZone")
var X1 = that.getOffsetLeft(cdiv) - a
var Y1 = that.getOffsetTop(cdiv) - a
var X2 = that.getOffsetLeft(cdiv) + cdiv.offsetWidth + a
var Y2 = that.getOffsetTop(cdiv) + cdiv.offsetHeight + a
if (x < X2 && x > X1 && y < Y2 && y > Y1) {return true} else {return false}
},
groupAdd (list, canvas) {//console.log('旧式分组')
/* x.y 示意左上角点 */
var x1 = -50, y1 = -50, width = 100, height = 100;
let x = list.x - list.width / 2
let y = list.y - list.height / 2
let u = 'M' + x + '' + y +' L '+ (x + 10) +' '+ y +' L '+ x +' '+ (y + 10) +' z'
var path2 = new fabric.Path(u);
// 左上角三角形
path2.set({left: this.face == true ? (-(list.width / 2)) : (list.width / 2),
left: this.showFace == true ? (-(list.width / 2)) : (list.width / 2), top: -(list.height / 2),
fill: '#dadcdb', // 填充的色彩
opacity: list.boxStatus == 1 ? 0.3 : 1,
strokeWidth: 1,
angle: this.face == true ? 0 : 90,
angle: this.showFace == true ? 0 : 90,
})
var t = list.index == 0 ? '': (list.slotId ? list.slotId : 0) +"_"+ (list.portId ? list.portId : 0) +"_" + list.index
// 文字
// console.log(this.face);
var text2 = new fabric.Text(t, {
angle: -list.rotationAngle,
fontSize: 12,
originX: 'center',
originY: 'center',
fill: '#fff',
left: this.face == true ? (-(list.width / 2) + 20) : (list.width / 2 - 20),
left: this.showFace == true ? (-(list.width / 2) + 20) : (list.width / 2 - 20),
top: -(list.height / 2) + 20,
});
// 中心点
var circle2 = new fabric.Circle({
originX: "center",
originY: "center",
radius: 4, // 圆形半径
fill: '#000', // 填充的色彩
stroke: this.setColor[list.portId] ? this.setColor[list.portId] : '#fff', // 边框色彩
selectable: false,
evented: false,
hoverCursor: "pointer",// 鼠标指针形式
strokeWidth: 2 // 边框大小
});
// 矩形
var rect2 = new fabric.Rect({
width: list.width,
height: list.height,
originX: 'center',
originY: 'center',
fill: "rgba(0,153,255,0.20)",//"#1C445E",
stroke: '#136094', // 边框色彩
strokeWidth: 2, // 边框大小
borderColor: "#0099FF", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "#0099FF", // 手柄背景色
cornerStrokeColor: "#0099FF", // 手柄框边框
centeredRotation: true,
portId: list.portId,
slotId: list.slotId,
isSwitch: list.isSwitch,
});
var group2 = new fabric.Group([rect2, circle2, text2, path2], {
left: list.x,
top: list.y,
width: list.width,
height: list.height,
originX: 'center',
originY: 'center',
isCheckTo: true, // 有这个字段示意单选，没有多选
networkPort: list.networkPort,// 网口
index: list.index,// 序号
groupId: 'box',
groupIdd: list.groupId,
id: list.id,
angle: list.rotationAngle,
centeredRotation: true,
fill: "#0099FF",//"#1C445E",
stroke: '#0099FF', // 边框色彩
strokeWidth: 2, // 边框大小
borderColor: "#0099FF", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "#0099FF", // 手柄背景色
cornerStrokeColor: "#0099FF", // 手柄框边框
huadongbs: list.huadongbs || false,
boxFileId: list.boxFileId,
portId: list.portId,
slotId: list.slotId,
isSwitch: list.isSwitch,
//scaleX: this.canvasZoom,
//scaleY: this.canvasZoom
});
return group2
}
},
};
</script>
正文完
