Calculation/app/public/report/js/rpt_move_signature.js

// 思路是点击签章的时候，原来的签章不显示，生成一个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 orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signatureName === target.signatureName && item.signType === target.signType);
            orgTargetData.isMoving = true;
            this.render(me);

            const { top, left } = $("#rptCanvas").position();
            $("#rptCanvas").after(`<div id='templateSignature' data-ID='${orgTargetData.signature_name}' style="background-image:url('${orgTargetData.path}');background-size: contain;cursor: move;position: absolute;top: ${y + top + 10}px;left:${x + left + 10}px;width:${width}px;height:${height}px;"/>`);
            $("#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.rel_content = ROLE_REL_LIST;
        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;
        // 因为只有一页，所以就默认取是一个数据
        for (const signature of me.pageObj.items[0].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 { top, left } = $("#rptCanvas").position();
        const canvasWidth = $("#rptCanvas").width();
        const canvasHeight = $("#rptCanvas").height();
        const signatureWidth = $("#templateSignature").width();
        const signatureHeight = $("#templateSignature").height();
        const maxTop = canvasHeight + top - signatureHeight; //签章的最大y坐标
        const maxLeft = canvasWidth + left - signatureWidth; //签章的最大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) < 0) newTop = top + me.jpcOutput.offsetY;
        if ((mousePos.x - me.subPos.x) < 0) newLeft = left + me.jpcOutput.offsetX;
        if ((mousePos.y - me.subPos.y) > maxTop - top) newTop = maxTop - me.jpcOutput.offsetXY;
        if ((mousePos.x - me.subPos.x) > maxLeft - left) newLeft = maxLeft - me.jpcOutput.offsetX;

        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 orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signature_name === $(event.currentTarget).data('id'));
        orgTargetData.isMoving = false;
        this.saveSignature(me);
        $("#templateSignature").remove();
    }
}