// 思路是点击签章的时候,原来的签章不显示,生成一个img用于拖动,实现拖动效果,再点击新生成的img就保存数据,干掉临时的img class MoveSignatureTool { constructor(ctx, canvas, pageObj, pageIdx, jpcOutput) { this.signatureList = []; this.ctx = ctx; // 被选中的签章 this.activeImg = undefined; //鼠标位减图形位 this.subPos = null; //图形是否被选择 this.selected = false; // 上一个被选中的签章属性 this.lastPosition = { x: 0, y: 0, width: 0, height: 0 }; //canvas的dom对象 this.canvas = canvas; this.pageObj = pageObj; this.pageIdx = pageIdx; this.jpcOutput = jpcOutput; this.signatureCanvas = document.getElementById("rptSignatureCanvas"); } setSignature(obj, x, y, width, height, signature_name, signatureName, signType) { // 只有签章才能移动 if (signType) { this.signatureList.push({ obj, x, y, width, height, crossOrigin: 'Anonymous', signature_name, signatureName, signType }) } } //获取鼠标在canvas中的位置 getMousePos(event, me) { //获取鼠标位置 const { clientX, clientY } = event; //获取canvas 边界位置 const { top, left } = me.canvas.getBoundingClientRect(); //计算鼠标在canvas 中的位置 const x = clientX - left; const y = clientY - top; return { x, y }; } //判断点是否在图形中 containPoint(data, mousePos) { //解构图形位置和尺寸 const { x, y, width, height } = data; //解构鼠标位置 const { x: mx, y: my } = mousePos; //计算鼠标和图形上、下、左、右边界的关系 const l = mx > x; const r = mx < x + width; const t = my > y; const b = my < y + height; return l && r && t && b; } mousedownFn(event, me) { //鼠标位置 const mousePos = me.getMousePos(event, me); // 找到相应的对象 const target = me.signatureList.find((item) => me.containPoint(item, mousePos)); if ($('#templateSignature').length === 0 && target) { //先把上一次的数据记录下来 const { x, y, width, height } = target; Object.assign(me.lastPosition, { x, y, width, height }); me.selected = true; me.activeImg = target; //鼠标位减图形位 me.subPos = { x: mousePos.x - me.activeImg.x, y: mousePos.y - me.activeImg.y, }; const curPage = zTreeOprObj.currentPage || 1; const orgTargetData = this.pageObj.items[curPage - 1].signature_cells.find(item => item.signatureName === target.signatureName && item.signType === target.signType); if (orgTargetData) { orgTargetData.isMoving = true; this.render(me); const { top, left } = $("#rptCanvas").position(); $("#rptCanvas").after(`
`); $("#templateSignature").unbind('mousemove').on('mousemove', (e) => { this.templateSignatureMove(e, this) }); $("#templateSignature").unbind('click').on('click', (e) => { this.templateSignatureClick(e, this) }); } } else { me.selected = false; } } saveSignature(me) { //鼠标抬起,取消拖拽 me.selected = false; me.render(me); const params = {}; params.id = CURRENT_ROLE_REL_ID; params.tender_id = TENDER_ID; params.stage_id = getStageId(); params.rpt_id = zTreeOprObj.currentNode.refId; params.business_id = BUSINESS_ID; // params.rel_content = ROLE_REL_LIST; params.rel_content = []; ROLE_REL_LIST.forEach((role) => { if (role.signature_name.indexOf('dummy_pic') < 0) { params.rel_content.push(role); } }); const { x, y, width, height, signType, signatureName } = me.activeImg; const target = ROLE_REL_LIST.find(item => item.signature_name === signatureName); if (target) { if (!target.areaData) target.areaData = {}; target.areaData[signType] = { Top: y, Bottom: y + height, Left: x, Right: x + width } } CommonAjax.postXsrfEx("/tender/report_api/updateRoleRelationship", params, 10000, true, getCookie('csrfToken_j'), async function (result) { // console.log(result); } ) } render(me, isHideSignature = false) { let target; // 因为只有一页,所以就默认取是一个数据 const curPage = zTreeOprObj.currentPage || 1; for (const signature of me.pageObj.items[curPage - 1].signature_cells) { //找到要移动的签章 if (signature.signature_name && me.activeImg && me.activeImg.signature_name.includes(signature.signature_name)) { target = signature; } } if (target) { Object.assign(target.area, { Top: me.activeImg.y, Bottom: me.activeImg.y + me.activeImg.height, Left: me.activeImg.x, Right: me.activeImg.x + me.activeImg.width, }) me.jpcOutput.cleanCanvas(me.canvas); me.jpcOutput.drawPageBorder(me.pageObj, me.canvas, getScreenDPI()) me.jpcOutput.drawToCanvas(me.pageObj, me.canvas, me.pageIdx, isHideSignature); } } domAddEventListener(canvas) { //点击事件 $("#rptCanvas").unbind('mousedown').on('mousedown', (e) => { this.mousedownFn(e, this) }); // $("#rptCanvas").unbind('mousemove').on('mousemove', (e) => { this.mouseMove(e, this) }); } // 临时签章移动事件(控制签章只能在报表中移动) templateSignatureMove(event, me) { // 表格大小 const size = me.jpcOutput.getReportSizeInPixel(me.pageObj, getScreenDPI()); const reportMarginTop= me.pageObj.打印页面_信息.页边距.Top * 96/2; const reportMarginBottom= me.pageObj.打印页面_信息.页边距.Bottom * 96/2; const { top, left } = $("#rptCanvas").position(); const signatureWidth = $("#templateSignature").width(); const signatureHeight = $("#templateSignature").height(); const maxTop = size[1] + top - signatureHeight + me.jpcOutput.offsetY - reportMarginBottom ; //签章的最大y坐标 const maxLeft = me.pageObj.MergeBand.Right + left - signatureWidth + me.jpcOutput.offsetX ; //签章的最大x坐标 const mousePos = me.getMousePos(event, me); let newTop = mousePos.y - me.subPos.y + top; let newLeft = mousePos.x - me.subPos.x + left; if ((mousePos.y - me.subPos.y) < reportMarginTop+top) newTop = reportMarginTop + top + me.jpcOutput.offsetY; if ((mousePos.x - me.subPos.x) < me.pageObj.MergeBand.Left) newLeft = me.pageObj.MergeBand.Left+left + me.jpcOutput.offsetX; if ((mousePos.y - me.subPos.y) > maxTop ) newTop = maxTop + me.jpcOutput.offsetY*2; if ((mousePos.x - me.subPos.x) > maxLeft - left) newLeft = maxLeft + me.jpcOutput.offsetX/2; event.currentTarget.style.top = `${newTop}px`; event.currentTarget.style.left = `${newLeft}px`; } // 临时签章点击事件 templateSignatureClick(event, me) { const canvasOuterTop = $("#rptCanvas").position().top; const canvasOuterLeft = $("#rptCanvas").position().left; const { top, left } = $(event.currentTarget).position(); me.activeImg.y = top - canvasOuterTop - this.jpcOutput.offsetY; me.activeImg.x = left - canvasOuterLeft - this.jpcOutput.offsetX; const curPage = zTreeOprObj.currentPage || 1; const orgTargetData = this.pageObj.items[curPage - 1].signature_cells.find(item => item.signature_name === $(event.currentTarget).data('id')); if (orgTargetData) { orgTargetData.isMoving = false; this.saveSignature(me); if (this.pageObj.items.length > 1) { for (let idx = 0; idx < this.pageObj.items.length; idx++) { const targetCell = this.pageObj.items[idx].signature_cells.find(item => item.signatureName === orgTargetData.signatureName && item.signType === orgTargetData.signType); if (targetCell) { targetCell.area.Left = orgTargetData.area.Left; targetCell.area.Right = orgTargetData.area.Right; targetCell.area.Top = orgTargetData.area.Top; targetCell.area.Bottom = orgTargetData.area.Bottom; } } } $("#templateSignature").remove(); } } }