ファブリックオブジェクトがキャンバス内で移動されたときに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; 
    } 
});