java - 如何从 Chrome 浏览器获取 Canvas 元素坐标

Question

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

我在这个页面: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();

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

Answer 1

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

首先，您需要获取您的应用为 HTMLDivElement 创建的 Diagram 对象，该对象包含 Canvas 和 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

嗯，您可能需要首先确保节点(或至少按钮)位于视口(viewport)内。调用Diagram.scrollToRect 首先。