如何从 chrome 浏览器获取 canvas 元素坐标

Question

我确实尝试了很多 chrome 扩展，但似乎它是从 window 的顶部开始计算坐标，而不是只考虑 canvas.

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

想要获取下方 + 按钮的坐标：

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

  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) 点。对吗？

首先，您需要获取您的应用为包含 canvas(es) 的 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。

如何从 chrome 浏览器获取 canvas 元素坐标

How to get canvas element co-ordinates from chrome browser

java

selenium-webdriver

html5-canvas

gojs