spin wheel下载 - spin wheel源码下载

spin wheel

其他源码

5.0.2

下载

旋转轮

一个易于使用的主题组件，用于随机选择和奖品。

特征

普通 JavaScript (ES6)。
没有依赖性。
简单、易于使用的 API。
通过应用动量和拖动来旋转，或通过缓动将动画设置为特定角度。
可通过单击拖动或触摸轻拂进行交互。
响应式布局（自动调整大小以适合其容器）。
轻松主题化：
- 赋予物品自己的颜色和重量。
- 旋转标签并更改对齐方式。
- 在物品、轮子和前景上绘制图像。
- 应用重复的颜色集。
onSpin和onCurrentIndexChange等事件的回调。
顺时针和逆时针旋转。

示例

基本环境管理
基本IIFE
基本的视图
旋转至特定项目
多轮
主题
Playground（用于测试和故障排除）

安装

环境管理署

 import { Wheel } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/spin-wheel-esm.js' ;

国际教育学院

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/spin-wheel-iife.js " > </ script >

当地的

npm install spin-wheel

如何制作自己的轮子

 // 1. Configure the wheel's properties:
const props = {
  items : [
    {
      label : 'one' ,
    } ,
    {
      label : 'two' ,
    } ,
    {
      label : 'three' ,
    } ,
  ]
}

// 2. Decide where you want it to go:
const container = document . querySelector ( '.wheel-container' ) ;

// 3. Create the wheel in the container and initialise it with the props:
const wheel = new Wheel ( container , props ) ;

如何转动轮子

对于多人游戏或授予具有实际价值的奖品，最好的方法是调用Wheel.spinToItem() 。轮子会旋转一定的时间，完成后指针将指向指定的项目。您应该始终在后端计算获胜项目，例如：

 const winningItemIndex = await fetchWinningItemIndex ( ) ;
const duration = 4000 ;
const easing = easing . cubicOut ;
wheel . spinToItem ( winningItemIndex , duration , true , 2 , 1 , easing )

如果精度不重要，您可以使用Wheel.spin()立即开始以一定速度旋转轮子，该速度将根据Wheel.rotationResistance随着时间的推移而减小。您还可以设置Wheel.isInteractive = true以允许用户通过拖动或轻拂自行旋转滚轮。

如何绘制指针

滚轮没有内置指针，而是您设置Wheel.pointerAngle并自己绘制指针。这是因为您可能希望指针以多种方式显示和表现，例如您可能希望为其设置动画。

绘制指针的选项有：

使用Wheel.overlayImage叠加图像
使用 DOM 覆盖某些内容

图像和字体

图像作为HTMLImageElement的实例传递，并且应该预先加载，否则浏览器下载它们时会出现初始延迟（或闪烁）。出于同样的原因，也应该预加载字体。有关如何预加载图像和字体的示例，请参阅主题示例背后的代码。

配置

一切都很容易配置。滚轮具有响应能力，并会自动调整大小以适应其容器，因此当容器的大小发生变化时，您不必担心更新宽度和字体大小等繁琐的事情。因此，某些数字属性以百分比表示，而另一些则以像素表示。

百分比属性是容器大小的百分比。例如， Wheel.radius为0.9表示轮子将填充容器的90% 。
像素属性与500px的容器大小相关。例如，当容器大小为500px时， Wheel.LineWidth为1将恰好为1px 。

标签的配置也很简单，因为字体大小是自动计算的。您可以选择设置Wheel.itemLabelFontSizeMax （以像素为单位），但否则最大项目标签的大小将调整为介于Wheel.itemLabelRadius （百分比）和Wheel.itemLabelRadiusMax （百分比）之间。

这是一个方便的图表：

`Wheel`的方法

方法	描述
`constructor(container, props = {})`	在容器 Element 内创建轮子并使用 props 对其进行初始化。 `container`必须是一个元素。 `props`必须是对象或 null。
`init(props = {})`	初始化所有属性。如果未为属性提供值，则会为其指定默认值。
`resize()`	[旧版] 重新计算并重新绘制轮子。仅在不支持 ResizeObserver 的旧版浏览器的某些情况下需要。
`remove()`	从 DOM 中移除轮子并取消注册事件处理程序。
`spin(rotationSpeed = 0)`	通过设置`rotationSpeed`来旋转轮子。轮子将立即开始旋转，并随着时间的推移减慢速度，具体取决于`rotationResistance`的值。正数将顺时针旋转，负数将逆时针旋转。
`spinTo(rotation = 0, duration = 0, easingFunction = null)`	将轮子旋转到特定的旋转。动画将在提供的持续`duration` （毫秒）内发生。可以通过提供可选的`easingFunction`来调整动画，该函数接受单个参数 n，其中 n 介于 0 和 1 之间（包含 0 和 1）。如果未提供缓动函数，则将使用默认的 escapeSinOut。例如缓动函数请参阅 easing-utils。
`spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, direction = 1, easingFunction = null)`	将轮盘旋转到特定项目。动画将在提供的持续`duration` （毫秒）内发生。如果`spinToCenter`为 true，则滚轮将旋转到项目的中心，否则滚轮将旋转到项目内部的随机角度。 `numberOfRevolutions`控制轮子在停在物品上之前旋转完整 360 度的次数。 `direction`可以是`1` （顺时针）或`-1` （逆时针）可以通过提供可选的`easingFunction`来调整动画，该函数接受单个参数 n，其中 n 介于 0 和 1 之间（包含 0 和 1）。如果未提供缓动函数，则将使用默认的 escapeSinOut。例如缓动函数请参阅 easing-utils。
`stop()`	立即停止车轮旋转，无论使用哪种方法使其旋转。
`getCurrentIndex()`	获取指针所指向的项目的索引。如果`pointerAngle`位于其起始角度（包含）和结束角度（不包含）之间，则该项目被视为“当前”。

