React菜鸟日志

最新推荐文章于 2024-09-14 18:52:56 发布

Jpx23

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量101

点赞数

分类专栏：日志文章标签： javascript reactjs

本文链接：https://blog.csdn.net/m0_50215130/article/details/116524840

版权

日志专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何修改开源的React-wheel-of-prizes组件，使其符合项目要求。主要涉及了对点击事件的修改，使用useEffect注意事项，以及组件的操作流程。通过调整，使得每次点击按钮时轮盘开始旋转，并根据输入条件控制旋转结果。同时，对canvas元素进行了操作以实现指针绘制。最后，讨论了如何将spin操作独立出来并进行一些界面调整。

摘要由CSDN通过智能技术生成

一、目标：

动手修改开源 react-wheel-of-prizes将其稍加修改为适合项目使用的component

二、输入：

React-wheel-of-prizes :

GitHub : https://github.com/shekharramola/react-wheel -of-prizes

修改档案：https://github.com/shekharramola/react-wheel-of-prizes/blob/master/src/index.js

原始操作样式=>点击图上任意地方，wheel就会开始操作

三、操作：

必须输入条件

使用useEffect应留意事项

WheelComponent操作流程

var intervalID = scope.setInterval(function[, delay]);

Return value
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to WindowOrWorkerGlobalScope.clearInterval() to cancel the interval.

输入条件中的winningSegment如有传值，每次旋转的结果都会相同

修改click事件

const initCanvas = () => {
    let canvas = document.getElementById('canvas')
    let spinner = document.getElementById('spinner')
    if (navigator.appVersion.indexOf('MSIE') !== -1) {
        canvas = document.createElement('canvas')
        canvas.setAttribute('width', 1000)
        canvas.setAttribute('height', 600)
        canvas.setAttribute('id', 'canvas')
        document.getElementById('wheel').appendChild(canvas)
    }
    spinner.addEventListener('click', spin, false)
    canvasContext = canvas.getContext('2d')
}

return (
	<div className="container">
	    <div className="row" id='wheel'>
	        <canvas
	            id='canvas'
	            width='1000'
	            height='680'
	            style={{
	                pointerEvents: isFinished && isOnlyOnce ? 'none' : 'auto'
	            }}
	        />
	    </div>
	    <div className="row">
	        <div className="col-6 align-self-center">
	            <Button id='spinner' variant="outline-success">Spin</Button>
	        </div>
	    </div>
	</div>
)

const drawNeedle = () => {
    const ctx = canvasContext
    const needle_y = 0
    ctx.lineWidth = 1
    ctx.strokeStyle = 'black' // contrastColor || 'white'
    ctx.fillStyle = 'black' // contrastColor || 'white'
    ctx.beginPath()
    ctx.moveTo(centerX + 15, needle_y + 10)
    ctx.lineTo(centerX - 15, needle_y + 10)
    ctx.lineTo(centerX, needle_y + 60)
    ctx.closePath()
    ctx.fill()

    ...
}