wangbin
/
Door
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd15a4b40c5'
${ noResults }
Door/mister/screen/web/viewer.html

2258 lines
99 KiB
HTML
Raw Normal View History Unescape Escape

报到门
1 month ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>屏幕预览</title>
<link rel="stylesheet" type="text/css" href="/webs/resourse/iconfont.css">
<script src="/webs/resourse/fabric.js"></script>
<script src="/webs/resourse/moment.js"></script>
</head>
<style>
.yt_content {
position: absolute;
z-index: 1;
overflow-x: hidden;
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
<canvas id="canvas"></canvas>
<div id="yt_content" class="yt_content">
<div id="element" className='voteContent'>
</div>
</div>
<a style="font-family: 'fzxbs';opacity: 0;">字体测试</a>
</body>
<script type="text/javascript">
// let resultJson = JSON.parse(window.opener.name)
// console.log(resultJson)
// let canvas = new fabric.Canvas("canvas", {
// stopContextMenu: true, //禁止默认右击事件
// });
// canvas.setWidth(resultJson.width)
// canvas.setHeight(resultJson.height)
//加载JSON数据
// resultJson.objects.map(item => {
// item.lockMovementX = true //X轴是否可被移动(true为不可)
// item.lockMovementY = true //Y轴是否可被移动(true为不可)
// item.hasControls = false
// item.hasBorders = false
// })
// canvas.loadFromJSON(resultJson)
// 创建 FontFace 对象并加载字体文件
const font = new FontFace('fzxbs', 'url(/webs/resourse/fzxbs.ttf) format(truetype)');
font.load().then(() => {
console.log('success');
}).catch((err) => {
console.log('Failed to load font:');
});
const configUrl = `http://${window.location.hostname}:9800`
window.onload = function () {
console.log('加载完成')
getDataFunc()
// window.addEventListener('message', function (e) {
// console.log(JSON.parse(e.data))
// let resultJson = JSON.parse(e.data)
// let canvas = new fabric.Canvas("canvas", {
// // fireRightClick: true, //启用右键
// stopContextMenu: true, //禁止默认右击事件
// });
// canvas.setWidth(window.innerWidth)
// canvas.setHeight(window.innerHeight)
// //加载JSON数据
// canvas.loadFromJSON(resultJson)
// })
}
function getDataFunc() {
let url = window.location.search
console.log(1111, window.location)
console.log(2222, url.substring(url.lastIndexOf('=') + 1, url.length))
// let userId = url.substring(url.lastIndexOf('=') + 1, url.length)
const urlParams = getUrlParams(url);
console.log(333, urlParams)
const screenformid = urlParams["screenformid"] ? urlParams["screenformid"] : '';
console.log(44, screenformid)
fetch(`http://${window.location.hostname}:9800/vhwcapi/v1/web/api/service/tscreenform/getscreenform`, {
method: 'POST',
headers: {
Authorization: localStorage.getItem('antd-token-authority') + '',
// 'Apply-User': userInfo.id,
// 'System-User': userInfo.systemUser,
},
body: JSON.stringify({
id: screenformid
}),
timeout: 50000,
}).then(response => {
return response.json()
}).then(data => {
console.log('获取数据', data)
initCanvas(data.datarecord)
}).catch(err => {
console.log(err);
});
}
function getUrlParams(url) {
const params = {};
const urlParts = url.split('?');
if (urlParts.length > 1) {
const paramString = urlParts[1];
const paramPairs = paramString.split('&');
paramPairs.forEach(pair => {
const keyValue = pair.split('=');
params[keyValue[0]] = keyValue[1];
});
}
return params;
}
let canvas = new fabric.Canvas('canvas', {
fireRightClick: true, //启用右键
stopContextMenu: true, //禁止默认右击事件
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
//初始化画布
function initCanvas(data) {
console.log('initCanvas', data)
let width2 = data.list.sf_width;
let height2 = data.list.sf_height;
let backColor = data.list.sf_bgcolor
// canvas.setWidth(width2)
// canvas.setHeight(height2)
canvas.setWidth(data.list?data.list.sf_width:window.innerWidth)
canvas.setHeight(data.list?data.list.sf_height:window.innerHeight)
canvas.set({
backgroundColor: backColor,
})
//窗体属性设置
canvas.backgroundColor = data.list.sf_bgcolor;
canvas.sf_name = data.list.sf_name;
canvas.sf_width = data.list.sf_width;
canvas.sf_height = data.list.sf_height;
canvas.sf_bgcolor = data.list.sf_bgcolor;
canvas.sf_describe = data.list.sf_describe;
let resultJson = { objects: [] };
console.log('画布数据的接口', data);
let selectOptions = [];
resultJson.objects = data?.dbresult || [];
resultJson.objects.map((item, index) => {
selectOptions.push(index);
switch (item.component_type) {
case '0': // 按钮控件
handleSetAnkj(item.top, item.left, item);
break;
case '1': //文本标签
handleSetText(item.top, item.left, item);
break;
case '2': //图片照片
handleAddImage(item.top, item.left, item);
break;
case '3': //视频控件
handleAddVideo(item.top, item.left, item);
break;
case '4': //议题内容
handleSetYtnr(item.top, item.left, item);
break;
case '5':
handleSetGridList(item.top, item.left, item);
break;
case '6': //横向滚动文本
handleSetHxgdwb(item.top, item.left, item);
break;
case '7': //照片列表
handleSetPhoto(item.top, item.left, item);
break;
case '8': //代表团列表
handleSetDeputation(item.top, item.left, item);
break;
case '9': //子义题列表
handleSetZytlb(item.top, item.left, item);
break;
case '10': //时间控件
handleSetSjkj(item.top, item.left, item);
break;
case '11':
case '12':
case '13': //图形控件
handleSetImage(item.top, item.left, item.component_type, item);
break;
}
});
canvas.renderAll();
canvas.setZoom(1);
}
//处理画布数据函数
function getValues(item, val) {
if (val) {
Object.keys(val).forEach((key) => {
if (item.bindingFieldID == key) {
item.text = val[key];
}
});
}
};
//添加文本标签start===============================
handleSetText = (top, left, val) => {
const textWidth = val ? parseInt(val.width) : 200;
const textHeigth = val ? parseInt(val.height) : 100;
let textTop = 0;
if (val && val.verticalAlignment === 'center') {
textTop = textTop + (textHeigth - val.fontSize) / 2;
} else if (val && val.verticalAlignment === 'bottom') {
textTop = textTop + (textHeigth - val.fontSize);
}
let textContent = val ? val.text : '文本标签';
if (val) {
if (textContent.length * val.fontSize > textWidth) {
let num = Math.floor(textWidth / val.fontSize);
textContent = textContent.substr(0, num - 1) + '...';
}
}
const textBox = new fabric.Textbox(textContent, {
fill: val && val.foreground ? val.foreground : '#000',
fontSize: val && val.fontSize ? parseInt(val.fontSize) : 18,
fontWeight: val && val.fontWeight ? val.fontWeight : 'normal',
fontStyle: val && val.fontStyle ? val.fontStyle : 'normal',
fontFamily: val && val.fontFamily ? val.fontFamily : 'SimSun',
textAlign: val && val.horizontalAlignment ? val.horizontalAlignment : '',
shadow: val && val.effect == 'true' ? shadow : null,
width: textWidth,
left: 0,
top: textTop,
splitByGrapheme: val && val.rowCount == 'true' ? true : false,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeigth,
background: val && val.background.includes('#') ? val.background : '', //透明
fill: val && val.background.includes('#') ? val.background : '', //透明
opacity: val && val.background.includes('#') ? 1 : 0,
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([border, textBox], {
width: textWidth,
height: textHeigth,
text: val ? val.text : '文本标签',
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
effect: val && (val.effect == 'true' || val.effect == true) ? true : false,
component_type: '1',
fontFamily: val && val.fontFamily ? val.fontFamily : 'SimSun',
fontSize: val && val.fontSize ? val.fontSize : 18,
fontStyle: val && val.fontStyle ? val.fontStyle : 'normal',
fontWeight: val && val.fontWeight ? val.fontWeight : 'normal',
horizontalAlignment: val && val.horizontalAlignment ? val.horizontalAlignment : 'left',
verticalAlignment: val && val.verticalAlignment ? val.verticalAlignment : 'top',
background: val && val.background.includes('#') ? val.background : '', //透明
foreground: val ? val.foreground : '#000', //字体颜色
textTrimming: val && val.textTrimming ? val.textTrimming : '1',
rowCount: val && (val.rowCount == 'true' || val.rowCount == true) ? true : false,
bindingFieldID: val && val.bindingFieldID ? val.bindingFieldID : '',
systemParContent: val && val.systemParContent ? val.systemParContent : '',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
group['setControlVisible']('mtr', false);
canvas.setActiveObject(group);
};
//添加文本标签end===============================
//添加图片照片start=====================================
handleAddImage = (left, top, image) => {
let ImgElement = document.createElement('img');
// ImgElement.src = image
let img = new fabric.Image(ImgElement, {
scaleX: 1,
scaleY: 1,
// originX: 'center',
// originY: 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const imagePath = image && image.imagePath ? (image.imagePath.includes('http') ? image.imagePath : `${configUrl}/${image.imagePath}`) : `${configUrl}/webs/upload/img/001.jpg`
let group = new fabric.Group([img], {
// left: 130, //设置canvas上的X坐标
// top: 130, //设置canvas上的Y坐标
left: image ? parseInt(image.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: image ? parseInt(image.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
component_type: '2',
width: image ? parseInt(image.width) : 100,
height: image ? parseInt(image.height) : 100,
shadow: image && image.effect === 'true' ? shadow : null,
effect: image && image.effect === 'true' ? true : false,
imagePath: imagePath,
bindingFieldID: image ? image.bindingFieldID : '-1',
resourceMode: image ? image.resourceMode : '0',
stretch: image ? image.stretch : '4',
// objectCaching: false // 不缓存`
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
if (image) {
img.setSrc(image && image.imagePath ? imagePath : ImageControl, () => {
// 默认
let scaleY = 1;
let scaleX = 1;
if (image.stretch === '2') {
// 同比例裁剪照片
const scale = group.width / img.width > group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (image.stretch === '3') {
// 同比例
const scale = group.width / img.width < group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (image.stretch === '4') {
// 填充
scaleY = group.height / img.height;
scaleX = group.width / img.width;
}
img.set({
left: 0,
top: 0,
originX: 'center',
originY: 'center',
scaleX: scaleX,
scaleY: scaleY,
});
canvas.renderAll();
});
group.clipPath =
image.stretch === '2'
? new fabric.Rect({
top: -group.height / 2,
left: -group.width / 2,
width: group.width,
height: group.height,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
})
: null;
canvas.add(group);
} else {
img.setSrc(`${configUrl}/webs/upload/img/001.jpg`, () => {
const scaleY = group.height / img.height;
const scaleX = group.width / img.width;
img.set({
left: 0,
top: 0,
originX: 'center',
originY: 'center',
scaleX: scaleX,
scaleY: scaleY,
});
canvas.add(group);
canvas.renderAll();
});
}
group['setControlVisible']('mtr', false);
};
// 添加视频==================================
handleAddVideo = (left, top, vid) => {
// let Video = document.getElementById('video')
// Video.src = "http://localhost:9800/webs/upload/img/demo.mp4"
let Video = document.createElement('video');
Video.setAttribute('src', vid && vid.videoSource ? `${configUrl}/${vid.videoSource}` : `${configUrl}/webs/upload/demo.mp4`);
let id = Date.now();
Video.onloadedmetadata = () => {
URL.revokeObjectURL(Video.src);
const width = Video.videoWidth;
const height = Video.videoHeight;
const scaleX = vid ? vid.width / Video.videoWidth : 1;
const scaleY = vid ? vid.height / Video.videoHeight : 1;
Video.setAttribute('width', width);
Video.setAttribute('height', height);
Video.setAttribute('controls', 'controls');
Video.setAttribute('id', id);
Video.setAttribute('autoplay', 'autoplay');
Video.setAttribute('loop', 'loop');
let video = new fabric.Image(Video, {
left: vid ? parseInt(vid.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: vid ? parseInt(vid.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
scaleX: scaleX,
scaleY: scaleY,
width: width,
height: height,
component_type: '3',
id: id,
// objectCaching: false,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
document.getElementById('videos')?.appendChild(Video);
canvas.add(video);
video['setControlVisible']('mtr', false);
video.getElement().play();
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
};
};
// 添加视频==================================
// 添加议题内容 开始=========================
handleSetYtnr = (top, left, item) => {
const text = item && item.text ? item.text : '议题内容';
let textWidth = item ? parseInt(item.width) : 100;
let textHeigth = item ? parseInt(item.height) : 100;
let textTop = 0;
let updateYtnrFormValues = {}
if (updateYtnrFormValues && updateYtnrFormValues.fullScreen && updateYtnrFormValues.scaleValue) {
if (item && (item.fullScreen === true || item.fullScreen === 'true')) {
textWidth = parentObj.sf_width;
textHeigth = parentObj.sf_height;
} else {
if (updateYtnrFormValues && (updateYtnrFormValues.fullScreen == true || updateYtnrFormValues.fullScreen == 'true')) {
textWidth = 100;
textHeigth = 100;
} else if (item && updateYtnrFormValues.scaleValue && item.scaleValue == updateYtnrFormValues.scaleValue) {
textWidth = item ? parseInt(item.width) : 100;
textHeigth = item ? parseInt(item.height) : 100;
} else if (item && updateYtnrFormValues.scaleValue && item.scaleValue !== updateYtnrFormValues.scaleValue) {
textWidth = item ? parseInt(item.width) : 100;
textHeigth = item ? parseInt(item.height) : 100;
}
}
} else if (item && item.width && item.height) {
textWidth = parseInt(item.width);
textHeigth = parseInt(item.height);
}
if (item && item.verticalAlignment === 'center') {
if (item) textTop = textTop + textHeigth - 16;
} else if (item && item.verticalAlignment === 'bottom') {
textTop = textTop + textHeigth - 16;
}
const textbox = new fabric.Textbox(item && item.text ? item.text : '议题内容', {
// width: textWidth,
// height: textHeigth,
left: 0, //设置canvas上的X坐标
top: textTop, //设置canvas上的Y坐标
fontSize: 16,
fill: item && item.colorChangeStyle ? item.colorChangeStyle : '#000',
// scaleX: item && item.scaleValue ? item.scaleValue : 1,
// scaleY: item && item.scaleValue ? item.scaleValue : 1,
// textAlign: 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
// width: item && item.width ? item.width : 100,
// height: item && item.height ? item.height : 100,
width: textWidth,
height: textHeigth,
left: 0, //设置canvas上的X坐标
top: 0, //设置canvas上的Y坐标 顶部对齐
fill: '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([textbox, border], {
width: textWidth,
height: textHeigth,
fontSize: 16,
text: item ? item.text : text,
left: item && (item.fullScreen === true || item.fullScreen === 'true') ? 0 : item && (item.fullScreen === false || item.fullScreen === 'false') ? item.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: item && (item.fullScreen === true || item.fullScreen === 'true') ? 0 : item && (item.fullScreen === false || item.fullScreen === 'false') ? item.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
verticalAlignment: item && item.verticalAlignment ? item.verticalAlignment : 'top',
scaleValue: item && item.scaleValue ? item.scaleValue : 1,
fullScreen: item && item.fullScreen ? item.fullScreen : 'false',
currntTopic: item && item.currntTopic ? item.currntTopic : 'current',
component_type: item && item.component_type ? item.component_type : '4',
bindingFieldID: item && item.bindingFieldID ? item.bindingFieldID : '0x1030',
colorChangeStyle: item && item.colorChangeStyle ? item.colorChangeStyle : '#000',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
group['setControlVisible']('mtr', false);
canvas.setActiveObject(group);
};
// 添加议题内容 结束=========================
//添加网格列表start================================
handleSetGridList = (left, top, grid) => {
let child = [];
const rowCount = grid ? grid.rowCount : 5;
const colCount = grid ? grid.colCount : 5;
const text = grid && grid.text ? grid.text : '网格列表';
const gridWidth = grid ? (grid.width - 2) / grid.colCount : 100;
const gridHeigth = grid ? (grid.height - 2) / grid.rowCount : 50;
for (let x = 1; x <= colCount; x++) {
// 列
for (let y = 1; y <= rowCount; y++) {
// 行
let gridTop = (y - 1) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - grid.fontSize) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - grid.fontSize);
}
const text = new fabric.Textbox(grid && grid.text ? grid.text : '网格列表', {
width: gridWidth,
left: (x - 1) * gridWidth - 2, //设置canvas上的X坐标
textAlign: grid ? grid.horizontalAlignment : 'center',
top: gridTop - 2,
shadow: grid && grid.effect === 'true' ? shadow : null, // 阴影
fill: grid ? grid.foreground : '#000',
fontSize: grid ? parseInt(grid.fontSize) : 16,
fontWeight: grid ? grid.fontStyle.split(',')[1] : 'normal',
fontStyle: grid ? grid.fontStyle.split(',')[0] : 'normal',
fontFamily: grid ? grid.fontFamily : 'SimSun',
// top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// top: (y - 1) * gridHeigth + (gridHeigth - grid.fontSize) / 2, //设置canvas上的Y坐标 垂直居中对齐
// top: (y - 1) * gridHeigth + (gridHeigth - grid.fontSize), //设置canvas上的Y坐标 垂直底部对齐
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid ? grid.lineColor : '#dcdcdc',
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
strokeWidth: grid && grid.showGridLines === 'true' ? parseInt(grid.lineWidth) : 1,
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0],
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child.push(border);
child.push(text);
}
}
let group = new fabric.Group(child, {
width: grid ? grid.width : 500,
height: grid ? grid.height : 250,
left: grid ? parseInt(grid.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: grid ? parseInt(grid.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
rowCount: grid ? grid.rowCount : 5, //行
colCount: grid ? grid.colCount : 5, //列
component_type: grid ? grid.component_type : '5',
horizontalAlignment: grid ? grid.horizontalAlignment : 'center', //水平对齐方式left, center, right
verticalAlignment: grid ? grid.verticalAlignment : 'center', //垂直方式对齐top, center, bottom
colorChangeStyle: grid ? grid.colorChangeStyle : '0', //颜色变化
showStyle: grid ? grid.showStyle : '0', //显示方式
trendsStyle: grid ? grid.trendsStyle : '0', //动态方式
peoplesStyle: grid ? grid.peoplesStyle : '0', //加入方式
foregroundChange: grid ? grid.foregroundChange : '#000', //变化字色
text: text,
lineStyle: grid ? grid.lineStyle : '0', //网格线样式
showGridLines: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true, //是否显示网格
lineWidth: grid ? grid.lineWidth : '1', //网格线宽度
lineColor: grid ? grid.lineColor : '#000', //网格线颜色
background: grid && grid.background.includes('#') ? grid.background : '', //透明
effect: grid && grid.effect === 'true' ? true : false, // 阴影
fontFamily: grid ? grid.fontFamily : 'SimSun', //字体
fontStyle: grid ? grid.fontStyle : 'normal,normal,normal', //字体宽度设置
foreground: grid ? grid.foreground : '#000', //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
peopleOrderBy: grid && grid.peopleOrderBy ? grid.peopleOrderBy : undefined, //人员排序
rowMin: grid && grid.rowMin ? grid.rowMin : undefined, //行号从
rowMax: grid && grid.rowMax ? grid.rowMax : undefined, //到
colMin: grid && grid.colMin ? grid.colMin : undefined, //列号从
colMax: grid && grid.colMax ? grid.colMax : undefined, //到
textDirection: grid && grid.textDirection ? grid.textDirection : undefined, //人员排序的加入方式
textItemWidth: grid && grid.textItemWidth ? grid.textItemWidth : undefined, //文本项宽
bindingFieldID: grid && grid.bindingFieldID ? grid.bindingFieldID : '-1',
isShowSpeakSecend: grid && (grid.isShowSpeakSecend === 'true' || grid.isShowSpeakSecend === true) ? true : false, //是否显示二次发言
isShowAskSecend: grid && (grid.isShowAskSecend === 'true' || grid.isShowAskSecend === true) ? true : false, // 是否显示二次询问
isShowPersonWork: grid && (grid.isShowPersonWork === 'true' || grid.isShowPersonWork === true) ? true : false, // 是否显示人员职务
bindingFieldPeopleType: grid && grid.bindingFieldPeopleType ? grid.bindingFieldPeopleType.split(',') : [],
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
group['setControlVisible']('mtr', false);
//更新canvas
canvas.setActiveObject(group);
};
//添加网格列表end================================
//添加横向滚动文本start===============================
handleSetHxgdwb = (left, top, item) => {
const textWidth = item ? parseInt(item.width) : 200;
const textHeigth = item ? parseInt(item.height) : 100;
let textContent = item && item.txtContent ? item.txtContent : '横向滚动文本';
const textBox = new fabric.Textbox(textContent, {
fill: item && item.foreground ? item.foreground : '#000',
fontSize: item && item.fontSize ? parseInt(item.fontSize) : 18,
fontWeight: item && item.fontWeight ? item.fontWeight : 'normal',
fontStyle: item && item.fontStyle ? item.fontStyle : 'normal',
fontFamily: item && item.fontFamily ? item.fontFamily : 'SimSun',
width: textWidth,
left: 0,
top: 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeigth,
background: item && item.background.includes('#') ? item.background : '', //透明
fill: item && item.background.includes('#') ? item.background : '', //透明
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([border, textBox], {
width: textWidth,
height: textHeigth,
left: item ? parseInt(item.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: item ? parseInt(item.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
background: item && item.background.includes('#') ? item.background : '', //透明
foreground: item && item.foreground ? item.foreground : '#000',
fontSize: item && item.fontSize ? parseInt(item.fontSize) : 18,
fontWeight: item && item.fontWeight ? item.fontWeight : 'normal',
fontStyle: item && item.fontStyle ? item.fontStyle : 'normal',
fontFamily: item && item.fontFamily ? item.fontFamily : 'SimSun',
txtContent: textContent,
moveSpeed: item && item.moveSpeed ? item.moveSpeed : '1000',
component_type: '6',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
group['setControlVisible']('mtr', false);
if (item && parseInt(item.moveSpeed) !== 6000) {
const handleSetHxgdwbAnimate = () => {
textBox.animate('left', item ? item.width / 2 : 100, {
from: -(item ? item.width / 2 : 100),
duration: item && item.moveSpeed ? parseInt(item.moveSpeed) : 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetHxgdwbAnimate,
});
};
handleSetHxgdwbAnimate();
}
canvas.setActiveObject(group);
};
//添加横向滚动文本end===============================
//添加照片列表start============================
handleSetPhoto = (left, top, grid) => {
let child = [];
const rowCount = grid ? grid.rowCount : 5;
const colCount = grid ? grid.colCount : 1;
const text = grid && grid.text ? grid.text : '照片列表';
const gridWidth = grid ? (grid.width - 2) / grid.colCount : 100;
const gridHeigth = grid ? (grid.height - 2) / grid.rowCount : 50;
for (let x = 1; x <= colCount; x++) {
//列
for (let y = 1; y <= rowCount; y++) {
//行
let gridTop = (y - 1) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const text = new fabric.Textbox(grid && grid.text ? grid.text : '照片列表', {
width: gridWidth,
// height: gridHeigth,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null, // 阴影
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
fill: grid && grid.foreground ? grid.foreground : '#000000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 16,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1, //网格线宽度
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child.push(border);
child.push(text);
}
}
let group = new fabric.Group(child, {
width: grid ? parseInt(grid.width) : 100,
height: grid ? parseInt(grid.height) : 250,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
rowCount: grid ? grid.rowCount : 5, //行
colCount: grid ? grid.colCount : 1, //列
component_type: grid ? grid.component_type : '7',
horizontalAlignment: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center', //水平对齐方式left, center, right
verticalAlignment: grid && grid.verticalAlignment ? grid.verticalAlignment : 'center', //垂直方式对齐top, center, bottom
text: text,
background: grid && grid.background.includes('#') ? grid.background : '', //透明
effect: grid && (grid.effect === 'true' || grid.effect === true) ? true : false, // 阴影
lineStyle: grid && grid.lineStyle ? grid.lineStyle : '1', //网格线样式
showGridLines: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true, //是否显示网格
lineWidth: grid ? parseInt(grid.lineWidth) : 1, //网格线宽度
lineColor: grid ? grid.lineColor : '#dcdcdc', //网格线颜色
peopleStyle: grid ? grid.peopleStyle : '0', //照片显示方式
isShowText: grid ? grid.isShowText : false, //是否显示文字
textShowLocation: grid ? grid.textShowLocation : '0', //文字显示位置
fontFamily: grid ? grid.fontFamily : 'SimSun', //字体
foreground: grid ? grid.foreground : '#000000', //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
fontStyle: grid ? grid.fontStyle : 'normal',
fontWeight: grid ? grid.fontWeight : 'normal',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
group['setControlVisible']('mtr', false);
canvas.setActiveObject(group);
};
//添加照片列表end============================
//添加代表团列表start====================
handleSetDeputation = (top, left, grid) => {
let child = []; //动画一
let child2 = []; //动画二
let childHead = []; //列头
let childWrapper = []; //最外层边框
let text = grid && grid.text ? grid.text : '代表团列表';
const list = [
{ deputation: '北京', yd: '8', sd: '5', wd: '3' },
{ deputation: '上海', yd: '8', sd: '5', wd: '3' },
{ deputation: '南京', yd: '8', sd: '5', wd: '3' },
{ deputation: '广州', yd: '8', sd: '5', wd: '3' },
{ deputation: '天津', yd: '8', sd: '5', wd: '3' },
// { deputation: '重庆', yd: '8' , sd: '5' , wd: '3'},
];
let length = 6 - list.length;
if (0 < length) {
for (let i = 1; i <= length; i++) {
list.push({ deputation: '', yd: '', sd: '', wd: '' });
}
}
const propsObj = list[0] || { deputation: '北京', yd: '8', sd: '5', wd: '3' };
const rowCount = list.length;
const colCount = Object.keys(propsObj).length;
const gridWidth = grid && grid.width ? (grid.width - 2) / colCount : 100;
// const gridHeigth = 50
const gridHeigth = grid && grid.height ? grid.height / 7 : 50;
let headList = { deputation: '代表团', yd: '应到', sd: '实到', wd: '未到' };
for (let x = 1; x <= colCount; x++) {
//列
const currentHeadText = headList[Object.keys(headList)[x - 1]];
// console.log(currentHeadText);
const haedTextbox = new fabric.Textbox(currentHeadText, {
width: gridWidth,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: grid && grid.groupHeadColumnFontSize ? (gridHeigth - parseInt(grid.groupHeadColumnFontSize)) / 2 : 16, //设置canvas上的Y坐标
fontFamily: grid && grid.groupHeadColumnFontName ? grid.groupHeadColumnFontName : 'SimSun',
fontSize: grid && grid.groupHeadColumnFontSize ? parseInt(grid.groupHeadColumnFontSize) : 16,
fontStyle: grid && grid.groupHeadColumnFontStyle ? grid.groupHeadColumnFontStyle.split(',')[0] : 'normal',
fontWeight: grid && grid.groupHeadColumnFontStyle ? grid.groupHeadColumnFontStyle.split(',')[1] : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const headBorder = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: 0, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
fill: grid && grid.groupHeadColumnColor ? grid.groupHeadColumnColor : '#f4f4f4', //背景颜色
_type: 'border',
visible: grid && (grid.showGroupHeadColumn == 'false' || grid.showGroupHeadColumn == false) ? false : true,
strokeWidth: grid && (grid.showGroupHeadColumn == 'true' || grid.showGroupHeadColumn == true) ? parseInt(grid.lineWidth) : 1,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
childHead.push(headBorder);
childHead.push(haedTextbox);
}
let headColumnGroup = new fabric.Group(childHead, {
width: grid ? parseInt(grid.width) : 400,
height: gridHeigth,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
showGroupHeadColumn: grid && (grid.showGroupHeadColumn == 'false' || grid.showGroupHeadColumn == false) ? false : true, //是否显示列头
groupHeadColumnColor: grid ? grid.groupHeadColumnColor : '#f4f4f4',
groupHeadColumnFontName: grid ? grid.groupHeadColumnFontName : 'SimSun',
groupHeadColumnFontSize: grid ? grid.groupHeadColumnFontSize : 16,
groupHeadColumnFontStyle: grid ? grid.groupHeadColumnFontStyle : 'normal,normal',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
// console.log(curentText);
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth,
height: gridHeigth,
// height: 50,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
fill: grid && grid.foreground ? grid.foreground : '#000000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 16,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
width: gridWidth,
// height: 50,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child.push(border);
child.push(textbox);
}
}
let group = new fabric.Group(child, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
// top: grid ? (grid.top + 75) : top - parseInt(canvas._offset.top) + 75, //设置canvas上的Y坐标
top: grid ? grid.top + gridHeigth + 3 * gridHeigth - 18 : top - parseInt(canvas._offset.top) + (3 / 2) * gridHeigth, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
// height: group ? parseInt(group.height) : 250,
height: grid ? 6 * list.length : 300,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
// 第二个动画
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
// console.log(curentText);
let gridTop = (y - 1) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox2 = new fabric.Textbox(curentText, {
width: gridWidth,
// height: gridHeigth,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
fill: grid && grid.foreground ? grid.foreground : '#000000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 16,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border2 = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child2.push(border2);
child2.push(textbox2);
}
}
let group2 = new fabric.Group(child2, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top + gridHeigth + 3 * gridHeigth - 18 : top - parseInt(canvas._offset.top) + (3 / 2) * gridHeigth, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
// height: group2 ? parseInt(group2.height) : 250,
height: grid ? 6 * list.length : 300,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let linear = function (t, b, c, d) {
return (c * t) / d + b;
};
if (list.length > 6 && (grid && parseInt(grid.moveSpeed) !== 6000)) {
const handleSetDeputationAnimate1 = () => {
// group.animate('top', -(list.length * gridHeigth * 3 / 2 - (list.length * gridHeigth - group.height)), {
group.animate('top', -((list.length * gridHeigth * 3) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)), {
// from: -(list.length * gridHeigth / 2 - (list.length * gridHeigth - group.height)),
from: -((list.length * gridHeigth) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)),
duration: grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 10000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate1,
easing: linear,
});
};
handleSetDeputationAnimate1();
const handleSetDeputationAnimate2 = () => {
group2.animate('top', -((list.length * gridHeigth) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)), {
from: (list.length * gridHeigth) / 2 + (list.length * gridHeigth - group.height - 2 * gridHeigth),
duration: grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 10000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate2,
easing: linear,
});
};
handleSetDeputationAnimate2();
}
var rect = new fabric.Rect({
width: grid ? parseInt(grid.width) : 400,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
// stroke: '#dcdcdc',
strokeWidth: 1,
fill: '',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
childWrapper.push(group);
if (list.length > 6) {
childWrapper.push(group2);
}
grid && (grid.showGroupHeadColumn == 'false' || grid.showGroupHeadColumn == false) ? '' : childWrapper.push(headColumnGroup);
childWrapper.push(rect);
// grid && (grid.showGroupHeadColumn == 'false' || grid.showGroupHeadColumn == false) ? childWrapper.splice(2,1) : ''
let groupWrapper = new fabric.Group(childWrapper, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
height: grid ? parseInt(grid.height) : 350,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
horizontalAlignment: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center', //水平对齐方式left, center, right
verticalAlignment: grid && grid.verticalAlignment ? grid.verticalAlignment : 'center', //垂直方式对齐top, center, bottom
lineStyle: grid && grid.lineStyle ? grid.lineStyle : '1', //网格线样式
showGridLines: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true, //是否显示网格
lineWidth: grid ? parseInt(grid.lineWidth) : 1, //网格线宽度
lineColor: grid ? grid.lineColor : '#dcdcdc', //网格线颜色
effect: grid && (grid.effect === 'true' || grid.effect === true) ? true : false, // 阴影
fontFamily: grid ? grid.fontFamily : 'SimSun', //字体
foreground: grid ? grid.foreground : '#000000', //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
fontStyle: grid ? grid.fontStyle : 'normal',
fontWeight: grid ? grid.fontWeight : 'normal',
background: grid && grid.background.includes('#') ? grid.background : '', //透明
moveSpeed: grid && grid.moveSpeed ? grid.moveSpeed : '10000',
text: text,
showGroupHeadColumn: grid && (grid.showGroupHeadColumn === 'false' || grid.showGroupHeadColumn === false) ? false : true, //是否显示列头
groupHeadColumnColor: grid ? grid.groupHeadColumnColor : '#f4f4f4',
groupHeadColumnFontName: grid ? grid.groupHeadColumnFontName : 'SimSun',
groupHeadColumnFontSize: grid ? grid.groupHeadColumnFontSize : 16,
groupHeadColumnFontStyle: grid ? grid.groupHeadColumnFontStyle : 'normal,normal',
component_type: grid ? grid.component_type : '8',
bindingFieldID: grid && grid.bindingFieldID ? grid.bindingFieldID : '0x1096',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
groupWrapper.clipTo = function (ctx) {
ctx.beginPath();
ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height); // 根据Group对象的左上角和宽高计算路径
};
canvas.add(groupWrapper); // 将图形添加至画布
groupWrapper['setControlVisible']('mtr', false);
//更新canvas
canvas.setActiveObject(groupWrapper);
};
//添加代表团列表end====================
//添加子义题列表start========================
handleSetZytlb = (top, left, grid) => {
let child = []; //动画一
let child2 = []; //动画二
let childHead = []; //列头
let childWrapper = []; //最外层边框
let text = grid && grid.text ? grid.text : '子议题列表';
const topicName = grid?.keyTopicSelect && (grid.keyTopicSelect === 'true' || grid.keyTopicSelect === true) ? true : false;
const zc = grid?.key1Select && (grid.key1Select === 'true' || grid.key1Select === true) ? true : false;
const fd = grid?.key2Select && (grid.key2Select === 'true' || grid.key2Select === true) ? true : false;
const qq = grid?.key3Select && (grid.key3Select === 'true' || grid.key3Select === true) ? true : false;
const wa = grid?.keyOtherSelect && (grid.keyOtherSelect === 'true' || grid.keyOtherSelect === true) ? true : false;
const jg = grid?.keyResultSelect && (grid.keyResultSelect === 'true' || grid.keyResultSelect === true) ? true : false;
const num = grid?.topicNumOnePage ? grid.topicNumOnePage : 6;
const tempGridSetting = {
topicName: topicName,
zc: zc,
fd: fd,
qq: qq,
wa: wa,
jg: jg,
};
const list = [
{ topicName: '议题名称', zc: '赞成人数', fd: '反对人数', qq: '弃权人数', wa: '未按人数', jg: '表决结果' },
{ topicName: '第一次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第二次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第三次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第四次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第五次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第六次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
{ topicName: '第七次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' },
];
let length = num - list.length;
if (0 < length) {
for (let i = 1; i <= length; i++) {
list.push({ topicName: '', zc: '', fd: '', qq: '', wa: '', jg: '' });
}
}
if (!topicName && !zc && !fd && !qq && !wa && !jg) {
list.length = num;
}
const propsObj = list[0] || { topicName: '第一次全体会议', zc: '26', fd: '3', qq: '2', wa: '0', jg: '赞成' };
const rowCount = list.length;
const colCount = Object.keys(propsObj).length;
const gridWidth1 = grid ? (grid.width - 2) * (parseInt(grid.topicPercent) / 100) : 100;
const gridWidth2 = grid ? ((grid.width - 2) * (parseInt(100 - grid.topicPercent) / 100)) / 5 : 100;
const gridHeigth = grid ? grid.height / (parseInt(grid.topicNumOnePage) + 1) : 50;
// const gridHeigth = 50
// let copeHeadList = { topicName: '议题名称', zc: '赞成人数', fd: '反对人数', qq: '弃权人数', wa: '未按人数', jg: '表决结果' };
// let headList = {};
// Object.keys(copeHeadList).map((item) => {
// headList[item] = tempGridSetting[item] ? copeHeadList[item] : '';
// });
// console.log('议题表头111', headList);
list.map((item) => {
Object.keys(item).map((itemChild) => {
item[itemChild] = tempGridSetting[itemChild] ? item[itemChild] : '';
});
});
for (let x = 1; x <= colCount; x++) {
//列
if (x == 1) {
// const currentHeadText = headList[Object.keys(headList)[x - 1]];
// const haedTextbox = new fabric.Textbox(currentHeadText, {
// width: gridWidth1,
// left: (x - 1) * gridWidth1 - 2, //设置canvas上的x坐标
// top: grid && grid.fontSize ? (gridHeigth - parseInt(grid.fontSize)) / 2 : 16, //设置canvas上的Y坐标
// fill: grid && grid.foreground ? grid.foreground : '#333',
// // top: 0,
// fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
// fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle ? grid.fontStyle.split(',')[0] : 'normal',
// fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const headBorder = new fabric.Rect({
// width: gridWidth1,
// height: gridHeigth,
// left: (x - 1) * gridWidth1, //设置canvas上的X坐标
// top: 0, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
// // fill: grid && grid.foreground ? grid.foreground : '#f4f4f4',
// fill: canvas.backgroundColor && canvas.backgroundColor.includes('#') ? canvas.backgroundColor : '#f4f4f4', //背景颜色
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// childHead.push(headBorder);
// childHead.push(haedTextbox);
} else {
// const currentHeadText = headList[Object.keys(headList)[x - 1]];
// const haedTextbox = new fabric.Textbox(currentHeadText, {
// width: gridWidth2,
// left: (x - 2) * gridWidth2 - 2 + gridWidth1, //设置canvas上的x坐标
// top: grid && grid.fontSize ? (gridHeigth - parseInt(grid.fontSize)) / 2 : 16, //设置canvas上的Y坐标
// fill: grid && grid.foreground ? grid.foreground : '#333',
// // top: 0,
// fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
// fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle ? grid.fontStyle.split(',')[0] : 'normal',
// fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const headBorder = new fabric.Rect({
// width: gridWidth2,
// height: gridHeigth,
// left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
// top: 0, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
// // fill: grid && grid.foreground ? grid.foreground : '#f4f4f4',
// fill: canvas.backgroundColor && canvas.backgroundColor.includes('#')? canvas.backgroundColor : '#f4f4f4', //背景颜色
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// childHead.push(headBorder);
// childHead.push(haedTextbox);
}
}
var headColumnGroup = new fabric.Group(childHead, {
width: grid ? parseInt(grid.width) : 600,
height: gridHeigth,
left: grid ? grid.left : left - parseInt(canvas._offset.left) + (grid?.width ? grid.width / 6 : 100), //设置canvas上的X坐标
top: grid ? parseInt(grid.fontSize) / 2 : 0,
// top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
showGroupHeadColumn: grid && (grid.showGridLines == 'false' || grid.showGridLines == false) ? false : true, //是否显示列头
// groupHeadColumnColor: grid ? grid.background : '#f4f4f4',
groupHeadColumnColor: grid ? grid.background : '#f4f4f4',
groupHeadColumnFontName: grid ? grid.fontFamily : 'SimSun',
groupHeadColumnFontSize: grid ? grid.fontSize : 18,
groupHeadColumnFontStyle: grid ? grid.fontStyle : 'normal',
groupHeadColumnFontWeight: grid ? grid.fontWeight : 'normal',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
if (x == 1) {
const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth1,
height: gridHeigth,
left: (x - 1) * gridWidth1 - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
fill: grid && grid.foreground ? grid.foreground : '#000000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
width: gridWidth1,
height: gridHeigth,
left: (x - 1) * gridWidth1, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child.push(border);
child.push(textbox);
} else {
const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === 'center') || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === 'bottom') {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth2,
height: gridHeigth,
left: (x - 2) * gridWidth2 + gridWidth1 - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
fill: grid && grid.foreground ? grid.foreground : '#000000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
width: gridWidth2,
height: gridHeigth,
left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
child.push(border);
child.push(textbox);
}
}
}
let group = new fabric.Group(child, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top + gridHeigth + 3 * gridHeigth - 18 : top - parseInt(canvas._offset.top) + gridHeigth + 3 * gridHeigth - 18, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 600,
height: grid ? grid.topicNumOnePage * list.length : 250,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
// 第二个动画
// for (let y = 1; y <= rowCount; y++) {
// // 行
// const obj = list[y - 1];
// // console.log(`----------第${y}行----------`);
// for (let x = 1; x <= colCount; x++) {
// // 列
// const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
// // console.log(curentText);
// let gridTop = (y - 2) * gridHeigth;
// if ((grid && grid.verticalAlignment === 'center') || !grid) {
// if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
// else gridTop = gridTop + (gridHeigth - 16) / 2;
// } else if (grid && grid.verticalAlignment === 'bottom') {
// gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
// }
// if (x == 1) {
// const textbox2 = new fabric.Textbox(curentText, {
// width: gridWidth1,
// // height: gridHeigth,
// left: (x - 1) * gridWidth1 - 2, //设置canvas上的x坐标
// top: gridTop - 2, //设置canvas上的Y坐标
// shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
// fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
// fill: grid && grid.foreground ? grid.foreground : '#000000',
// fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
// fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const border2 = new fabric.Rect({
// width: gridWidth1,
// height: gridHeigth,
// left: (x - 1) * gridWidth1, //设置canvas上的X坐标
// top: 0,
// // top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
// strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// child2.push(border2);
// child2.push(textbox2);
// } else {
// const curentText = obj[Object.keys(obj)[x - 1]]; //当前单元格的值
// // console.log(curentText);
// let gridTop = (y - 2) * gridHeigth;
// if ((grid && grid.verticalAlignment === 'center') || !grid) {
// if (grid) gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
// else gridTop = gridTop + (gridHeigth - 16) / 2;
// } else if (grid && grid.verticalAlignment === 'bottom') {
// gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
// }
// const textbox2 = new fabric.Textbox(curentText, {
// width: gridWidth2,
// // height: gridHeigth,
// left: (x - 2) * gridWidth2 + gridWidth1 - 2, //设置canvas上的x坐标
// // top: 0,
// top: gridTop - 2, //设置canvas上的Y坐标
// shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
// fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
// fill: grid && grid.foreground ? grid.foreground : '#000000',
// fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
// fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const border2 = new fabric.Rect({
// width: gridWidth2,
// height: gridHeigth,
// left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
// top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
// strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0], //实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// child2.push(border2);
// child2.push(textbox2);
// }
// }
// }
// let group2 = new fabric.Group(child2, {
// left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
// top: grid ? grid.top + gridHeigth + 3 * gridHeigth - 18 : top - parseInt(canvas._offset.top) + gridHeigth + 3 * gridHeigth - 18, //设置canvas上的Y坐标
// width: grid ? parseInt(grid.width) : 600,
// height: grid ? grid.topicNumOnePage * list.length : 250,
// });
let linear = function (t, b, c, d) {
return (c * t) / d + b;
};
if (list.length > num && (grid && parseInt(grid.moveSpeed) !== 6000)) {
const handleSetDeputationAnimate1 = () => {
group.animate('top', -((list.length * gridHeigth * 3) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)), {
// from: -(list.length * gridHeigth / 2 - (list.length * gridHeigth - group.height)),
from: -((list.length * gridHeigth) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)),
duration: grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 5000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate1,
easing: linear,
});
};
handleSetDeputationAnimate1();
// const handleSetDeputationAnimate2 = () => {
// group2.animate('top', -((list.length * gridHeigth) / 2 - (list.length * gridHeigth - group.height - 2 * gridHeigth)), {
// from: (list.length * gridHeigth) / 2 + (list.length * gridHeigth - group.height - 2 * gridHeigth),
// duration: grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 5000,
// onChange: canvas.renderAll.bind(canvas),
// onComplete: handleSetDeputationAnimate2,
// easing: linear,
// });
// };
// handleSetDeputationAnimate2();
}
var rect = new fabric.Rect({
width: grid ? parseInt(grid.width) : 600,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: 0,
// top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
stroke: '#dcdcdc',
strokeWidth: 1,
fill: '',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
childWrapper.push(rect);
childWrapper.push(group);
if (list.length > num) {
// childWrapper.push(group2);
}
childWrapper.push(headColumnGroup);
let groupWrapper = new fabric.Group(childWrapper, {
width: grid ? parseInt(grid.width) : 600,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
component_type: '9',
horizontalAlignment: grid ? grid.horizontalAlignment : 'center', //水平对齐方式left, center, right
verticalAlignment: grid ? grid.verticalAlignment : 'center', //垂直方式对齐top, center, bottom
text: text,
moveSpeed: grid && grid.moveSpeed ? grid.moveSpeed : '5000',
background: grid && grid.background.includes('#') ? grid.background : '', //透明
effect: grid && (grid.effect === 'true' || grid.effect === true) ? true : false, // 阴影
lineStyle: grid && grid.lineStyle ? grid.lineStyle : '1', //网格线样式
showGridLines: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true, //是否显示网格
lineWidth: grid && grid.lineWidth ? parseInt(grid.lineWidth) : '1', //网格线宽度
lineColor: grid && grid.lineColor ? grid.lineColor : '#dcdcdc', //网格线颜色
fontFamily: grid ? grid.fontFamily : 'SimSun', //字体
fontStyle: grid ? grid.fontStyle : 'normal', //字体宽度设置
foreground: grid ? grid.foreground : '#000', //字体颜色
fontSize: grid ? parseInt(grid.fontSize) : 18, //字体大小
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal', //字体宽度
keyTopicSelect: grid && (grid.keyTopicSelect === 'true' || grid.keyTopicSelect === true) ? true : false, // 是否显示议题
topicPercent: grid ? parseInt(grid.topicPercent) : Math.round((1 / 6) * 100), // 议题百分比
topicNumOnePage: grid ? parseInt(grid.topicNumOnePage) : 6, //每页条数
key1Select: grid && (grid.key1Select === 'true' || grid.key1Select === true) ? true : false, //是否显示按键1
key2Select: grid && (grid.key2Select === 'true' || grid.key2Select === true) ? true : false, //是否显示按键2
key3Select: grid && (grid.key3Select === 'true' || grid.key3Select === true) ? true : false, //是否显示按键3
button1: grid && (grid.button1 === 'true' || grid.button1 === true) ? true : false, //是否显示赞成
button2: grid && (grid.button2 === 'true' || grid.button2 === true) ? true : false, //是否显示反对
button3: grid && (grid.button3 === 'true' || grid.button3 === true) ? true : false, //是否显示弃权
keyOtherSelect: grid && (grid.keyOtherSelect === 'true' || grid.keyOtherSelect === true) ? true : false, //是否显示未按
keyResultSelect: grid && (grid.keyResultSelect === 'true' || grid.keyResultSelect === true) ? true : false, //是否显示议题结果
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
groupWrapper.clipTo = function (ctx) {
ctx.beginPath();
ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height); // 根据Group对象的左上角和宽高计算路径
};
canvas.add(groupWrapper);
groupWrapper['setControlVisible']('mtr', false);
canvas.setActiveObject(groupWrapper);
};
//添加子义题列表end========================
//添加时间控件列表start====================
handleSetSjkj = (top, left, grid) => {
const bjctDate = 'YYYY-MM-DD';
let date = grid ? moment(Date.now()).format(grid.formatPar) : moment(Date.now()).format(bjctDate);
const textWidth = grid ? parseInt(grid.width) : 200;
const textHeight = grid ? parseInt(grid.height) : 100;
let textTop = 0;
let textbox = new fabric.Textbox(grid ? moment(Date.now()).format(grid.formatPar) : moment(Date.now()).format(bjctDate), {
fill: grid && grid.fill ? grid.fill : grid && grid.foreground ? grid.foreground : '#000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
width: textWidth,
left: 0,
top: textTop,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeight,
background: grid && grid.background.includes('#') ? grid.background : '',
fill: grid && grid.background.includes('#') ? grid.background : '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([border, textbox], {
text: date,
width: textWidth,
height: textHeight,
left: grid ? parseInt(grid.left) : parseInt(left - canvas._offset.left),
top: grid ? parseInt(grid.top) : parseInt(top - canvas._offset.top),
formatPar: grid && grid.formatPar ? grid.formatPar : bjctDate, // 时间格式
background: grid && grid.background.includes('#') ? grid.background : '',
fill: grid && grid.fill ? grid.fill : grid && grid.foreground ? grid.foreground : '#000',
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontWeight: grid && grid.fontWeight ? grid.fontWeight : 'normal',
fontStyle: grid && grid.fontStyle ? grid.fontStyle : 'normal',
fontFamily: grid && grid.fontFamily ? grid.fontFamily : 'SimSun',
component_type: '10',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
group['setControlVisible']('mtr', false);
canvas.setActiveObject(group);
timer = setInterval(() => {
group.item(1).set({ text: grid ? moment(Date.now()).format(grid.formatPar) : moment(Date.now()).format(bjctDate) });
canvas.renderAll();
}, 1000);
};
//添加时间控件列表end====================
//添加按钮控件列表start====================
handleSetAnkj = (top, left, btn) => {
const textTop = btn && btn.fontSize ? (btn.height - parseInt(btn.fontSize)) / 2 : 3;
if (btn && btn.showStyle === 'circleAndLamp') {
if (btn.bindingFieldID === '0x2021') {
// 报到按钮
let textbox = new fabric.Textbox(btn ? btn.text : '初始值', {
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
fill: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
textAlign: 'center',
// width: btn && btn.width ? btn.width : 50,
// height: btn && btn.height ? btn.height*0.3 : 25,
left: btn && btn.width ? (btn.width) / 2 - parseInt(btn.fontSize) : 0,
top: btn && btn.width ? btn.width * 0.7 + 25 : textTop,
rx: btn && btn.width ? btn.width * 0.2 : 0,
ry: btn && btn.width ? btn.width * 0.2 : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let smallCircle = new fabric.Rect({
left: (btn.width) / 2 - (btn.width * 0.2) / 2,
top: 0,
width: btn.width * 0.2,
height: btn.width * 0.2,
// fill: '#000000',
fill: btn && btn.colorChangeStyle ? btn.colorChangeStyle : '#000000',
// stroke: '#dcdcdc',
stroke: btn && btn.colorChangeStyle ? btn.colorChangeStyle : '#000000',
showStyle: 'circle', // 按钮形状
strokeWidth: 2,
_type: 'border',
rx: btn.width * 0.2,
ry: btn.width * 0.2,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: (btn.width / 2) - (btn.width * 0.5) / 2,
top: btn.width * 0.2 + 20,
width: btn && btn.width ? btn.width * 0.5 : 50,
height: btn && btn.width ? btn.width * 0.5 : 50,
fill: btn && btn.background ? btn.background : '#ffffff',
stroke: '#dcdcdc',
strokeWidth: 1,
_type: 'border',
width: btn && btn.width ? btn.width * 0.5 : 50,
height: btn && btn.width ? btn.width * 0.5 : 50,
rx: btn && btn.width ? btn.width * 0.5 : 0,
ry: btn && btn.width ? btn.width * 0.5 : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([smallCircle, border, textbox], {
width: btn && btn.width ? btn.width : 50,
height: btn && btn.height ? btn.height : 100,
left: btn ? parseInt(btn.left) : parseInt(left - canvas._offset.left),
top: btn ? parseInt(btn.top) : parseInt(top - canvas._offset.top) + 60,
component_type: '0',
// hasControls: false,
colorChangeStyle: btn && btn.colorChangeStyle && btn.colorChangeStyle.includes('#') ? btn.colorChangeStyle : '#000000', // 灯颜色
showStyle: btn && btn.showStyle ? btn.showStyle : 'square', // 按钮形状
background: btn && btn.background.includes('#') ? btn.background : '#ffffff', // 按钮背景颜色
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
foreground: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
text: btn ? btn.text : '初始值', // 内容
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
bindingFieldID: btn && btn.bindingFieldID ? btn.bindingFieldID : undefined, // 系统设置
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
canvas.setActiveObject(group);
}
else {
// console.log('绘制灯', btn);
let textbox = new fabric.Textbox(btn ? btn.text : '初始值', {
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
fill: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
textAlign: 'center',
// width: btn && btn.width ? btn.width : 50,
// height: btn && btn.height ? btn.height*0.3 : 25,
left: btn && btn.width ? (btn.width) / 2 - parseInt(btn.fontSize) : 0,
top: btn && btn.width ? btn.width * 0.7 + 25 : textTop,
rx: btn && btn.width ? btn.width * 0.2 : 0,
ry: btn && btn.width ? btn.width * 0.2 : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let smallCircle = new fabric.Rect({
left: (btn.width) / 2 - (btn.width * 0.2) / 2,
top: 0,
width: btn.width * 0.2,
height: btn.width * 0.2,
// fill: '#000000',
fill: btn && btn.colorChangeStyle ? btn.colorChangeStyle : '#000000',
// stroke: '#dcdcdc',
stroke: btn && btn.colorChangeStyle ? btn.colorChangeStyle : '#000000',
showStyle: 'circle', // 按钮形状
strokeWidth: 2,
_type: 'border',
rx: btn.width * 0.2,
ry: btn.width * 0.2,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: (btn.width / 2) - (btn.width * 0.5) / 2,
top: btn.width * 0.2 + 20,
width: btn && btn.width ? btn.width * 0.5 : 50,
height: btn && btn.width ? btn.width * 0.5 : 50,
fill: btn && btn.background ? btn.background : '#ffffff',
stroke: '#dcdcdc',
strokeWidth: 1,
_type: 'border',
width: btn && btn.width ? btn.width * 0.5 : 50,
height: btn && btn.width ? btn.width * 0.5 : 50,
rx: btn && btn.width ? btn.width * 0.5 : 0,
ry: btn && btn.width ? btn.width * 0.5 : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([smallCircle, border, textbox], {
width: btn && btn.width ? btn.width : 50,
height: btn && btn.height ? btn.height : 100,
left: btn ? parseInt(btn.left) : parseInt(left - canvas._offset.left),
top: btn ? parseInt(btn.top) : parseInt(top - canvas._offset.top) + 60,
component_type: '0',
// hasControls: false,
colorChangeStyle: btn && btn.colorChangeStyle && btn.colorChangeStyle.includes('#') ? btn.colorChangeStyle : '#000000', // 灯颜色
showStyle: btn && btn.showStyle ? btn.showStyle : 'square', // 按钮形状
background: btn && btn.background.includes('#') ? btn.background : '#ffffff', // 按钮背景颜色
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
foreground: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
text: btn ? btn.text : '初始值', // 内容
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
bindingFieldID: btn && btn.bindingFieldID ? btn.bindingFieldID : undefined, // 系统设置
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
canvas.setActiveObject(group);
}
} else {
let textbox = new fabric.Textbox(btn ? btn.text : '初始值', {
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
fill: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
textAlign: 'center',
width: btn && btn.width ? btn.width : 100,
height: btn && btn.height ? (btn.showStyle === 'circle' ? btn.width : btn.height) : 50,
left: 0,
top: textTop,
rx: btn && btn.showStyle === 'circle' ? btn.width : 0,
ry: btn && btn.showStyle === 'circle' ? btn.width : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: btn && btn.width ? btn.width : 100,
height: btn && btn.height ? (btn.showStyle === 'circle' ? btn.width : btn.height) : 50,
fill: btn && btn.background ? btn.background : '#ffffff',
stroke: '#dcdcdc',
strokeWidth: 1,
_type: 'border',
width: btn && btn.width ? btn.width : 100,
height: btn && btn.height ? (btn.showStyle === 'circle' ? btn.width : btn.height) : 50,
rx: btn && btn.showStyle === 'circle' ? btn.width : 0,
ry: btn && btn.showStyle === 'circle' ? btn.width : 0,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let group = new fabric.Group([border, textbox], {
width: btn && btn.width ? btn.width : 50,
height: btn && btn.height ? (btn.showStyle === 'circle' ? btn.width : btn.height) : 25,
left: btn ? parseInt(btn.left) : parseInt(left - canvas._offset.left),
top: btn ? parseInt(btn.top) : parseInt(top - canvas._offset.top),
component_type: '0',
// hasControls: false,
showStyle: btn && btn.showStyle ? btn.showStyle : 'square', // 按钮形状
background: btn && btn.background.includes('#') ? btn.background : '#ffffff', // 按钮背景颜色
fontSize: btn && btn.fontSize ? parseInt(btn.fontSize) : 16, // 字体大小
foreground: btn && btn.foreground.includes('#') ? btn.foreground : '#000000', // 字体颜色
text: btn ? btn.text : '初始值', // 内容
fontStyle: btn && btn.fontStyle ? btn.fontStyle : 'normal', // 字体宽度设置
fontFamily: btn && btn.fontFamily ? btn.fontFamily : 'SimSun', // 字体
bindingFieldID: btn && btn.bindingFieldID ? btn.bindingFieldID : undefined, // 系统设置
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
canvas.setActiveObject(group);
}
};
//添加按钮控件列表end====================
//添加线条控制start====================
handleSetImage = (left, top, type, val) => {
let x1 = val ? val.left : left - canvas._offset.left;
let y1 = val ? val.top : top - canvas._offset.top;
let x2 = val ? val.left + val.width : left - canvas._offset.left + 200;
let y2 = val ? val.top + val.height : top - canvas._offset.top + 100;
let lineBoxWidth = val ? parseInt(val.width) : 200;
let lineBoxHeigth = val ? parseInt(val.height) : 100;
switch (type) {
case 'horizontalrealline':
case '11':
let horizontalRealLine = new fabric.Line([x1, y1, x2, y1], {
stroke: val ? val.stroke : '#e70808', //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: 'line',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let borderHRL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let groupHRL = new fabric.Group([borderHRL, horizontalRealLine], {
component_type: '11',
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : '#e70808', //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupHRL); // 将图形添加至画布
groupHRL['setControlVisible']('mtr', false);
break;
case 'horizontaldottedline':
case '12':
let horizontalDottedLine = new fabric.Line([x1, y1, x2, y1], {
stroke: val ? val.stroke : '#000000', //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
strokeDashArray: [5, 5],
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: 'line',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let borderHDL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let groupHDL = new fabric.Group([borderHDL, horizontalDottedLine], {
component_type: '12',
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : '#000000', //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupHDL);
groupHDL['setControlVisible']('mtr', false);
break;
case 'verticalrealline':
case '13':
let verticalRealLine = new fabric.Line([x1, y1, x1, y2], {
stroke: val ? val.stroke : '#000000', //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: 'line',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let borderVRL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let groupVRL = new fabric.Group([borderVRL, verticalRealLine], {
component_type: '13',
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : '#000000', //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupVRL);
groupVRL['setControlVisible']('mtr', false);
break;
case 'verticaldottedline':
case '14':
let verticalDottedLine = new fabric.Line([x1, y1, x1, y2], {
stroke: val ? val.stroke : '#000000', //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
strokeDashArray: [5, 5],
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: 'line',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let borderVDL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: '',
_type: 'border',
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
let groupVDL = new fabric.Group([borderVDL, verticalDottedLine], {
component_type: '14',
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : '#000000', //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupVDL);
groupVDL['setControlVisible']('mtr', false);
break;
default:
break;
}
};
//添加线条控制end====================
// 从子组件同步控件信息到canvas
handleRefreshComponent = (params) => {
const { canvas } = this.state;
const { location, dispatch } = this.props;
const group = canvas.getActiveObject();
let video = null;
let img = null;
// 上传图片
if (group.component_type === '2') {
img = group.getObjects().find((item) => {
// 通过 isType 判断图片元素，因为组内有2个元素（一个图片，一个文本）
return item.isType('image');
});
} else if (group.component_type === '3') {
video = document.getElementById(group.id);
}
if (params.imagePath && typeof params.imagePath !== 'string') {
const formData = new FormData();
formData.append('upload', params.imagePath);
dispatch({
type: 'bjct/single_img_return_route',
payload: formData,
callback: (res) => {
if (res.success) {
// 视频
if (group.component_type === '3') {
video.src = `${configUrl}/${res.datarecord}`;
video.play();
group.top = params.top || group.top;
group.left = params.left || group.left;
group.width = params.width || group.width;
group.height = params.height || group.height;
group.fullScreen = params.fullScreen;
group.videoSource = res.datarecord;
canvas.renderAll();
return;
}
group.top = +params.top || group.top;
group.left = +params.left || group.left;
group.width = +params.width || group.width;
group.height = +params.height || group.height;
group.fullScreen = params.fullScreen;
group.effect = params.effect;
group.shadow = params.effect ? shadow : null;
group.stretch = params.stretch;
group.resourceMode = params.resourceMode;
group.imagePath = res.datarecord;
group.bindingFieldID = params.bindingFieldID || group.bindingFieldID;
if (group.component_type === '2' && group.fullScreen) {
group.top = 0;
group.left = 0;
}
// 找到图片，然后更换
img.setSrc(`${configUrl}/${res.datarecord}`, () => {
// 默认
let scaleY = 1;
let scaleX = 1;
if (params.stretch === '2') {
// 同比例裁剪照片
const scale = group.width / img.width > group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (params.stretch === '3') {
// 同比例
const scale = group.width / img.width < group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (params.stretch === '4') {
// 填充
scaleY = group.height / img.height;
scaleX = group.width / img.width;
}
img.set({
left: 0,
top: 0,
originX: 'center',
originY: 'center',
scaleX: scaleX,
scaleY: scaleY,
});
canvas.renderAll();
});
group.clipPath =
params.stretch === '2'
? new fabric.Rect({
top: -group.height / 2,
left: -group.width / 2,
width: group.width,
height: group.height,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
})
: null;
} else {
message.error('图片上传失败');
}
},
});
} else {
group.top = params.top || group.top;
group.left = params.left || group.left;
group.width = +params.width || group.width;
group.height = +params.height || group.height;
group.fullScreen = params.fullScreen || group.fullScreen;
group.effect = params.effect || group.effect;
group.shadow = params.effect && group.component_type === '2' ? shadow : null;
group.stretch = params && params.stretch ? params.stretch : group.stretch;
group.resourceMode = params.resourceMode || group.resourceMode;
group.imagePath = group.imagePath;
group.bindingFieldID = params.bindingFieldID || group.bindingFieldID;
group.resourceMode = params.resourceMode || group.resourceMode;
if (group.component_type === '2') {
// 默认
let scaleY = 1;
let scaleX = 1;
if (params.stretch === '2') {
// 同比例裁剪照片
const scale = group.width / img.width > group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (params.stretch === '3') {
// 同比例
const scale = group.width / img.width < group.height / img.height ? group.width / img.width : group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (params.stretch === '4' || !params.stretch) {
// 填充
scaleY = group.height / img.height;
scaleX = group.width / img.width;
}
img.set({
left: 0,
top: 0,
originX: 'center',
originY: 'center',
scaleX: scaleX,
scaleY: scaleY,
});
group.clipPath =
params.stretch === '2'
? new fabric.Rect({
top: -group.height / 2,
left: -group.width / 2,
width: group.width,
height: group.height,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
})
: null;
group.top = params.top;
group.left = params.left;
} else if (group.component_type === '3') {
const scaleX = params.width / video.videoWidth;
const scaleY = params.height / video.videoHeight;
group.set({
scaleX: scaleX,
scaleY: scaleY,
width: video.videoWidth,
height: video.videoHeight,
});
} else if (group.component_type === '5') {
params.bindingFieldPeopleType = typeof params.bindingFieldPeopleType == 'string' ? params.bindingFieldPeopleType : params.bindingFieldPeopleType.join(',');
canvas.remove(group);
this.handleSetGridList(params.left, params.left, params);
}
canvas.renderAll();
// canvas.setActiveObject(group);
}
};
</script>
</html>