javascript - 可滚动浏览器窗口中的 Canvas (抓取位置)

标签 javascript jquery html canvas draw2d-js

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

图形位于正确的位置,并且可以在 Canvas 周围捕获它并建立连接,但这只有在(浏览器窗口的)垂直滚动条完全向上时才可能实现。

当窗口向下滚动时,节点不能再被拖动,甚至光标悬停在节点上时也不会发生变化。 我发现向下滚动时可以拖动节点。不知何故,节点的“抓取区域”并没有改变其位置,就好像该区域根据浏览器窗口具有固定位置一样。

我做错了什么?

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

关于javascript - 可滚动浏览器窗口中的 Canvas (抓取位置),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22073377/

相关文章:

javascript - 如果 Google Ajax API 不可用(因为 Google 不允许在本地安装它),最好的回退是什么?

javascript - 如何使用 Jest 测试 img.onload?

javascript - JQuery find() 可以选择忽略特定标签及其子标签

javascript - 使用 javascript 从其他网站获取数据

jquery - 如何平移/缩放 HTML 内容? (即谷歌地图、WordSquared)

jquery - 类似 YouTube 的进度条

javascript - 如何监听视频标签中的keydown事件?

php - 将 CSS 应用于 Joomla 模块中的类

javascript - 渲染子组件后的启动方法

html - IE6显示错误的背景图片