Question

我想在我的新中文字典中使用this javascript library，但是我在渲染方面遇到了问题。当我在普通网站上尝试示例代码时，它运行良好，但是当我在Android上的项目中尝试该示例代码时，它就坏了。您可以在图像中看到问题。我该如何解决这个问题？如果您能帮助我，我将不胜感激。谢谢。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script>
</head>
<body>
<div id="stroke"></div>
<script type="text/javascript">
    var writer = HanziWriter.create('stroke', '我', {
    width: 200,
    height: 200,
    padding: 5,
    showOutline: false
    });
    writer.animateCharacter();
</script>
</body>
</html>

MainActivity.kt

object ReadAsset {

    @Throws(IOException::class)
    public fun read(filePath: String?, context: Context): String {
        val sb = StringBuilder()
        val inputStream: InputStream = context.assets.open(filePath!!)
        val br = BufferedReader(InputStreamReader(inputStream, "UTF-8"))
        var str: String = br.readText()
        sb.append(str)
        br.close()
        return sb.toString()
    }
}

class MainActivity : AppCompatActivity() {
    @Suppress("DEPRECATION")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var myHtml: String = ""

        try {
            myHtml = ReadAsset.read("index.html", this)
        } catch (e: IOException) {
            e.printStackTrace()
        }
        
        val webView: WebView = this.findViewById(R.id.webView)
        webView.clearCache(true)
        webView.clearHistory()
        webView.settings.javaScriptEnabled = true
        webView.settings.javaScriptCanOpenWindowsAutomatically = true
        webView.settings.domStorageEnabled = true
        webView.settings.loadWithOverviewMode = true
        webView.settings.useWideViewPort = true
        webView.settings.builtInZoomControls = true
        webView.settings.displayZoomControls = true
        webView.settings.setSupportZoom(true)
        webView.settings.defaultTextEncodingName = "utf-8"
        webView.settings.pluginState = WebSettings.PluginState.ON
        webView.loadData(myHtml, "text/html", "UTF-8")
    }
}

Result image

如何解决有关Webview的渲染问题

0 个答案: