我正在尝试使用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;
}
}
我需要调整轮盘的参数,改变奖品段的数量,并改变颜色和文本。
这就是我设置 Web 视图的方式
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());
我不明白的是我最初如何实例化轮子,以便我可以进行必要的修改
请帮忙
马克
可以在构造函数中设置参数,并在应用程序中传递值。
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());