个人中心
gpt4 book ai didi

javascript - HTML5 Canvas 支持和 Android Webview

转载 作者：塔克拉玛干 更新时间：2023-11-03 00:12:56 29 4
gpt4 key购买 nike

我需要在我的应用程序中绘制图表。为此，我使用 RGraph (http://www.rgraph.net/)；它允许使用 Javascript 绘制交互式图表。我将我的 javascript 代码放在应用程序 Assets 中的 HTML 文档中，然后从 ViewPager 中的 fragment 调用它。

这是 HTML 和 javascript 代码:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<html>
<head>    
    <script src="./libraries/RGraph.common.core.js" ></script>
    <script src="./libraries/RGraph.common.dynamic.js" ></script>
    <script src="./libraries/RGraph.common.tooltips.js" ></script>
    <script src="./libraries/RGraph.common.effects.js" ></script>
    <script src="./libraries/RGraph.pie.js" ></script>
    </head>
<body background="../transparent.png"> 

    <canvas id="cvs" width="420" height="400">[No canvas support]</canvas>
           
    <script>
    
        function CreateGradient (obj, color)
        {
            return RGraph.RadialGradient(obj, 200, 150, 95, 200, 150, 125, color, color)
        }
        
        function isCanvasSupported(){
            var test_canvas = document.createElement("canvas");
            var canvascheck=(test_canvas.getContext) ? true : false ;           
          return canvascheck;
        }
        window.onload = function ()
        {
            if(isCanvasSupported)
               DrawPieChart();
            else
               document.write("hheheheheh");
        }
        
        
        function DrawPieChart ()
        {
                    var canvas = document.getElementById('cvs');
            var ctx = canvas.getContext('2d');
            var pie = new RGraph.Pie('cvs', [2,3,6,7,82]);
            pie.Set('chart.colors', [
                                     CreateGradient(pie, '#580600'),
                                     CreateGradient(pie, '#AEAEAE'),
                                     CreateGradient(pie, '#860100'),
                                     CreateGradient(pie, '#C7C7C7'),
                                     CreateGradient(pie, '#A70000')
                                    ]);
            pie.Set('chart.labels.sticks', true);
            pie.Set('chart.labels.sticks.length', 5);
            pie.Set('chart.tooltips', ['Autres',
            'Italie',
            'Royaume-Uni',
            'Espagne',
            'France']);
            pie.Set('chart.labels', ['2%','3%','6%','7%','82%']);
            pie.Set('chart.radius', 150);
            pie.Set('chart.shadow', true);
            pie.Set('chart.shadow.offsetx', 0);
            pie.Set('chart.shadow.offsety', 0);
            pie.Set('chart.shadow.blur', 25);
            pie.Draw();        
        }
    </script>
</body>
</html>

这是 fragment 的代码:

@Override
    public void onActivityCreated(Bundle savedInstanceState) {
        mWebView = (WebView)getActivity().findViewById(R.id.group_fragment_one_webView);
        mWebView.setFocusable(false);
        mWebView.loadUrl("file:///android_asset/graphs/graph1.html");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR);
        mWebView.getSettings().setDefaultFontSize(24);
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.setBackgroundColor(0);
        mWebView.setHorizontalScrollBarEnabled(false);
        mWebView.setVerticalScrollBarEnabled(false);
        mWebView.getSettings().setSupportZoom(false);
        mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);

        String TAG = "HTML 5";
        WebSettings ws = mWebView.getSettings();
        ws.setJavaScriptEnabled(true);
        ws.setAllowFileAccess(true);


        if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.ECLAIR) {
            try {
                Method m1 = WebSettings.class.getMethod("setDomStorageEnabled", new Class[]{Boolean.TYPE});
                m1.invoke(ws, Boolean.TRUE);

                Method m2 = WebSettings.class.getMethod("setDatabaseEnabled", new Class[]{Boolean.TYPE});
                m2.invoke(ws, Boolean.TRUE);

                Method m3 = WebSettings.class.getMethod("setDatabasePath", new Class[]{String.class});
                m3.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/databases/");

                Method m4 = WebSettings.class.getMethod("setAppCacheMaxSize", new Class[]{Long.TYPE});
                m4.invoke(ws, 1024*1024*8);

                Method m5 = WebSettings.class.getMethod("setAppCachePath", new Class[]{String.class});
                m5.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/cache/");

                Method m6 = WebSettings.class.getMethod("setAppCacheEnabled", new Class[]{Boolean.TYPE});
                m6.invoke(ws, Boolean.TRUE);

                Log.d(TAG, "Enabled HTML5-Features");
            }
            catch (NoSuchMethodException e) {
                Log.e(TAG, "Reflection fail", e);
            }
            catch (InvocationTargetException e) {
                Log.e(TAG, "Reflection fail", e);
            }
            catch (IllegalAccessException e) {
                Log.e(TAG, "Reflection fail", e);
            }

        }


        mTextView1 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview1);
        mTextView1.setText(getActivity().getResources().getString(R.string.group_fragment_one_text1));
        Spannable spanSize = new SpannableString(mTextView1.getText());
        spanSize.setSpan(new RelativeSizeSpan(2.0f),
                0,
                mTextView1.getText().toString().indexOf("millions"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        mTextView1.setText(spanSize);
        Spannable colorSpan = new SpannableString(mTextView1.getText());        
        colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),
                0,
                mTextView1.getText().toString().indexOf("millions"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTextView1.setText(colorSpan);
        mTextView1.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));


        mTextView2 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview2);
        mTextView2.setText(getActivity().getResources().getString(R.string.group_fragment_one_text2));
        spanSize = new SpannableString(mTextView2.getText());
        spanSize.setSpan(new RelativeSizeSpan(2.0f),
                0,
                mTextView2.getText().toString().indexOf("du chiffre"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        mTextView2.setText(spanSize);
        colorSpan = new SpannableString(mTextView2.getText());        
        colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),
                0,
                mTextView2.getText().toString().indexOf("du chiffre"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTextView2.setText(colorSpan);
        mTextView2.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));


        super.onActivityCreated(savedInstanceState);
    }

它在模拟器和 Eclipse 浏览器上运行良好...但是当我想在智能手机上看到它时，我遇到了 Canvas 的错误。有时图表会正确显示，有时会显示“不支持 Canvas ”。在ViewPager中，只有fragment n、fragment n-1和n+1被同时实例化。当用户在另一个 fragment 上滚动时，其他 fragment 被实例化。因此，每次用户滚动时，都会加载 HTML。有时支持 Canvas ，有时不支持...

我试图在 javascript 中获得对 Canvas 的支持，但它总是返回支持 Canvas ，但事实并非如此......

有什么想法吗？

最佳答案

尝试在 onResume() 方法上加载 webview:

@Override
public void onResume(){

    mWebView.loadUrl("file:///android_asset/graphs/graph1.html");
    super.onResume();

}

关于javascript - HTML5 Canvas 支持和 Android Webview，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12246113/

29 4 0
文章推荐： java - 已安装应用程序的执行次数
文章推荐： linux - 比较 2 个文件中的两列并使用 awk 替换另一列
文章推荐： c - 从另一个进程引用内存分配指针指向的元素时出现段错误
文章推荐： java - 无法使用 ASmack 发送或接收状态
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com