径向菜单
非常易于设置的高度可定制的径向菜单。
看到它住在这里
替代链接
关于
径向菜单（也称为派菜单）是一个循环上下文菜单，其中选择取决于方向。它是图形控制元素。 [Wikipedia]
为您的Web应用程序创建一个自定义且美丽的径向菜单，可以用作独立菜单或覆盖默认上下文菜单。在桌面或笔记本上，单击鼠标的第二个按钮（上下文菜单）。在智能手机或平板电脑上，单击屏幕并保持几秒钟，菜单将弹出。
正在进行中。编写文档并进行一些测试。
随意采用新样式并与公众分享。
文档
让我们创建一个新的径向按钮，以便您可以看到它的简单性。您需要将radialMenu .js添加到您的Web应用程序中，然后创建一个新菜单。让我们看一下代码：
radialMenu .min.js";
const radial = new radialMenu ();
</script>\”>
< script type =\" module \" > import radialMenu from \"./build/ radialMenu .min.js\" ; const radial = new radialMenu ( ) ; </ script >
由于最后一个PR，您现在可以使用脚本作为模块使用导入radialMenu 。
就是这样。该库包含一些默认按钮作为示例，因此您可以查看其工作原理。让我们继续阅读文档，以便我们可以学习如何使用自己的按钮创建自己的径向菜单。
要在Web应用中创建径向菜单，您需要将配置对象传递给构造函数。默认情况下，已经设置了很多值，但是您可以使用每个值。让我们谈谈每个人。
const mySettings = {
textColor : \'red\' , //define the color of the text on the buttons
buttons : [
{ \'text\' : \'\\uf053\' , \'action\' : ( ) => { history . go ( - 1 ) } } , //create a button that goes back on history
{ \'text\' : \'\\uf054\' , \'action\' : ( ) => { history . go ( 1 ) } } , //create a button tha goes forward on history
]
} ;
const radial = new radialMenu ( mySettings ) ;
fontfamily ：字符串
要使用字体的名称。在此示例上，“ fontawesome”被用于免费图标。但是您可以使用自己的字体。
默认： “ fontawesome”
fontsize ：int
按钮上使用的图标（文本）的大小。
默认值： 14
nirncircle ：int
径向菜单的内圈。如果您不想在菜单中有一个孔，请使用0（零）。
默认值： 50
外圈：int
径向菜单的外圈。外圈和内圆将定义菜单的厚度。
默认值： 100
nirncircle = 0，outercircle = 100
NINDCIRCLE = 50，outercircle = 100
旋转：int
如果您想更好地“对齐”按钮的分区，则此值会旋转菜单的整个“圆”。此值是在弧度中，并且总是明智地旋转菜单时钟。默认值： pi/2（90º）
不旋转
旋转
Shadowblur ：int
阴影有多模糊。
默认值： 10
ShadowColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
阴影颜色。
默认值： rgba（0,0,0,0.2）黑色与alpha
ShadowOffSetx ：int
阴影的水平位移。
默认值： 3
Shadowoffsety ：int
阴影的垂直位移。
默认值： 3
Buttongap ：int
按钮之间的差距。这个价值在弧度中。
默认值： 0
HoverbackgroundColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多信息）
悬停时的背景颜色。
默认值： null
HoverTextColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请阅读更多）
悬停时的文字颜色。
默认值： null
悬浮函数（布尔值：Ishover）：无效
是悬停状态变化时调用的函数。
默认值：无
您可以单独编辑每个按钮，也可以一次为其设置所有按钮。
背景色：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
按钮的背景颜色。
默认值： #eee Gray
BorderColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
按钮的边框颜色。
默认值： #fff White
TextColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
按钮内文本的颜色。
默认值： ＃000黑色
TextBorderColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
按钮内文本轮廓的颜色。
默认： “透明”
TextShadowColor ：颜色（RGB，RGBA，十六进制）或梯度对象（请参阅下面的更多）
文本阴影的颜色。
默认： “透明”
textshadowblur ：int
文本的阴影有多模糊。
默认值： 0
TextShadowOffSetx ：int
文本阴影的水平位移。
默认值： 0
TextShadowOffSety ：int
文本阴影的垂直位移。
默认值： 0
POSX ：int
菜单的水平位置。仅当菜单在页面上固定时才使用此值。
默认值： 0
Posy ：int
菜单的垂直位置。仅当菜单在页面上固定时才使用此值。
默认值： 0
iSfixed ：布尔值
此值确定菜单是否将在页面上修复。如果您正在制作需要一个始终可见的菜单的Web应用程序，这很有用。
默认值： false
Zindex ：int
此值确定菜单将显示在页面上的顺序。较高的值意味着它位于值较低的元素的前面。
默认值： 9999
按钮：阵列（按钮对象）
您应该将带有按钮对象的数组传递。按钮对象是一个简单的对象，只有两个属性：文本和操作。
文本是将要显示的图标。有关每个图标'\\ uf000'的unicode，请参见字体 – 访问者.html
动作是单击按钮时将调用的函数。
除此之外，您还可以将所有上述设置传递到按钮对象内的所有上述设置，但是这样，设置仅适用于该特定按钮。看看下面的示例。一个按钮将具有默认的颜色（黑色），另一个按钮将具有文本的红色。
const ok = function ( ) {
alert ( \'ok\' ) ;
}
const nok = function ( ) {
alert ( \'not ok\' ) ;
}
const myButtons = [
{ text : \'\\uf00c\' , action : ok } ,
{ text : \'\\uf001\' , action : nok , textColor : \'red\' } //you can set values for the button individually
] ;
const radial = new radialMenu ( { buttons : myButtons } ) ;
梯度对象每个颜色设置都可能是渐变。为了创建梯度，您需要传递具有梯度类型和一些颜色的通用对象。让我们看一下下面的示例：
const gradient = { gradient : \'radial\' , colors : { 0 : \'black\' , 1 : \'white\' } } ;
const menu = new radialMenu ( { backgroundColor : gradient } )
“颜色”内部的索引键将定义颜色从哪里开始和结束的位置。 0是开始，1是末端，两者之间的一切都是步骤。您可以根据自己的意愿添加尽可能多的颜色。让我们看看下面的示例中如何添加更多颜色：
const gradient = { gradient : \'radial\' , colors : { 0 : \'red\' , 0.25 : \'green\' , 0.5 : \'yellow\' , 0.75 : \'blue\' , 1 : \'orange\' } } ;
const menu = new radialMenu ( { backgroundColor : gradient } )
这意味着梯度将以红色开头，沿途25％，它将变为绿色，在变成黄色后50％，蓝色为75％，最终将以橙色结束。这些步骤表示颜色变化的发生（百分比）。
梯度对象可以具有以下值之一：radial，linear1，linear2，linear3和linear4。让我们看一下它们。
径向 –从内部到外面
线性1-上到底
线性2-从左到右
线性3-从左上到底部向右
线性4-左下到右上
如果您想要从黑色到白色的渐变为黑色和1个白色的梯度，如果您想要白色至黑色梯度，请倒转颜色：设置0至白色，1至黑色。
您可以在此处查看我创建的一些样式
方法
radialMenu类还提供了一些辅助方法，因此您可以将菜单用作独立菜单（例如Web游戏的Joypad）。
show（）显示菜单。
hide（）隐藏菜单。
setPos（x：int，y：int）设置菜单的X和Y位置。
如果要从JSON文件加载样式并稍后添加按钮，则ADDBUTTONS（按钮：按钮数组）有用。下面的示例：
radialMenu(data);
menu.addButtons([
{text: \’\\uf000\’, action: ()=>{ /*your code here*/ } },
{text: \’\\uf001\’, action: ()=>{ /*your code here*/ } },
]);
}
load();\”>
const load = async function ( ) { const request = await fetch ( \'styles/orange.json\' ) ; const data = await request . json ( ) ; const menu = new radialMenu ( data ) ; menu . addButtons ( [ { text : \'\\uf000\' , action : ( ) => { /*your code here*/ } } , { text : \'\\uf001\' , action : ( ) => { /*your code here*/ } } , ] ) ; } load ( ) ;
