时间戳

首页 > 解决方案 > 如何从 chrome 浏览器获取画布元素坐标

java - 如何从 chrome 浏览器获取画布元素坐标

问题描述

我确实尝试了许多 chrome 扩展，但似乎它是从窗口顶部计算坐标，而不是只考虑画布。

我在这个页面上：https ://gojs.net/latest/samples/grouping.html

想得到下面+按钮的坐标：

在此处输入图像描述

我实际上正在尝试使用 selenium 使用操作类单击该 + 按钮，我的代码是：

  driver.get("https://gojs.net/latest/samples/grouping.html");
        WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

            new Actions(driver)
                    .moveToElement(flowCanvas, 500, 200).click().perform();

因为我没有得到 + 按钮的确切坐标，所以上面的代码没有点击它。

标签： javaselenium-webdriverhtml5-canvasgojs

解决方案

我假设这些值是HTML 元素500, 200坐标系中的 (x,y) 点。flowCanvas那是对的吗？

首先，您需要访问您的应用程序为 HTMLDivElement 创建的Diagram对象，该对象包含 GoJS 用来显示图表和支持编辑的画布和其他元素。为此调用静态函数Diagram.fromDiv。例如：

var myDiagram = go.Diagram.fromDiv(theDivElement);

然后，您需要知道要单击其按钮的组的键。如果Group模板中的“SubGraphExpanderButton”有一个GraphObject.name并且您知道名称是什么，您可以执行以下操作：

var group = myDiagram.findNodeForKey(groupKey);
if (!group) return;
var button = group.findObject(buttonName);
if (!button) return;
var docpt = button.getDocumentPoint(go.Spot.Center);
var viewpt = myDiagram.transformDocToView(docpt);
new Actions(driver)
    .moveToElement(flowCanvas, viewpt.x, viewpt.y)
    .click()
    .perform();

这与机器人示例中演示的技术相同： https ://gojs.net/latest/extensions/Robot.html

嗯，您可能希望首先确保节点（或至少按钮）在视口内。首先调用Diagram.scrollToRect。

推荐阅读