Android：在WebView中擴展SVG

Question

我有WebView和SVG的問題。 當我將svg（使用javascript）加載到WebView中時，它會隨機縮放。 絕對隨機地在一台設備上的不同設備和不同屏幕方向上。 我需要將SVG放在WebView中，使用fot到WebView大小，通信和啟用縮放。 試過這個html：

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<object type="image/svg+xml" data="AutomobileMain.svg" width="100%" height="100%" align="middle">
    <param name="src" value="AutomobileMain.svg" />
    <param name="wmode" value="transparent" />
</object>
</body>
</html>

它很可能在瀏覽器中工作，但在WebView中不起作用。

這里有一個代碼：

public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    mSchemeImageWebView = (WebView) inflater.inflate(
            R.layout.newremark_image, container, false);

    WebSettings webSettings = mSchemeImageWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setBuiltInZoomControls(true);
    webSettings.setSupportZoom(true);

    webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    webSettings.setAppCacheEnabled(false);

    mSchemeImageWebView.addJavascriptInterface(new IJavascriptHandler(),
            "android");

    mSchemeImageWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            prepareResizedToFit(mSchemeImageWebView);
        }

    });

    reloadWebView() ;

    return mSchemeImageWebView;
}

public void reloadWebView() {
    mSchemeImageWebView.loadUrl(getSchemePath()) ;
}

private void prepareResizedToFit(WebView webView) {
    webView.setInitialScale(scale(mSchemeImageWebView));
}

private int scale(View view) {
    int height = Math.round(view.getHeight()) ;
    int width = Math.round(view.getWidth()) ;
    Dimension parsedDimension ;
    try {
        parsedDimension = new SVGDimensionsParser().parse(getResources()
                .getAssets().open(getSchemeFileName())) ;
        double scaleXtoMax = width / parsedDimension.width ;
        double scaleYtoMax = height / parsedDimension.height ;
        double scale = Math.min( scaleXtoMax , scaleYtoMax ) ;
        return (int) ( scale * 100.0 ) ;
    } catch (Exception e) {
        return 100;
    }
}

private static class SVGDimensionsParser {
    public Dimension parse(InputStream in) throws XmlPullParserException,
            IOException {
        try {
            XmlPullParser parser = Xml.newPullParser();
            parser.setFeature(XmlPullParser.FEATURE_PROCESS_NAMESPACES,
                    false);
            parser.setInput(in, null);
            parser.nextTag();
            return readFeed(parser);
        } finally {
            in.close();
        }
    }

    private Dimension readFeed(XmlPullParser parser)
            throws XmlPullParserException, IOException {
        if (parser.getName().equals("svg")) {
            return new Dimension(
                    Double.parseDouble(parser.getAttributeValue(null,
                            "height").replaceAll("px", "")),
                    Double.parseDouble(parser.getAttributeValue(null,
                            "width").replaceAll("px", "")));
        } else {
            return null;
        }
    }
}

Answer 1

您可能會看到設備像素比率的影響因設備而異。

嘗試將以下內容添加到HTML文件的標題中。

<meta name="viewport" content="width=device-width, initial-scale=1">

如果這不起作用，則可能是您的SVG文件編寫方式有問題。 SVG在窗口中的位置可能會受到根<svg>元素的各種屬性的影響。 特別是viewBox，width，height和preserveAspectRatio屬性。

嘗試修補它們。 有關它們如何工作的更多信息可以在SVG規范中找到。

http://www.w3.org/TR/SVG/struct.html#SVGElement

Android：在WebView中擴展SVG

問題描述

1 個解決方案

解決方案1
0 2013-05-20 20:53:52

Android：在WebView中擴展SVG

問題描述

1 個解決方案

解決方案1 0 2013-05-20 20:53:52

解決方案1
0 2013-05-20 20:53:52