java - 使 JSVGScrollPane 内的 JSVGCanvas 与 SVGDocument 大小匹配

Question

我在图表应用程序中显示我的 SVG 绘图时遇到问题。 Canvas 采用其父组件的大小，而不是它包含的文档的大小。大于此大小的文档不会完全呈现。

案例

我有一幅画，例如，621x621 像素。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMaxYMax slice" version="1.0">
  <rect x="50" y="50" fill="white" width="20" height="20" stroke="black" stroke-width="1"/>
  <rect x="600" y="600" fill="blue" width="20" height="20" stroke="black" stroke-width="1"/>
</svg>

它没有 viewBox，因为它是动态创建的。当我创建文档时，我没有尺寸。

我在 JSVGScrollPane 中有一个 JSVGCanvas，滚动 Pane 的父级比文档小，比如说它的 500x500 像素。

预期行为

当您启动应用程序时，适合 500x500 的绘图部分是可见的。底层文档更大，所以有滚动条允许我向左和向下滚动 121 像素。

当你增加框架的大小时，越来越多的绘图变得可见。当您将其增加到大于 620x620px 时，滚动条可能会完全消失。

如果再次使面板小于文档，滚动条会重新出现。

遇到的行为

当您启动应用程序时，适合 500x500 的绘图部分是可见的。没有滚动条可见。

当您使面板变大时， Canvas 会增加(其背景颜色)但绘图不会扩展到初始 500x500px 之外的部分。

当您将面板缩小到 400x400 时，确实会出现滚动条，但只允许我滚动 100 像素。所以 Canvas 仍然是初始的 500x500 而不是所需的 621x621。

示例

可以使用 ScrollExample 重现遇到的行为在 Batik 存储库和我在上面添加的 SVG 文件上。该示例使用 500x500 像素的固定大小。

如果您要为 Canvas 和滚动 Pane 添加背景颜色，则整个框架都是蓝色的。因此，虽然 Canvas 确实增加了尺寸，但它不会绘制超出其初始尺寸的任何东西。

canvas.setBackground(Color.blue);
scroller.setBackground(Color.red);

我可以在调整面板大小时重置文档。这使得它重新绘制绘图的可见部分，但滚动仍然没有按预期工作，因为 Canvas 仍然只是可见部分的大小而不是文档的大小。您可以通过将此监听器添加到框架(或我想的任何其他面板)来对此进行测试。

class ResizeListener implements ComponentListener {

    JSVGCanvas canvas;
    URI url;

    public ResizeListener(JSVGCanvas c, URI u) {
        canvas = c;
        url = u;
    }

    @Override
    public void componentResized(ComponentEvent arg0) {
        canvas.setURI(url.toString());
        // Calling invalidate on canvas or scroller does not work
    }

    // ...
};

我读到过我应该有一个 viewBox，但是我的文档经常被重新创建(基于 modelchange-event)并且当我创建文档时，我不知道如何获取 viewBox。 SVGDocument.getRootElement().getBBox(); 通常给我 null。当没有给出 viewBox 时，Batik 代码中应该有回退，所以我希望这是可选的。此外，当我在某处平移时，如果我更改文档，它应该保持平移。

我希望我能把我的问题说清楚。当我期望 JSVG 类提供开箱即用的我想要的行为时，我是否期望太多，或者我在这里遗漏了什么？有人可以指导我找到解决方案吗？

Answer 1

我想我可能找到了解决方案。我需要设置文档的高度和宽度，而不是弄乱 viewBox。设置大小后，不需要 viewBox 并且滚动条按预期工作。如果我确实设置了一个 View 框， Canvas 会不断缩放图像以使其适合。

现在，为了更新大小，每当我更改可能影响大小的 dom 时，我都会使用它。

static BridgeContext ctx = new BridgeContext(new UserAgentAdapter());
static GVTBuilder builder = new GVTBuilder();

private static void calculateSize(SVGDocument doc) {
    GraphicsNode gvtRoot = builder.build(ctx, doc);

    Rectangle2D rect = gvtRoot.getSensitiveBounds();

    doc.getRootElement().setAttributeNS(null,
            SVGConstants.SVG_WIDTH_ATTRIBUTE, rect.getMaxX() + "");
    doc.getRootElement().setAttributeNS(null,
            SVGConstants.SVG_HEIGHT_ATTRIBUTE, rect.getMaxY() + "");
}

我在 UpdateManager 线程的之外 执行此操作，在修改 dom 之后，我使用 JSVGCanvas.setSVGDocument()。当我尝试通过 UpdateManager 执行此操作时，它只更新了第一个更改。正确初始化 updatequeue 可能会解决此问题，但由于我更改了很多文档，所以我每次都可以重新开始。

我还有一个小问题。每当我设置新文档时，滚动位置都会重置。我尝试在操作之前进行转换并在之后重新应用它，但这似乎不起作用。

编辑+:我设法通过替换文档的根节点而不是替换整个文档来解决这个小问题。 Canvas 设置为文档状态 ALWAYS_DYNAMIC。文档中的更改会立即应用，包括根节点的新大小(如上所述设置)。但是因为文档没有完全被替换，所以滚动状态被保留。

Canvas 仅在完成渲染文档后才准备好修改 dom。我使用 SVGLoad-listener 来检测这一点。

class Canvas extends JSVGCanvas implements SVGLoadEventDispatcherListener {

    public Canvas() {
        super();
        setDocumentState(ALWAYS_DYNAMIC);
        addSVGLoadEventDispatcherListener(this);
    }

    /**
     * Indicatates whether the canvas has finished its first render, the
     * canvas is now ready for modification of the dom
     */
    private boolean isReadyForModification = false;

    /**
     * Renew the document by replacing the root node with the one of the new
     * document
     * 
     * @param doc The new document
     */
    public void renewDocument(final SVGDocument doc) {

        if (isReadyForModification) {
            getUpdateManager().getUpdateRunnableQueue().invokeLater(
                    new Runnable() {
                        @Override
                        public void run() {
                            // Get the root tags of the documents
                            Node oldRoot = getSVGDocument().getFirstChild();
                            Node newRoot = doc.getFirstChild();

                            // Make the new node suitable for the old
                            // document
                            newRoot = getSVGDocument().importNode(newRoot,
                                    true);

                            // Replace the nodes
                            getSVGDocument().replaceChild(newRoot, oldRoot);
                        }
                    });
        } else {
            setSVGDocument(doc);
        }

    }

    @Override
    public void svgLoadEventDispatchCompleted(SVGLoadEventDispatcherEvent e) {
        isReadyForModification = true;
    }

    // ...
}