|
|
<!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> |
