radialMenu

非常易于设置的高度可定制的径向菜单。

看到它住在这里
替代链接

径向菜单（也称为派菜单）是一个循环上下文菜单，其中选择取决于方向。它是图形控制元素。 [Wikipedia]

为您的Web应用程序创建一个自定义且美丽的径向菜单，可以用作独立菜单或覆盖默认上下文菜单。在桌面或笔记本上，单击鼠标的第二个按钮（上下文菜单）。在智能手机或平板电脑上，单击屏幕并保持几秒钟，菜单将弹出。

正在进行中。编写文档并进行一些测试。

随意采用新样式并与公众分享。

让我们创建一个新的径向按钮，以便您可以看到它的简单性。您需要将radialMenu .js添加到您的Web应用程序中，然后创建一个新菜单。让我们看一下代码：

 < 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（按钮：按钮数组）有用。下面的示例：

 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 ( ) ;