2013-05-16 129 views
3

我对WebView和SVG有问题。当我加载svg(带javascript)到WebView时,它随机扩展......在一台设备上绝对随机地放置在不同的设备和不同的屏幕方向上。我需要将SVG放在WebView中,并将其放大到WebView大小,静态并启用缩放。 A试过这个html:Android:在WebView中缩放SVG

<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; 
     } 
    } 
} 

回答

0

你可能会看到因设备而异的设备的像素比例的影响。

尝试将以下内容添加到HTML文件的标题中。

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

如果这不起作用,可能是您的SVG文件的写入方式有问题。 SVG如何在窗口中定位可以受到根元素的各种属性的影响。具体来说就是viewBox,width,height和preserveAspectRatio属性。

尝试修补它们。有关它们如何工作的更多信息可以在SVG规范中找到。

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

+0

这不工作:( – amak