小球跟随鼠标晃动

CustomView

public class CustomView extends View {
    Paint paint;
    float mTouchX,mTouchY;
    public CustomView(Context context) {
        super(context);
        init();
    }

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setTextSize(60);
        paint.setStyle(Paint.Style.FILL);
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if(event.getAction()==MotionEvent.ACTION_DOWN){
                    //获取点击位置的X Y
                    mTouchX=event.getX();
                    mTouchY=event.getY();
                }else if(event.getAction()==MotionEvent.ACTION_MOVE){
                    //获取点击位置的 X Y
                    mTouchX=event.getX();
                    mTouchY=event.getY();
                }
                invalidate();
                return true;
            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mTouchX,mTouchY,50,paint);
    }
}

MainActivity里不需要写

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 和 CSS 实现小球跟随鼠标的效果。具体实现步骤如下: 1. 在 HTML 中添加一个小球元素: ```html <div id="ball"></div> ``` 2. 在 CSS 中设置小球的样式,包括大小、颜色、圆角等: ```css #ball { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; z-index: 9999; } ``` 3. 在 JavaScript 中添加事件监听器,监听鼠标移动事件,并获取鼠标的坐标: ```javascript var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; }); ``` 4. 计算小球应该距离页面左边和顶部的距离,并将其设置为小球的样式: ```javascript var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; var ballX = x - ball.offsetWidth / 2; var ballY = y - ball.offsetHeight / 2; ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; }); ``` 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球跟随鼠标</title> <style> #ball { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; z-index: 9999; } </style> </head> <body> <div id="ball"></div> <script> var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; var ballX = x - ball.offsetWidth / 2; var ballY = y - ball.offsetHeight / 2; ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; }); </script> </body> </html> ``` 这样,就实现了小球跟随鼠标的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值