暂时解决了Android webview组件中显示SVG自适应屏幕问题

绘制的组态图形要在网页及Android显示,先将组态图转为SVG格式。因为在网页中显示和在Android中显示调用的是同一页面,在网页中显示能自适应父节点窗口大小(在IE7+,firefox,chome)都测试了,但在Android中,在我小米手机上(Android4.4,网上说4.4后用了chrome内核)也能自适应,就是在android模拟器(android4.2,说是用到webkit内核)中死活不能自适应。后来网上查了半天,最后给iframe设置了固定的宽高(android的屏幕分辨率后,像素为单位),不用原来写的’100%’就能自适应了(坑啊,注释部分就是原来的,死活不能在android 4.4以下自适应),在模拟器android3.0,android4.2测试没问题了,但android2.xwebview好像不支持SVG显示。

 

//网页部分,SvgFramePage.jsp

var svgFileName     = "";                     // SVG文件名

var framewidth          = 783;                  //传入的宽度,父窗口宽度,自适应宽

var frameheight         = 580;                  //传入的高度,父窗口高度,自适应高

var myInitInterval     = null;                 //svg文档延迟加载定时器

var gloParaArray       = null;                 //全局实时数据参数数组

var gloSvgDocument       = null;                 //svg文档对象

 

$(document).ready(

               function() {

                    svgFileName = "<%=request.getParameter("svgfile")%>";

                    framewidth = parseInt("<%=request.getParameter("framew")%>");

                    frameheight = parseInt("<%=request.getParameter("frameh")%>");

                   

                    createSvgTag("SvgFrame_Panel_Div");

               }

);

 

function createSvgTag(divid)

{

                 var basePath ="<%=basePath %>" + "svg/svggraph/" + svgFileName;

                 var html = "";

                

                 //var explorer = getExplorerType();

                 //if (explorer == "IE6" || explorer =="IE7" || explorer == "IE8")

                 //  html ="<embed src='" + basePath + "' id='SvgFrame_Panel_DivFrame'width='100%' height='100%' type='image/svg+xml'pluginspage='http://www.adobe.com/svg/viewer/install/'></embed>";

                 //else if (explorer == "android") html ="<iframe src='" + basePath + "' id='SvgFrame_Panel_DivFrame'width='100%' height='100%' frameborder='0' scrolling='yes'> </iframe>";

              //else html = "<iframe src='" + basePath +"' id='SvgFrame_Panel_DivFrame' width='100%' height='100%'  frameborder='0' scrolling='no'></iframe>";

             //$('#' + divid).html(html);

            

             var explorer = getExplorerType();

                 if (explorer == "IE6" ||explorer =="IE7" ||explorer =="IE8")

                     html = "<embed src='" + basePath + "'id='SvgFrame_Panel_DivFrame' width='100%' height='100%' type='image/svg+xml'pluginspage='http://www.adobe.com/svg/viewer/install/'> </embed>";

                 else if(explorer == "android") html = "<iframesrc='" + basePath + "' id='SvgFrame_Panel_DivFrame' width='"+ framewidth+ "'height='"+ frameheight+ "' frameborder='0' scrolling='no'></iframe>";

              else html = "<iframesrc='" + basePath + "' id='SvgFrame_Panel_DivFrame' width='100%'height='100%'  frameborder='0' scrolling='no'></iframe>";

             $('#' + divid).html(html);

}

     

<body style="width: 100%;height:100%;margin:0px;" οnlοad="pageLoaded()"οnunlοad="pageUnloaded()">

             <divid="SvgFrame_Panel_Div" style="width: 100%;height:100%;">

              </div>

 </body>

 

 

 

 

 

 

 

//android部分

webview = (WebView)findViewById(R.id.webViewSvg);

WebSettings webSettings = webview.getSettings();

webSettings.setJavaScriptEnabled(true);

webSettings.setDomStorageEnabled(true);

//设置可以访问文件

webSettings.setAllowFileAccess(true);

//设置支持缩放

webSettings.setBuiltInZoomControls(true);

webSettings.setSupportZoom(true);

webSettings.setUseWideViewPort(true); //可任意比例缩放

webSettings.setLoadWithOverviewMode(true);

                           

DisplayMetrics metrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(metrics);

int mDensity = metrics.densityDpi;

if (mDensity == 120) webSettings.setDefaultZoom(ZoomDensity.CLOSE);

else if (mDensity == 160) webSettings.setDefaultZoom(ZoomDensity.MEDIUM);

else if (mDensity == 240) webSettings.setDefaultZoom(ZoomDensity.FAR);

