CODEWITHSUNDEEP
javascriptjqueryhtmlcanvasfabricjs
Mohamed Uvais M
Mohamed Uvais M

Reputation: 305

Scroll the div , when the fabric object is moved with in the canvas

I'm having a canvas with-in a div. the height and width of the canvas is greater than the div. the div has a scroll bar. Now when the fabric-object(say a rectangle) inside the canvas moved outside the div-height or div-width, the scroll is not happening. can anyone tell how this can be done ?

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

Upvotes: 1

Views: 1442

Answers (1)

John M
John M

Reputation: 2600

try adding the following event handler. You should then be able to drag the rectangle around and see the container scroll automatically

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

Upvotes: 1

Related Questions