`Wheel`的属性

注意：将属性设置为undefined会将其重置为默认值。

姓名	默认值	描述
`borderColor`	`'#000'`	车轮圆周线的 CSS 颜色。
`borderWidth`	`0`	围绕车轮圆周的线的宽度（以像素为单位）。
`debug`	`false`	是否会显示调试信息。这在定位标签时很有帮助。
`image`	`null`	在滚轮上绘制并随滚轮旋转的 HTMLImageElement。它将居中并缩放以适合`Wheel.radius` 。
`isInteractive`	`true`	是否允许用户使用单击拖动/触摸轻拂来旋转滚轮。用户交互只会在`Wheel.radius`的范围内被检测到。
`itemBackgroundColors`	`['#fff']`	用作所有项目背景颜色的重复模式的 CSS 颜色。被`Item.backgroundColor`覆盖。示例： `['#fff','#000']` 。
`itemLabelAlign`	`'right'`	所有项目标签的对齐方式。可能的值： `'left'` 、 `'center'` 、 `'right'` 。
`itemLabelBaselineOffset`	`0`	所有项目标签的基线（或行高）的偏移量（以标签高度的百分比表示）。
`itemLabelColors`	`['#000']`	用作所有项目标签颜色的重复模式的 CSS 颜色。被`Item.labelColor`覆盖。示例： `['#fff','#000']` 。
`itemLabelFont`	`'sans-serif'`	用于所有项目标签的字体系列。示例： `'Helvetica, sans-serif'` 。
`itemLabelFontSizeMax`	`100`	所有项目标签的最大字体大小（以像素为单位）。
`itemLabelRadius`	`0.85`	沿着轮子半径的点（以百分比形式，从中心开始）开始绘制所有项目标签。
`itemLabelRadiusMax`	`0.2`	沿轮子半径的点（以百分比形式，从中心开始），用于限制所有项目标签的最大宽度。
`itemLabelRotation`	`0`	所有项目标签的旋转。与`itemLabelAlign`结合使用可将标签翻转`180°` 。
`itemLabelStrokeColor`	`'#fff'`	应用于标签文本外部的描边的 CSS 颜色。
`itemLabelStrokeWidth`	`0`	应用于标签文本外部的描边宽度。
`items`	`[]`	轮盘上显示的项目（或切片、楔形、段）。设置此属性将根据提供的对象重新创建轮子上的所有项目。访问此属性可以让您更改单个项目。例如，您可以更改项目的背景颜色。
`lineColor`	`'#000'`	项目之间线条的 CSS 颜色。
`lineWidth`	`1`	项目之间线条的宽度（以像素为单位）。
`offset`	`{x: 0, y: 0}`	轮子与其容器中心的偏移量（以轮子直径的百分比表示）。
`onCurrentIndexChange`	`null`	`onCurrentIndexChange`事件的回调。
`onRest`	`null`	`onRest`事件的回调。
`onSpin`	`null`	`onSpin`事件的回调。
`overlayImage`	`null`	要在滚轮顶部绘制的 HTMLImageElement。它将居中并缩放以适合容器的最小尺寸。用它来绘制方向盘周围的装饰，例如支架或指针。
`pixelRatio`	`0`	用于绘制轮盘的像素比（百分比）。较高的值会产生更清晰的图像，但会牺牲性能，但清晰度取决于当前的显示设备。值为`0`将使用当前显示设备的像素比（请参阅 devicePixelRatio）。
`pointerAngle`	`0`	将用于确定`currentIndex` （或“获胜”项目）的指针的角度。
`radius`	`0.95`	轮子的半径（以容器最小尺寸的百分比表示）。
`rotation`	`0`	车轮的旋转（角度）。第一个项目将从该点开始顺时针绘制。
`rotationResistance`	`-35`	每秒`rotationSpeed`将减少多少，直到轮子停止旋转。设置为`0`可无限旋转轮子。
`rotationSpeed`	`0`	[只读] 轮子每 1 秒旋转的速度（以度为单位的角度）。正数表示轮子顺时针旋转，负数表示逆时针旋转， `0`表示轮子不旋转。
`rotationSpeedMax`	`250`	`rotationSpeed`的最大绝对值。车轮在任一方向上的旋转速度都不会超过该值。

