Canvas within a scrollable browser window (grab position)

问题

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!

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/22073377/canvas-within-a-scrollable-browser-window-grab-position

标签

javascript

jquery

html

canvas

draw2d-js