Canvas within a scrollable browser window (grab position)

Question

I have an issue when drawing in a canvas within a browser window that has a vertical scrollbar.

The figures is at the correct position, and is possible to grab it around the canvas and make the connections, but this is only possible with the vertical scrollbar (of the browser window) fully up.

When the window is scrolled down, the nodes can't be dragged any more, and even the cursor doest change when its hovering the node. I figured out that its possible to drag the node when scrolled down. Somehow, the "grabbing area" of the node doesn't change its position, as if this area had a fixed position according to the browser window.

What I'm doing wrong?

obs.: Cant post images :(, I don't have enough reputation.

Thanks in advance!

You could post a link to a jsfiddle though =) – srquinn Feb 27 '14 at 15:48 — srquinn, Feb 27 '14 at 15:48

score 2 · Answer 1 · answered Feb 17 '16 at 11:32

You basically need to modify that code to offset page scroll position

canvas.fromDocumentToCanvasCoordinate = $.proxy(function(x, y) {
    return new draw2d.geo.Point(
            (x + window.pageXOffset - this.getAbsoluteX() + this.getScrollLeft())*this.zoomFactor,
            (y + window.pageYOffset - this.getAbsoluteY() + this.getScrollTop())*this.zoomFactor);
},canvas);

canvas.fromCanvasToDocumentCoordinate = $.proxy(function(x,y) {
    return new draw2d.geo.Point(
            ((x*(1/this.zoomFactor)) + this.getAbsoluteX() - this.getScrollLeft() - window.pageXOffset),
            ((y*(1/this.zoomFactor)) + this.getAbsoluteY() - this.getScrollTop() - window.pageYOffset));
},canvas);

score 1 · Accepted Answer · answered Mar 04 '14 at 01:13

I posted the same question in the google group of Draw2d and receive the following answer from the framework developer, Andreas Herz.
"Hi

this is small design flaw in the lib.

normaly it is possible to "autodetect" the scroll position of the div/canvas. But i didn't it currently.

Solution:

EITHER: set the scroll container in the draw2d.Canvas with the method Canvas#setScrollArea(DOMNode node)

OR: you calculate by your own if the first solution didn't work

var canvas = new draw2d.Canvas("domId");

canvas.fromDocumentToCanvasCoordinate = $.proxy(function(x, y) {
    return new draw2d.geo.Point(
            (x - this.getAbsoluteX() + this.getScrollLeft())*this.zoomFactor,
            (y - this.getAbsoluteY() + this.getScrollTop())*this.zoomFactor);
},canvas);


/**
 * @method
 * Transforms a canvas coordinate to document coordinate.
 * 
 * @param {Number} x the x coordinate in the canvas 
 * @param {Number} y the y coordinate in the canvas
 * 
 * @returns {draw2d.geo.Point} the coordinate in relation to the document [0,0] position
 */
canvas.fromCanvasToDocumentCoordinate = $.proxy(function(x,y) {
    return new draw2d.geo.Point(
            ((x*(1/this.zoomFactor)) + this.getAbsoluteX() - this.getScrollLeft()),
            ((y*(1/this.zoomFactor)) + this.getAbsoluteY() - this.getScrollTop()));
},canvas);"

still not work! Using last version (5.8.0) problem persists. — pepperav, Feb 05 '16 at 10:08

score 0 · Answer 3 · answered Aug 01 '22 at 15:03

slight modification of Vinícius Oliveira's answer worked for me:

canvas = new draw2d.Canvas("canvas_id");

canvas.fromDocumentToCanvasCoordinate = $.proxy(function(x, y) {
        return new draw2d.geo.Point(
                (x - this.getAbsoluteX() + $(document).scrollLeft())*this.zoomFactor,
                (y - this.getAbsoluteY() + $(document).scrollTop())*this.zoomFactor);
    },canvas);
canvas.fromCanvasToDocumentCoordinate = $.proxy(function(x,y) {
    return new draw2d.geo.Point(
            ((x*(1/this.zoomFactor)) + this.getAbsoluteX() - $(document).scrollLeft()),
            ((y*(1/this.zoomFactor)) + this.getAbsoluteY() - $(document).scrollTop()));
    },canvas);

I used scrollLeft() and scrollTop() instead of getScrollLeft() and getScrollTop(). Also I put $(document) instead of "this".

Canvas within a scrollable browser window (grab position)

3 Answers3