`Wheel`活动

`onCurrentIndexChange(event = {})`

当指向新项目时引发。这可用于更改当前项目的颜色，或播放“滴答”声音。

钥匙	价值
`type`	`'currentIndexChange'`
`currentIndex`	指针所指向的项目的索引。请参阅`Wheel.pointerAngle` 。

`onRest(event = {})`

当车轮旋转后停止时升高。

钥匙	价值
`type`	`'rest'`
`currentIndex`	指针所指向的项目的索引。请参阅`Wheel.pointerAngle` 。
`rotation`	轮子的旋转。请参阅`Wheel.rotation` 。

`onSpin(event = {})`

当车轮旋转时升高。

钥匙	价值
`type`	`'spin'`
`duration`	旋转动画的持续时间。仅当`method = spinto`或`method = spintoitem`时提供。
`method`	用于旋转轮子的方法（ `interact` 、 `spin` 、 `spinto` 、 `spintoitem` ）。
`rotationResistance`	引发事件时`Wheel.rotationResistance`的值。仅当`method = interact`或`method = spin`时提供。
`rotationSpeed`	引发事件时`Wheel.rotationSpeed`的值。仅当`method = interact`或`method = spin`时提供。
`targetItemIndex`	旋转动画完成后指针将指向的项目。仅当`method = spintoitem`时提供。
`targetRotation`	旋转动画完成后`Wheel.rotation`将具有的值。仅当`method = spinto`或`method = spintoitem`时提供。

`Item`方法

姓名	描述
`getCenterAngle()`	获取该项目结束的角度（以度为单位）（不包括），忽略轮子的当前`rotation` 。
`getEndAngle()`	获取该项目结束的角度（以度为单位）（含），忽略轮子的当前`rotation` 。
`getIndex()`	获取该项目的从 0 开始的索引。
`getRandomAngle()`	返回该项目的起始角度（含）和结束角度（含）之间的随机角度（以度为单位）。
`getStartAngle()`	获取该项目开始的角度（以度为单位）（含），忽略滚轮的当前`rotation` 。
`init(props = {})`	初始化所有属性。如果某个值未定义或无效，则该属性将回退到默认值。

`Item`属性

注意：将属性设置为undefined会将其重置为默认值。

姓名	默认值	描述
`backgroundColor`	`null`	项目背景的 CSS 颜色。当`null`时，颜色将回退到`Wheel.itemBackgroundColors` 。示例： `'#fff'` 。
`image`	`null`	要在项目上绘制的 HTMLImageElement。延伸到项目之外的图像的任何部分都将被剪掉。图像将绘制在`Item.backgroundColor`的顶部。
`imageOpacity`	`1`	`Item.image`的不透明度（以百分比表示）。如果您想要淡化图像以使项目的标签突出，则非常有用。
`imageRadius`	`0.5`	沿着轮子半径的点（以百分比形式，从中心开始）绘制`Item.image`的中心。
`imageRotation`	`0`	`Item.image`的旋转（角度）。
`imageScale`	`1`	`Item.image`的比例（大小以百分比表示）。
`label`	`''`	将在项目上绘制的文本。
`labelColor`	`null`	项目标签的 CSS 颜色。当`null`时，颜色将回退到`Wheel.itemLabelColors` 。示例： `'#000'` 。
`value`	`null`	一些对您的应用程序有意义的值。例如，对表示轮子上的项目的对象的引用，或数据库 ID。
`weight`	`1`	该项目相对于轮盘上其他项目的比例大小。例如，如果您有 2 个项目，其中`item[0]`权重为`1`且`item[1]`权重为`2` ，则`item[0]`将占用滚轮上空间的 1/3。

致谢

受到随机轮的启发。

展开

附加信息

版本 5.0.2
类型其他源码
更新时间 2025-01-12
大小 562.41KB
来自于 Github

spin wheel

旋转轮

特征

示例

安装

环境管理署

国际教育学院

当地的

如何制作自己的轮子

如何转动轮子

如何绘制指针

图像和字体

配置

`Wheel`的方法

`Wheel`的属性

`Wheel`活动

`onCurrentIndexChange(event = {})`

`onRest(event = {})`

`onSpin(event = {})`

`Item`方法

`Item`属性

致谢

车轮技术服务跟踪应用程序

方向盘的演变

武器旋转最新版本

旋转节奏XD

死亡之轮：皇家之战

时间之轮

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

Sunamu

SmartTube

waymo open dataset

wp functions

slugify

spin wheel

旋转轮

特征

示例

安装

环境管理署

国际教育学院

当地的

如何制作自己的轮子

如何转动轮子

如何绘制指针

图像和字体

配置

Wheel的方法

Wheel的属性

Wheel活动

onCurrentIndexChange(event = {})

onRest(event = {})

onSpin(event = {})

Item方法

Item属性

致谢

`Wheel`的方法

`Wheel`的属性

`Wheel`活动

`onCurrentIndexChange(event = {})`

`onRest(event = {})`

`onSpin(event = {})`

`Item`方法

`Item`属性