当织物对象在画布中移动时，滚动div 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; 
    } 
});