Question

我正在为 Android 和 iOS 开发移动应用程序，以显示用户的活动图。要绘制图形，我使用的是Canvas和JavaScript。

由于图形使用JavaScript，因此我正在使用WebView呈现图形。

我之所以使用WebView和JavaScript，是因为我不必在iOS和Android中两次编写图形，而只需使用相同的代码即可。

在Android中，当我在WebView中渲染此图形时，与在任何桌面浏览器中进行的画布渲染相比，输出非常模糊且不清晰。我们在iOS中收到相同的结果。

以下是将WebView与Android结合使用时的输出：

以下是我的预期输出：

以下是我在Android中显示图形的代码。

main_activity.xml

<WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        />

在 MainActivity.java

中

webView =findViewById(R.id.webView);
        WebSettings webSetting = webView.getSettings();
        webSetting.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
        {
            webView.setLayerType(View.LAYER_TYPE_HARDWARE,null);
        }
        webView.setBackgroundColor(0xFFFFFFFF);
        webView.loadUrl("file:///android_asset/graph.html");

我们已将 graph.html 文件放入资产文件夹中。

graph.html

此文件使用 graphlib.js 文件中定义的 DrawChart（）方法。此 graphlib.js 文件包含用于在画布中绘制数据的代码。

<!DOCTYPE html>
<html>

<body>
  <script src="./jquery-3.3.1.js"></script>
  <script src="./graphlib.js"></script>
  <div id="dvGraphData"></div>

  <script>
    var oWebViewInterface = window.nsWebViewInterface;
    var result2;

    oWebViewInterface.on('resultData', function (e) 
    DrawChart(e.Data);
    });

    DrawChart = function (result2) {
      var Linewidth = 3;
      var IsDrwaXaxis = true;
      var showMinorGridLine = false;
      var minorGridLineXaxis = null;
      var markerSize = 6; // 
      var skipStep = 0;

       datalength=result2.length;
       if (datalength > 15) {
        skipStep = (datalength / 15) >= 1 ? parseInt(datalength / 15) : 0;
        IsDrwaXaxis = false;
        Linewidth = 2;
        markerSize = 4;
      }


      $("#dvGraphData").drawChart({
        data: result2,
        chart: {
          chartType: "line",
          LineProperty: [{
            lineColor: "#fff",
            lineThickness: Linewidth,
            drawLine: true,
            drawPoint: true,
            pointColorField: "MarkerColorWeight",
            pointSize: markerSize,
            pointType: "circle",
            YpropertyName: "Distance",//compare y axis data
            XpropertyName: null,//compare x axis data
            lineLegend: 'Distance',
            showLineLegend: true
          }],


          showVerticalGrid: IsDrwaXaxis,
          showMinorGridLine: showMinorGridLine,
          minorGridLineXaxis: minorGridLineXaxis,
          yIndicator: [result2[0].distanceIndicators]
        },
        MinRange: result2[0].DistanceStartValue,
        MaxRange: result2[0].DistanceEndValue,
        gap: result2[0].GapValue,
        stepSkip:skipStep,
        XLineValues: [{
          field: "MeasurementDateString", labels: {
            Color: "#fff"
          }
        }
        ],
        canvasHeight: 300
      });
    }
  </script>
<body>

graphlib.js

"use strict";
(function ($) {
    //Global Variable
    var markerTypes = ["circle", "square"]
    var innerPaddingLeft = 30;
    var innerPaddingTop = 10;
    var innerPaddingRight = 10;
    var innerPaddingBottom = 30;

    $.fn.drawChart = function (options) {
        return this.each(function () {
            var graphSettings = $.extend({}, $.fn.drawChart.defaults, options);
            $(this).html("");
            graphSettings.currentElement = $(this);
            if (graphSettings.canvasWidth == null && graphSettings.canvasWidth == undefined) {
                graphSettings.canvasWidth = $(this).parent().width();
                if (graphSettings.canvasWidth <= 0) {
                    graphSettings.canvasWidth = 274;
                }
            }

            //if graphSettings.YLegendLabel has value the reset canvasWidth of canvas graphSettings.canvasWidth-35
            if (graphSettings.YLegendLabel != null && graphSettings.YLegendLabel != undefined) {
                graphSettings.canvasWidth = graphSettings.canvasWidth - 35;
            }
            else {
                if (graphSettings.backgroundcolor != null && graphSettings.backgroundcolor != undefined) {
                    $(this).attr("style", "position: relative;padding-left:35px;float:left;width:100%;background-color:" + graphSettings.backgroundcolor + "");
                }
            }

            //add canvas
            addCanvas(this, graphSettings);

            //Intilize graph comman property
            init(this, graphSettings);

            //base x and y line drawing
            drawBaseAxisLines(graphSettings);

            //axis label ploating
            plotAxisLabels(graphSettings);

            //Draw minor grid line
            drawMinorGridLine(graphSettings);

            //Draw grid line
            drawGridLines(graphSettings);

            //Add yIndicator
            if (graphSettings.chart.yIndicator != undefined && graphSettings.chart.yIndicator != null) {
                drawIndicators(graphSettings);
            }

            //********************************************************************************Code for drawing chart Start************************************************************
            if (graphSettings.chart.chartType == 'line') {
                drawLineChart(graphSettings);
            }
            else if (graphSettings.chart.chartType == 'bar') {
                drawBarChart(canvas);
            }
            //********************************************************************************Code for drawing chart End************************************************************

            //Add x legend on x axis
            if (graphSettings.showXLegend == true) {
                var xlegendshtml = "<div style='text-align:center;'>";
                xlegendshtml += "<div style='display:inline-block;'>";
                for (var i = 0; i < graphSettings.xLegends.length; i++) {
                    xlegendshtml += "<span style='display:block; float:left; height:12px; width:12px; position:relative; top:3px; background:" + graphSettings.xLegends[i].color + "; border:1px solid #ffffff;'></span>";
                    xlegendshtml += "<span style='display:block; float:left; margin-left:3px; margin-right:8px; font-size:14px; color:" + graphSettings.color + ";'>" + graphSettings.xLegends[i].legendsName + "</span>";
                }
                xlegendshtml += "</div>";
                xlegendshtml += "</div>";
                $(this).append(xlegendshtml);
            }
        });
    }
// method implementation
}

有人遇到相同的问题并找到解决该问题的方法吗？

提前谢谢.. !!

问题：WebView中的画布图模糊

0 个答案: