矩形框拖动的时候大小没有被限制

Question

为什么我这个矩形限制了大小还是能重合

正常是这样的

然后调整矩形框大小的时候限制最低为80像素吗 然后为什么拖动的时候还是这样

  initCanvas:function($canvas) {
            var that = this;
            var changeFunc = function (data) {
                //图形改变后保存到缓存参数 需根据具体的标定对数据进行转换
                that.ifDraw = false;
                if (data.dataRect) {
                    for (var i = 0; i < that.param.AREAMOSAIC[that.curChannel].AREA.length && i < data.dataRect.length; i++) {
                        data.dataRect[i].W = Math.max(80, data.dataRect[i].W);
                        data.dataRect[i].H = Math.max(80, data.dataRect[i].H);
                        if ((data.dataRect[i].X < 0) || (data.dataRect[i].Y < 0)) {
                            that.ifDraw = true;
                        }
                         console.log("i x y w h", i, data.dataRect[i].X, data.dataRect[i].X, data.dataRect[i].Y, data.dataRect[i].W, data.dataRect[i].H);
                         that.param.AREAMOSAIC[that.curChannel].AREA[i].X = (data.dataRect[i].X < 0) ? 0 : data.dataRect[i].X;
                         that.param.AREAMOSAIC[that.curChannel].AREA[i].Y = (data.dataRect[i].Y < 0) ? 0 : data.dataRect[i].Y;
                         that.param.AREAMOSAIC[that.curChannel].AREA[i].W = (data.dataRect[i].X < 0) ? (data.dataRect[i].W - Math.abs(data.dataRect[i].X)) : data.dataRect[i].W;
                         that.param.AREAMOSAIC[that.curChannel].AREA[i].H = (data.dataRect[i].Y < 0) ? (data.dataRect[i].H - Math.abs(data.dataRect[i].Y)) : data.dataRect[i].H;
                         if ((data.dataRect[i].X >= 0) && ((that.param.AREAMOSAIC[that.curChannel].AREA[i].W + data.dataRect[i].X) > 1280)) {
                            that.param.AREAMOSAIC[that.curChannel].AREA[i].W = 1280 - that.param.AREAMOSAIC[that.curChannel].AREA[i].X;
                            that.ifDraw = true;
                        }

                        if ((data.dataRect[i].Y >= 0) && ((that.param.AREAMOSAIC[that.curChannel].AREA[i].H + data.dataRect[i].Y) > 720)) {
                            that.param.AREAMOSAIC[that.curChannel].AREA[i].H = 720 - that.param.AREAMOSAIC[that.curChannel].AREA[i].Y;
                            that.ifDraw = true;
                        }

                        if ((data.dataRect[i].X < 0) && ((data.dataRect[i].W - that.param.AREAMOSAIC[that.curChannel].AREA[i].X) > 1280)) {
                            that.param.AREAMOSAIC[that.curChannel].AREA[i].W = 1280;
                        }

                        if ((data.dataRect[i].Y < 0) && ((data.dataRect[i].H - that.param.AREAMOSAIC[that.curChannel].AREA[i].Y) > 720)) {
                            that.param.AREAMOSAIC[that.curChannel].AREA[i].H = 720;
                        }
                    }

                    that.checkIfdeflectionOrMirror();
                }
            };

            var initData = {
                resWidth: 1280, //坐标真实分辨率 宽
                resHeight: 720, //坐标真实分辨率 高
                width: $canvas.width(),
                height: $canvas.height(),
                dataRect: [], //矩形数组
                pointLink: [
                    [0, 1],
                    [1, 2],
                    [2, 3],
                    [3, 4],
                ],
                image: "",
                onchange: changeFunc, //数据发生变更回调函数
                dragFloatPix: 5,
            };

            that.setCanvasData($canvas, initData, that.getMosaicNum());
        },

Answer 1

♥ 该回答参考ChatGPT，由吾为汝整理提供，如若有用，还请题主采纳！♥

在你的代码中，虽然你已经对矩形的宽度和高度进行了限制（最小为80像素），但可能在拖动时没有正确处理矩形的边界条件，导致矩形重叠或超出边界。以下是一些可能的原因和改进建议：

可能的问题

1. 边界检查不够严格：在拖动矩形时，可能没有充分检查矩形的边界，导致矩形可以重叠或超出画布的边界。
2. 更新逻辑不一致：在更新矩形的宽度和高度时，可能没有考虑到矩形的起始坐标（X, Y），导致计算错误。
3. 拖动事件处理：在处理拖动事件时，可能没有正确更新矩形的坐标和大小。

改进建议

1. 增加边界检查：在拖动矩形时，确保在更新坐标和大小之前，检查矩形是否会超出边界或重叠。

2. 更新逻辑：确保在更新矩形的宽度和高度时，始终考虑到矩形的起始坐标。

3. 示例代码：以下是一个改进的示例，展示如何在拖动时限制矩形的大小和位置：

initCanvas: function($canvas) {
    var that = this;
    var changeFunc = function(data) {
        that.ifDraw = false;
        if (data.dataRect) {
            for (var i = 0; i < that.param.AREAMOSAIC[that.curChannel].AREA.length && i < data.dataRect.length; i++) {
                // 限制宽度和高度
                data.dataRect[i].W = Math.max(80, data.dataRect[i].W);
                data.dataRect[i].H = Math.max(80, data.dataRect[i].H);

                // 更新坐标，确保不超出边界
                if (data.dataRect[i].X < 0) {
                    data.dataRect[i].X = 0;
                }
                if (data.dataRect[i].Y < 0) {
                    data.dataRect[i].Y = 0;
                }

                // 确保矩形不超出画布右下角
                if (data.dataRect[i].X + data.dataRect[i].W > 1280) {
                    data.dataRect[i].W = 1280 - data.dataRect[i].X;
                }
                if (data.dataRect[i].Y + data.dataRect[i].H > 720) {
                    data.dataRect[i].H = 720 - data.dataRect[i].Y;
                }

                // 更新参数
                that.param.AREAMOSAIC[that.curChannel].AREA[i].X = data.dataRect[i].X;
                that.param.AREAMOSAIC[that.curChannel].AREA[i].Y = data.dataRect[i].Y;
                that.param.AREAMOSAIC[that.curChannel].AREA[i].W = data.dataRect[i].W;
                that.param.AREAMOSAIC[that.curChannel].AREA[i].H = data.dataRect[i].H;

                // 检查是否需要重绘
                that.ifDraw = true;
            }

            that.checkIfdeflectionOrMirror();
        }
    };

    var initData = {
        resWidth: 1280,
        resHeight: 720,
        width: $canvas.width(),
        height: $canvas.height(),
        dataRect: [],
        pointLink: [
            [0, 1],
            [1, 2],
            [2, 3],
            [3, 4],
        ],
        image: "",
        onchange: changeFunc,
        dragFloatPix: 5,
    };

    that.setCanvasData($canvas, initData, that.getMosaicNum());
}

关键改动

• 在更新矩形的宽度和高度时，确保在计算时考虑到矩形的起始坐标。
• 在拖动时，确保矩形的右下角不会超出画布的边界。

通过这些改进，你应该能够限制矩形的大小和位置，避免重叠和超出边界的问题。