滚动 div ，当织物对象在画布中移动时

Question

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

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;
    }
});