android 自定义 一个抽奖轮盘

要自定义一个抽奖轮盘，可以参考以下步骤：

1. 创建一个自定义 View 类，继承自 View。

2. 在 View 类中定义轮盘的属性，例如：转盘的颜色、外圆的半径、内圆的半径、扇形的数量和颜色等。

3. 重写 View 类的 onMeasure() 方法，计算轮盘的大小。

4. 重写 View 类的 onDraw() 方法，绘制轮盘。

5. 在 View 类中实现轮盘的转动效果。可以使用 ValueAnimator 或者自定义动画实现。

6. 在 View 类中实现抽奖逻辑。可以使用随机数生成器来确定中奖结果，然后根据中奖结果计算转盘的旋转角度。

7. 在 Activity 或 Fragment 中使用自定义 View 类，添加到布局中。

以上是一个简单的抽奖轮盘的实现步骤，具体实现可以根据需求进行调整。

相关问题

android 自定义一个抽奖轮盘代码

以下是一个简单的抽奖轮盘的示例代码，仅供参考：

1. 自定义 View 类：

public class LuckyWheelView extends View {

    private static final int DEFAULT_SIZE = 400;
    private static final int DEFAULT_SECTOR_NUM = 6;
    private static final int DEFAULT_START_ANGLE = 0;
    private static final int DEFAULT_ROTATION_ANGLE = 360 * 5;

    private int mSize;
    private int mRadius;
    private int mInnerRadius;
    private int mSectorNum;
    private int mStartAngle;
    private int mRotationAngle;
    private Paint mPaint;
    private RectF mRectF;
    private String[] mSectorColors;
    private String mTextColor;
    private String mCenterText;
    private int mCenterTextSize;
    private int mTextColorResId;
    private int mCenterTextSizeResId;

    public LuckyWheelView(Context context) {
        this(context, null);
    }

    public LuckyWheelView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LuckyWheelView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.LuckyWheelView, 0, 0);
        try {
            mSectorNum = ta.getInteger(R.styleable.LuckyWheelView_sectorNum, DEFAULT_SECTOR_NUM);
            mStartAngle = ta.getInteger(R.styleable.LuckyWheelView_startAngle, DEFAULT_START_ANGLE);
            mRotationAngle = ta.getInteger(R.styleable.LuckyWheelView_rotationAngle, DEFAULT_ROTATION_ANGLE);
            mSectorColors = new String[mSectorNum];
            mSectorColors[0] = ta.getString(R.styleable.LuckyWheelView_sectorColor1);
            mSectorColors[1] = ta.getString(R.styleable.LuckyWheelView_sectorColor2);
            mSectorColors[2] = ta.getString(R.styleable.LuckyWheelView_sectorColor3);
            mSectorColors[3] = ta.getString(R.styleable.LuckyWheelView_sectorColor4);
            mSectorColors[4] = ta.getString(R.styleable.LuckyWheelView_sectorColor5);
            mSectorColors[5] = ta.getString(R.styleable.LuckyWheelView_sectorColor6);
            mTextColor = ta.getString(R.styleable.LuckyWheelView_textColor);
            mCenterText = ta.getString(R.styleable.LuckyWheelView_centerText);
            mCenterTextSize = ta.getDimensionPixelSize(R.styleable.LuckyWheelView_centerTextSize, getResources().getDimensionPixelSize(R.dimen.default_center_text_size));
            mTextColorResId = ta.getResourceId(R.styleable.LuckyWheelView_textColor, R.color.black);
            mCenterTextSizeResId = ta.getResourceId(R.styleable.LuckyWheelView_centerTextSize, R.dimen.default_center_text_size);
        } finally {
            ta.recycle();
        }
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRectF = new RectF();
        mPaint.setTextSize(mCenterTextSize);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mTextColor = getResources().getString(mTextColorResId);
        mCenterTextSize = getResources().getDimensionPixelSize(mCenterTextSizeResId);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int sizeSpec = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            mSize = sizeSpec;
        } else {
            mSize = DEFAULT_SIZE;
            if (mode == MeasureSpec.AT_MOST && sizeSpec < mSize) {
                mSize = sizeSpec;
            }
        }
        mRadius = mSize / 2;
        mInnerRadius = mRadius / 2;
        setMeasuredDimension(mSize, mSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawSectors(canvas);
        drawCenterText(canvas);
    }

    private void drawSectors(Canvas canvas) {
        float sweepAngle = 360f / mSectorNum;
        float startAngle = mStartAngle;
        for (int i = 0; i < mSectorNum; i++) {
            mPaint.setColor(Color.parseColor(mSectorColors[i]));
            mRectF.set(0, 0, mSize, mSize);
            canvas.drawArc(mRectF, startAngle, sweepAngle, true, mPaint);
            startAngle += sweepAngle;
        }
    }

    private void drawCenterText(Canvas canvas) {
        mPaint.setColor(Color.parseColor(mTextColor));
        mPaint.setTextSize(mCenterTextSize);
        canvas.drawText(mCenterText, mRadius, mRadius + mCenterTextSize / 2, mPaint);
    }

    public void startRotation() {
        ValueAnimator animator = ValueAnimator.ofInt(0, mRotationAngle);
        animator.setDuration(5000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                mStartAngle = value % 360;
                invalidate();
            }
        });
        animator.start();
    }

    public void setCenterText(String centerText) {
        mCenterText = centerText;
        invalidate();
    }
}

