javascript - 当布料对象在 Canvas 中移动时滚动 div

Question

我在 div 中有一个 Canvas 。 canvas的高度和宽度大于div。 div 有一个滚动条。现在，当 Canvas 内的结构对象(例如矩形)移动到 div 高度或 div 宽度之外时，滚动不会发生。谁能告诉我如何做到这一点？

JavaScript:

$( document ).ready(function() {
    var canvas = new fabric.Canvas('drawSurface2');

    var labeledRect = new fabric.Rect({
        strokeWidth: 1,
        stroke: 'blue',
        width: 200,
        height: 100,
        fill: 'transparent',
        transparentCorners: false,
        rx:10,
        ry:10,
        left: 100,
        top: 100,
        label: 'region',
        strokeDashArray: [3]
    });

    canvas.add(labeledRect);
});

HTML:

<div id="leftDiv2" class="leftDivClass" style="margin-top: 25px;display: inline-block;width: 800px;">
<canvas id="drawSurface2" width="1800" height="1800" class='drawSurface2Class'></canvas>

CSS:

.drawSurface2Class {
    border: 5px solid #33ff33;
}

.leftDivClass {
    float: left;
    margin-left: 30px;
    border: 1px solid #000000;
    width: 660px;
    height: 450px;
    background-size: 10px 10px;
    background-image: linear-gradient(to right, #e6e6e6 1px, transparent 1px), linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
    overflow:scroll;
}

Answer 1

尝试添加以下事件处理程序。然后，您应该能够拖动矩形并看到容器自动滚动

canvas.on('object:moving', function (options) {
    var currentScrollLeft = $('#leftDiv2')[0].scrollLeft;
    var currentScrollTop = $('#leftDiv2')[0].scrollTop;
    if (currentScrollLeft > options.target.left) {
        $('#leftDiv2')[0].scrollLeft = options.target.left;
    }
    if (currentScrollTop > options.target.top) {
        $('#leftDiv2')[0].scrollTop = options.target.top;
    }
    var minScrollLeft = (options.target.left + options.target.width) - 660;
    if (currentScrollLeft < minScrollLeft) {
        $('#leftDiv2')[0].scrollLeft = minScrollLeft;
    }
    var minScrollTop = (options.target.top + options.target.height) - 450;
    if (currentScrollTop < minScrollTop) {
        $('#leftDiv2')[0].scrollTop = minScrollTop;
    }
});