可滚动浏览器窗口中的画布（抓取位置）答案

【问题标题】：Canvas within a scrollable browser window (grab position)可滚动浏览器窗口中的画布（抓取位置）
【发布时间】：2014-02-27 15:44:53
【问题描述】：

在具有垂直滚动条的浏览器窗口中的画布中绘图时遇到问题。

图形位于正确的位置，并且可以在画布周围抓住它并建立连接，但这只有在（浏览器窗口的）垂直滚动条完全向上时才能实现。

当窗口向下滚动时，节点不能再被拖动，即使光标悬停在节点上时也不会改变。我发现向下滚动时可以拖动节点。不知何故，节点的“抓取区域”并没有改变它的位置，就好像这个区域根据浏览器窗口有一个固定的位置。

我做错了什么？

obs.: 无法发布图片 :(，我没有足够的声誉。

提前致谢！

【问题讨论】：

你可以发布一个 jsfiddle 的链接 =)

标签： javascript jquery html canvas draw2d-js

【解决方案1】：

您基本上需要修改该代码以偏移页面滚动位置

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

【讨论】：

【解决方案2】：

我在 Draw2d 的 google 小组中发布了相同的问题，并从框架开发人员 Andreas Herz 那里得到了以下答案。
“你好

这是库中的小设计缺陷。

通常可以“自动检测” div/canvas 的滚动位置。但我现在没有。

解决方案：

或者：在draw2d.Canvas中设置滚动容器，方法是Canvas#setScrollArea(DOMNode node)

或者：如果第一个解决方案不起作用，您自己计算

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

【讨论】：

还是不行！使用最新版本 (5.8.0) 问题仍然存在。