else webSettings.setDefaultZoom(ZoomDensity.FAR);

             

      

int screenwidth_dp   = XXOOCommon.getScreenWidth(this);

int screenheight_dp    = XXOOCommon.getScreenHeight(this);                

int screenwidth_px   = XXOOCommon.dip2px(this,XXOOCommon.getScreenWidth(this));

int screenheight_px    = XXOOCommon.dip2px(this,XXOOCommon.getScreenHeight(this));

      

             

//加载需要显示的网页

webview.loadUrl(HttpClientHelper.BasicUrl+"WebPage/Monitor/SvgFramePage.jsp?svgfile="+svgFileName + "&framew=" + screenwidth_px +"&frameh="+ screenheight_px);

             

//设置web视图

webview.setWebChromeClient(new myWebChromeClient());

webview.setWebViewClient(new myWebViewClient());




Android4.2模拟器中



IE7中




//home.svg文件如下,viewBox="0 0 1920 1080"为组态工具中文件大小

<?xmlversion="1.0" encoding="UTF-8" standalone="yes"?>

<?xml-stylesheettype="mystyle.css" href="text/css" ?>

<svg  x="0" y="0"width="1920"  height="1080" viewBox="0 0 1920 1080"preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

…..

</svg>



//SVG图形可能加载比较慢,在javascript提取SVG文件中实时数据参数时可能需要做延迟加载(因为我并没有在svg文件中做任何javascript操作)

//在网页中加载完成SVG图形后,需要做自适应(即将1920*1080的SVG图形缩放、、//至目标窗口大小,所以需要根据目标窗口大小改变SVG Tag 中 width 和height,//这样才能让整个SVG组态图形自适应目标窗口大小

//(在网页中传入了iframe父div大小,在android中传入了屏幕像素大小)

var  rootEle = gloSvgDocument.rootElement;

if (rootEle == null || rootEle == undefined) return;

rootEle.setAttribute("width", framewidth);

rootEle.setAttribute("height", frameheight);


发布了10 篇原创文章 · 获赞 4 · 访问量 2万+
展开阅读全文

Android导入svg显示不全的问题

08-21

在浏览器查看UI给出的svg图片是OK的,但导入AndroidStudio时问题出现了,如:带有文字的图片资源,文字都不显示,各种logo不显示,图片显示不全等等问题....... [下图是UI给的文件在浏览器中的样子](https://img-ask.csdn.net/upload/201808/21/1534852425_455790.png) [下图是UI给的svg文件code](https://img-ask.csdn.net/upload/201808/21/1534852517_274842.png) [下图是导入AS的图片样子](https://img-ask.csdn.net/upload/201808/21/1534852470_670447.png) 下图是导入AS后,生成的文件code ``` <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="346dp" android:height="97dp" android:viewportWidth="346" android:viewportHeight="97"> <path android:pathData="M6.148,0.498L339.148,0.498A6,6 0,0 1,345.148 6.498L345.148,90.498A6,6 0,0 1,339.148 96.498L6.148,96.498A6,6 0,0 1,0.148 90.498L0.148,6.498A6,6 0,0 1,6.148 0.498z" android:strokeWidth="1" android:fillColor="#39383B" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M339.148,207.498L6.148,207.498A6,6 0,0 1,0.148 201.498L0.148,6.498A6,6 0,0 1,6.148 0.498L339.148,0.498A6,6 0,0 1,345.148 6.498L345.148,201.498A6,6 0,0 1,339.148 207.498z" android:strokeWidth="1" android:fillColor="#9D0B0E" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M345.148,22.662C345.148,22.662 170.814,35.295 23.896,207.352L339.141,207.502C342.459,207.504 345.148,204.821 345.148,201.513L345.148,22.662Z" android:strokeWidth="1" android:fillColor="#8A0206" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M345.148,30.636C345.148,30.636 176.762,43.572 26.815,207.39L339.143,207.503C342.46,207.504 345.148,204.815 345.148,201.506L345.148,30.636Z" android:strokeWidth="1" android:fillColor="#C5161E" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M65.531,0.521C65.531,0.521 30.779,38.109 0.148,88.865L0.044,6.523C0.04,3.208 2.726,0.521 6.037,0.521L65.531,0.521Z" android:strokeWidth="1" android:fillColor="#6C0205" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M58.957,0.503C58.957,0.503 19.057,49.748 0.148,85.795L0.219,6.501C0.222,3.188 2.92,0.503 6.234,0.503L58.957,0.503Z" android:strokeWidth="1" android:fillColor="#7A0102" android:fillType="evenOdd" android:strokeColor="#00000000"/> </vector> ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览