可滚动浏览器窗口中的画布(抓取位置) [英] 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.

我做错了什么?

obs .:不能张贴图片:(，我的信誉不够.

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

提前谢谢！

推荐答案

我在Draw2d的google组中发布了相同的问题，并从框架开发人员Andreas Herz收到以下答复.
嗨

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.

通常可以自动检测" div/画布的滚动位置.但是我目前没有.

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

解决方案:

EITHER:使用canvas#setScrollArea(DOMNode node)方法在draw2d.Canvas中设置滚动容器

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

OR:如果第一个解决方案不起作用，您可以自己计算

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

这篇关于可滚动浏览器窗口中的画布(抓取位置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！