/**
* @交互说明
* 1. 初始化选中目标的设备对象 【设备名称、使用图标】
*/
// https://t7.baidu.com/it/u=2757924858,1404466263&fm=193
import video_type_1 from "@/assets/modelSetting/video_type_1.png";
import video_type_2 from "@/assets/modelSetting/video_type_2.png";
import video_type_3 from "@/assets/modelSetting/video_type_3.png";
import device_video_bg from "@/assets/modelSetting/device_video_bg.png";
import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png";
import notInVisableIcon from "@/assets/modelSetting/notInVisableIcon.png";
import { workspaceIDConf } from "@/config/attribute/viewType";
import { v4 as uuid } from "uuid";
const deviceInfoKey = "deviceInfo";
// TODO 设计实现点位绑定设备实体的位置偏移问题
/**
* @交互说明
* 1. 基于画布中心点建立坐标系。画布中心点坐标为(0,0)
*/
export const useDeviceObject = () => {
// 拖拽新增获取设备对象在画布上的坐标
function getDragDeviceObjectOrdinate(event, viewObj, deviceObj) {
// 移动到画布上的设备对象的相对坐标，使用相对图片的坐标系，而不是画布的坐标系
const currWorkSpaceData = document
.getElementById(workspaceIDConf)
.getBoundingClientRect();
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
const { left, top, width, height } = currWorkSpaceData;
// .getSelectionElement()
// .getBoundingClientRect();
// 该设备基于当前画布的坐标信息
const currPointView = {
x: event.clientX - left,
y: event.clientY - top
};
// const pointerVpt = viewObj.restorePointerVpt(currPointView);
const x_ordinate =
currPointView.x - width / 2 - (deviceObj.width * deviceObj.scaleX) / 2;
const y_ordinate =
height / 2 - currPointView.y + (deviceObj.height * deviceObj.scaleY) / 2;
console.log(
"currWorkSpace:",
currWorkSpaceData,
"cvsObjects:",
cvsObjects,
"event:",
event,
"getDragDeviceObjectOrdinate",
"imgObjects:",
imgObjects.getCenterPoint(),
x_ordinate,
y_ordinate
);
return {
x_ordinate,
y_ordinate
};
}
// 在画布上移动后设备对象坐标
function fetchMoveDeviceObjectOrdinate(viewObj, activeObject) {
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
const x_ordinate = activeObject.get("left") - cvsObjects.width / 2;
const y_ordinate = cvsObjects.height / 2 - activeObject.get("top");
return {
x_ordinate,
y_ordinate
};
}
// 使用相对坐标换实际位置的方法
function fetchOrdinateByView(viewObj, deviceItem) {
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
const { x_ordinate, y_ordinate } = deviceItem;
const left = cvsObjects.width / 2 + parseFloat(x_ordinate);
const top = cvsObjects.height / 2 - parseFloat(y_ordinate);
console.log(cvsObjects, "fetchOrdinateByView", left, top);
return {
left,
top
};
}
// 可操作区域的各点位相对坐标【限定可操作区域边界】
function fetchViewsBoundaries(viewObj, activeObj) {
// 图片原点为中心图标
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
const y_mistake = -8 * activeObj?.scaleY; // 上下边界误差
const currIconWidth = activeObj?.width * activeObj?.scaleX;
const currIconHeight = activeObj?.height * activeObj?.scaleY;
const startLeft =
(cvsObjects.width * cvsObjects.scaleX -
imgObjects.width * imgObjects.scaleX) /
2 -
currIconWidth / 2;
const startTop =
(cvsObjects.height * cvsObjects.scaleY -
imgObjects.height * imgObjects.scaleY) /
2 -
currIconHeight -
y_mistake;
const endLeft = startLeft + imgObjects.width * imgObjects.scaleX;
const endTop = startTop + imgObjects.height * imgObjects.scaleY;
const currImgWidth = imgObjects.width * imgObjects.scaleX;
const currImgHeight = imgObjects.height * imgObjects.scaleY;
return {
x_min: -currImgWidth / 2 - currIconWidth / 2,
y_min: -currImgHeight / 2 - currIconHeight,
x_max: currImgWidth / 2 + currIconWidth / 2,
y_max: currImgHeight / 2,
startLeft,
startTop,
endLeft,
endTop
};
}
// 操作区判断设备是否在可视区域内
function isInViewBoundaries(viewObj, deviceObj): boolean {
const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries(
viewObj,
deviceObj
);
const { x_ordinate, y_ordinate } = deviceObj;
// 限制对象在画布内移动
if (x_ordinate < x_min) {
return false;
}
if (y_ordinate < y_min) {
return false;
}
if (x_ordinate > x_max) {
return false;
}
if (y_ordinate > y_max) {
return false;
}
return true;
}
// 预览判断当前的图片图层内
function isInCurrViewBoundaries(viewObj, deviceObj): boolean {
const objLeft = deviceObj.left;
const objTop = deviceObj.top;
const canvasObject = viewObj;
const { backgroundImage } = canvasObject; // backgroundImage 背景图片
const currIconWidth = deviceObj?.width * deviceObj?.scaleX;
const currIconHeight = deviceObj?.height * deviceObj?.scaleY;
const y_mistake = -8 * deviceObj?.scaleY; // 上下边界误差
const x_mistake = 1; // 左右边界误差
const startLeft =
(canvasObject.width - backgroundImage.width * backgroundImage.scaleX) /
2 -
currIconWidth / 2;
const startTop =
(canvasObject.height - backgroundImage.height * backgroundImage.scaleY) /
2 -
currIconHeight -
y_mistake;
const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX;
const endTop = startTop + backgroundImage.height * backgroundImage.scaleY;
console.log(
backgroundImage.getBoundingClientRect(),
canvasObject.width,
canvasObject.scaleX,
backgroundImage.width,
backgroundImage.scaleX,
currIconWidth,
"isInCurrViewBoundaries",
backgroundImage.scaleX,
deviceObj,
"startLeft",
startLeft,
"startTop",
startTop,
"endLeft",
endLeft,
"endTop",
endTop
);
if (
objLeft < startLeft - x_mistake ||
objTop < startTop ||
objLeft > endLeft + x_mistake ||
objTop > endTop
) {
return true;
}
return false;
}
// function isInView() {
// // TODO 用三角函数判断
// return;
// }
// 设备对象是否移动
function isMoveDevice(activeObject, viewObj) {
const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate;
const y_ordinate_history = activeObject.get(deviceInfoKey)?.y_ordinate;
const { x_ordinate, y_ordinate } = fetchMoveDeviceObjectOrdinate(
viewObj,
activeObject
);
// 误差设置为 0.1
const errorValue = [1, 1];
let x_move = true;
let y_move = true;
const x_move_value = Math.abs(
Number(x_ordinate_history) - Number(x_ordinate)
);
const y_move_value = Math.abs(
Number(y_ordinate_history) - Number(y_ordinate)
);
// 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
// if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
// return false;
// }
if (x_move_value < errorValue[0]) {
x_move = false;
}
if (y_move_value < errorValue[1]) {
y_move = false;
}
console.log(
"isMoveDevice:" + (x_move || y_move),
"x_move_value" + x_move_value,
"y_move_value" + y_move_value
);
return x_move || y_move;
}
// 初始化设备对象
const initDeviceGroupObjects: Record<string, any> = (
record,
restDeviceItem = {}
) => {
console.log(record, "initDeviceGroupObjects");
// const { value } = record;
let iconObjectSrc = video_type_1;
switch (record?.icon) {
case "3":
iconObjectSrc = video_type_3;
break;
case "2":
iconObjectSrc = video_type_2;
break;
case "1":
default:
iconObjectSrc = video_type_1;
break;
}
let bgDeviceImage;
const fontStyle = { fill: "#333333" };
// 不在可视区域内的设备
if (record?.notInVisable) {
bgDeviceImage = device_video_bg_gray;
fontStyle.fill = "gray";
} else {
bgDeviceImage = device_video_bg;
}
return {
name: "device",
id: uuid(),
deviceInfo: record, // 设备信息
left: record?.left ? Number(record?.left) : 0,
top: record?.top ? Number(record?.top) : 0,
selectable: true,
hasControls: true,
lockUniScaling: true, // 当设置为true，Object将无法被锁定比例进行缩放。默认值为false。
lockScalingX: true, // 当设置为true，Object水平方向将无法被缩放。默认值为false。
lockScalingY: true, // 当设置为true，Object垂直方向将无法被缩放。默认值为false。
lockRotation: true, // 当设置为true，Object的旋转将被锁定。默认值为false。
type: "group",
version: "5.3.0",
originX: "left",
originY: "top",
width: 132,
height: 62,
fill: "rgb(0,0,0)",
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "fill",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
objects: [
{
type: "image",
version: "5.3.0",
originX: "left",
originY: "top",
left: -66,
top: -33,
width: 264,
height: 132,
fill: "rgb(0,0,0)",
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 0.5,
scaleY: 0.5,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "fill",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
cropX: 0,
cropY: 0,
selectable: false,
hasControls: false,
src: bgDeviceImage,
crossOrigin: null,
filters: []
},
{
type: "image",
version: "5.3.0",
originX: "left",
originY: "top",
left: -50.6281,
top: -22.9893,
width: 48,
height: 48,
fill: "rgb(0,0,0)",
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 0.6174,
scaleY: 0.6174,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "fill",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
cropX: 0,
cropY: 0,
selectable: false,
hasControls: false,
src: iconObjectSrc,
crossOrigin: null,
filters: []
},
{
type: "textbox",
version: "5.3.0",
originX: "left",
originY: "top",
left: -14.3377,
top: -15.4904,
width: 320,
height: 90.4,
fill: fontStyle.fill,
stroke: null,
strokeWidth: 1,
strokeDashArray: null,
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 0.1681,
scaleY: 0.1681,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: "",
visible: true,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "fill",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
fontFamily: "arial",
fontWeight: "normal",
fontSize: 80,
text: record?.name,
underline: false,
overline: false,
linethrough: false,
textAlign: "left",
fontStyle: "normal",
lineHeight: 1.16,
textBackgroundColor: "",
charSpacing: 0,
styles: [],
direction: "ltr",
path: null,
pathStartOffset: 0,
pathSide: "left",
pathAlign: "baseline",
selectable: false,
hasControls: false
},
{
type: "image",
version: "5.3.0",
originX: "left",
originY: "top",
left: -47.6281,
top: -19.9893,
width: 40,
height: 40,
fill: "rgb(0,0,0)",
stroke: null,
strokeWidth: 0,
strokeDashArray: null,
strokeLineCap: "butt",
strokeDashOffset: 0,
strokeLineJoin: "miter",
strokeUniform: false,
strokeMiterLimit: 4,
scaleX: 0.6174,
scaleY: 0.6174,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: false,
backgroundColor: "",
fillRule: "nonzero",
paintFirst: "fill",
globalCompositeOperation: "source-over",
skewX: 0,
skewY: 0,
cropX: 0,
cropY: 0,
selectable: false,
hasControls: false,
src: notInVisableIcon,
crossOrigin: null,
filters: []
}
],
...restDeviceItem
};
};
return {
initDeviceGroupObjects,
isInViewBoundaries,
getDragDeviceObjectOrdinate,
isMoveDevice,
fetchViewsBoundaries,
fetchOrdinateByView,
fetchMoveDeviceObjectOrdinate,
isInCurrViewBoundaries
};
};