javascript - 如何在 C# Xamarin for WebView 中实例化 JavaScript 对象

Question

我正在尝试使用 winwheel.js，它是一个幸运轮，就像奖轮一样，我想在 Xamarin Android 中实例化和使用它，并将其显示在 WebView 中。

这是html中的目标代码

var theWheel = new Winwheel({
            "outerRadius"     : 180,        // Set outer radius so wheel fits inside the background.
            "innerRadius"     : 5,         // Make wheel hollow so segments don"t go all way to center.
            "textFontSize"    : 24,         // Set default font size for the segments.
            "textOrientation" : "vertical", // Make text vertial so goes down from the outside of wheel.
            "textAlignment"   : "outer", 
            "centerX"         : 175,
            "centerY"         : 185,                // Align text to outside of wheel.
            "numSegments"     : 2,         // Specify number of segments.
            "segments"        :             // Define segments including colour and text.
            [                               // font size and test colour overridden on backrupt segments.
               {
            "fillStyle" : "#eae56f",
            "text"      : "Data 1 (45%)",
            "size"      : 180,   // Note use of winwheelPercentToDegrees()
            "moreInfo"  : "<p>Data 1 is the biggest slice of the pie at 45% for this year!</p>"
        },
        {
            "fillStyle" : "#89f26e",
            "text"      : "Data 2 (20%)",
            "size"      : 180,
            "moreInfo"  : "<p>Data 2 is selling well making up 20% of our sales.</p>"
        }                ],
            "animation" :           // Specify the animation to use.
            {
                "type"     : "spinToStop",
                "duration" : 8,     // Duration in seconds.
                "spins"    : 3,     // Default number of complete spins.
                "callbackFinished" : alertPrize
            }
        });

我可以调用这个函数来让轮子旋转

function startSpin(stopAngle)
        {
            // Ensure that spinning can"t be clicked again while already running.
            if (wheelSpinning == false)
            {
                // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                // to rotate with the duration of the animation the quicker the wheel spins.
                if (wheelPower == 1)
                {
                    theWheel.animation.spins = 3;
                }
                else if (wheelPower == 2)
                {
                    theWheel.animation.spins = 6;
                }
                else if (wheelPower == 3)
                {
                    theWheel.animation.spins = 9;
                }


                // Begin the spin animation by calling startAnimation on the wheel object.
                // Begin the spin animation by calling startAnimation on the wheel object.
                //TheWheel.animation.stopAngle = 97;
                //var stopAt = (91 + Math.floor((Math.random() * 43)))

                theWheel.animation.stopAngle = stopAngle;                                        
                theWheel.startAnimation();

                // Set to true so that power can"t be changed and spin button re-enabled during
                // the current animation. The user will have to reset before spinning again.
                wheelSpinning = true;
            }
        }

我需要调整轮盘的参数，更改奖品段数并更改颜色和文本。

这是我设置 webview 的方式

webView = (WebView)FindViewById(Resource.Id.webView1);
        webView.Visibility = ViewStates.Invisible;

        webView.Settings.JavaScriptEnabled = true;

        webView.ClearCache(true);
        webView.LoadUrl(secret);

这就是我能够转动轮子的方式

webView.EvaluateJavascript(string.Format("startSpin({0})", 92), new 
JavascriptResult());

我不明白的是我最初是如何实例化轮子以便进行必要的修改的

请帮忙
标记

Answer 1

您可以在构造函数中设置参数并在您的应用程序中传递值。

function CreateWheel(outerRadius,innerRadius,textFontSize...)
{
  var theWheel = new Winwheel({
        "outerRadius"     : outerRadius,        // Set outer radius so wheel fits inside the background.
        "innerRadius"     : innerRadius,         // Make wheel hollow so segments don"t go all way to center.
        "textFontSize"    : textFontSize,         // Set default font size for the segments.
        "textOrientation" : "vertical", // Make text vertial so goes down from the outside of wheel.
        "textAlignment"   : "outer", 
        "centerX"         : 175,
        "centerY"         : 185,                // Align text to outside of wheel.
        "numSegments"     : 2,         // Specify number of segments.
        "segments"        :             // Define segments including colour and text.
        [                               // font size and test colour overridden on backrupt segments.
           {
        "fillStyle" : "#eae56f",
        "text"      : "Data 1 (45%)",
        "size"      : 180,   // Note use of winwheelPercentToDegrees()
        "moreInfo"  : "<p>Data 1 is the biggest slice of the pie at 45% for this year!</p>"
    },
    {
        "fillStyle" : "#89f26e",
        "text"      : "Data 2 (20%)",
        "size"      : 180,
        "moreInfo"  : "<p>Data 2 is selling well making up 20% of our sales.</p>"
    }                ],
        "animation" :           // Specify the animation to use.
        {
            "type"     : "spinToStop",
            "duration" : 8,     // Duration in seconds.
            "spins"    : 3,     // Default number of complete spins.
            "callbackFinished" : alertPrize
        }
    });
}

在你的项目中

webView.EvaluateJavascript("CreateWheel(150,5,24)",new JavascriptResult());