Canvas within a scrollable browser window (grab position)

后端 未结 2 1619
忘掉有多难
忘掉有多难 2021-01-07 01:25

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 ar

相关标签:
2条回答
  • 2021-01-07 02:02

    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);
    
    0 讨论(0)
  • 2021-01-07 02:02

    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);"
    
    0 讨论(0)
提交回复
热议问题