2. 在 values 文件夹下创建 attrs.xml 文件：

<resources>
    <declare-styleable name="LuckyWheelView">
        <attr name="sectorNum" format="integer" />
        <attr name="startAngle" format="integer" />
        <attr name="rotationAngle" format="integer" />
        <attr name="sectorColor1" format="string" />
        <attr name="sectorColor2" format="string" />
        <attr name="sectorColor3" format="string" />
        <attr name="sectorColor4" format="string" />
        <attr name="sectorColor5" format="string" />
        <attr name="sectorColor6" format="string" />
        <attr name="textColor" format="string" />
        <attr name="centerText" format="string" />
        <attr name="centerTextSize" format="dimension" />
    </declare-styleable>
</resources>

3. 在 layout 文件中引用自定义 View：

<com.example.luckywheel.LuckyWheelView
    android:id="@+id/luckyWheelView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:centerText="Start"
    app:centerTextSize="@dimen/default_center_text_size"
    app:rotationAngle="1800"
    app:sectorColor1="#FFC107"
    app:sectorColor2="#9C27B0"
    app:sectorColor3="#2196F3"
    app:sectorColor4="#009688"
    app:sectorColor5="#FF5722"
    app:sectorColor6="#607D8B"
    app:sectorNum="6"
    app:startAngle="0"
    app:textColor="@color/black" />

4. 在 Activity 或 Fragment 中启动轮盘转动：

LuckyWheelView luckyWheelView = findViewById(R.id.luckyWheelView);
luckyWheelView.startRotation();

canvas实现一个抽奖轮盘

好的，以下是一个简单的抽奖轮盘实现，使用HTML5 Canvas来绘制：

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>抽奖轮盘</title>
	<meta charset="UTF-8">
	<style>
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<button onclick="start()">开始</button>
</body>
</html>

JavaScript:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
var rotateAngle = 0;
var prizeArr = ["一等奖", "二等奖", "三等奖", "再接再厉", "谢谢参与"];
var colorArr = ["#FFB6C1", "#FF69B4", "#FF1493", "#DB7093", "#C71585"];

//绘制背景
function drawBg(){
	ctx.save();
	ctx.translate(250, 250);
	var colors = colorArr;
	var startAngle = 0;
	var endAngle = 0;
	for(var i = 0; i < 5; i++){
		startAngle = endAngle;
		endAngle = startAngle + Math.PI * 2 / 5;
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.arc(0, 0, 200, startAngle, endAngle);
		ctx.closePath();
		ctx.fillStyle = colors[i];
		ctx.fill();
	}
	ctx.restore();
}

//绘制文本
function drawText(){
	ctx.save();
	ctx.translate(250, 250);
	var text = prizeArr;
	var angle = Math.PI / 5;
	ctx.font = "bold 20px Arial";
	ctx.fillStyle = "#fff";
	for(var i = 0; i < 5; i++){
		ctx.beginPath();
		ctx.rotate(angle);
		ctx.fillText(text[i], -50, -170);
		ctx.closePath();
		angle += Math.PI * 2 / 5;
	}
	ctx.restore();
}

//绘制指针
function drawPointer(){
	ctx.save();
	ctx.translate(250, 250);
	ctx.rotate(rotateAngle);
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(0, -150);
	ctx.strokeStyle = "#FF0000";
	ctx.lineWidth = 5;
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
}

//开始旋转
function start(){
	if(rotateAngle == 0){
		angle = Math.floor(Math.random() * 5) * (Math.PI / 5);
		rotateAngle = angle + Math.PI * 2 * 6;
	}
	var timer = setInterval(function(){
		drawBg();
		drawText();
		drawPointer();
		rotateAngle -= Math.PI / 180 * 5;
		if(rotateAngle <= angle){
			clearInterval(timer);
			alert(prizeArr[Math.floor((angle + Math.PI / 5 / 2) / (Math.PI / 5) % 5)]);
			rotateAngle = 0;
		}
	}, 30);
}

drawBg();
drawText();

该代码实现了一个简单的抽奖轮盘，点击“开始”按钮时，轮盘将开始旋转，最终停在一个随机的奖项上。在这个例子中，奖项分别为“一等奖”、“二等奖”、“三等奖”、“再接再厉”和“谢谢参与”，奖项的背景颜色为不同的颜色。