在具有垂直滚动条的浏览器窗口中的画布中绘图时出现问题。
图形位于正确的位置,并且可以在画布周围抓取它并进行连接,但这只有在垂直滚动条(浏览器窗口)完全向上的情况下才有可能。
当窗口向下滚动时,节点无法再拖动,甚至光标在悬停节点时也不会更改。我发现向下滚动时可以拖动节点。不知何故,节点的"抓取区域"不会改变其位置,就好像该区域根据浏览器窗口具有固定位置一样。
我做错了什么?
obs.:不能发布图片:(,我没有足够的声誉。
提前感谢!
您基本上需要修改该代码以偏移页面滚动位置
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);
我在Draw2d的谷歌组中发布了同样的问题,并从框架开发人员Andreas Herz那里收到了以下答案。
"嗨
这是库中的小设计缺陷。
通常,可以"自动检测"div/canvas 的滚动位置。但我目前没有。
溶液:
任选其一:在 draw2d 中设置滚动容器。Canvas with the Method 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);"
Vinícius Oliveira的回答稍作修改对我有用:
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);
我使用了scrollLeft()和scrollTop()而不是getScrollLeft()和getScrollTop()。我也放了$(文档)而不是"这个"。