自定义一个支持四个方向的虚拟按键，可自由设置背景图片或渐变色或纯色，可作为控制摄像头的控制按钮。

最新推荐文章于 2022-07-13 17:59:57 发布
最新推荐文章于 2022-07-13 17:59:57 发布
阅读量157 收藏
点赞数
文章标签： android java canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36247876/article/details/115718769
版权

自定义View 虚拟按键 Android开发 点击事件 图形绘制
关键词由CSDN通过智能技术生成

文章目录

前言

提示：这是一个支持四个按钮的的虚拟按盘，并且可自由设置背景图片。
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、自定义view

public class FictitiousButton extends View {

    private Bitmap mUpBitmap;
    private Bitmap mBottomBitmap;
    private Bitmap mLeftBitmap;
    private Bitmap mRightBitmap;

    private Bitmap mUpBitmap_last;
    private Bitmap mBottomBitmap_last;
    private Bitmap mLeftBitmap_last;
    private Bitmap mRightBitmap_last;

    private final Paint mPaintLeft = new Paint();
    private final Paint mPaintTop = new Paint();
    private final Paint mPaintRight = new Paint();
    private final Paint mPaintBottom = new Paint();
    private final Paint mPaintCenter = new Paint();
    private final Paint mPaintCircularCenter = new Paint();
    private final Paint mPaintLine = new Paint();
    private int mSplitLineWidth = 2;
    private int mDefaultColor = Color.WHITE;
    private int mClickSolidColor = Color.WHITE;
    private int mDefaultCenterColor;
    private int mClickSolidCenterColor = Color.rgb(170,170,170);
    private int mSplitLineColor = Color.BLACK;
    private int mStopColor = Color.WHITE;

    private int width;
    private int height;

    private int lastClick;

    private int topClickBlank;
    private int leftClickBlank;
    private int rightClickBlank;
    private int bottomClickBlank;

    private boolean isShowShadow;


    public FictitiousButton(Context context) {
        super(context);
        initDraw();
    }

    public FictitiousButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        @SuppressLint("CustomViewStyleable") TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.DirectionButton);
        mSplitLineWidth = typeArray.getDimensionPixelSize(R.styleable.DirectionButton_splitLineWidth, 2);
        mSplitLineColor = typeArray.getColor(R.styleable.DirectionButton_splitLineColor, Color.WHITE);
        mDefaultColor = typeArray.getColor(R.styleable.DirectionButton_normalColor, Color.WHITE);
        mClickSolidColor = typeArray.getColor(R.styleable.DirectionButton_pressColor, 0);
        isShowShadow = typeArray.getBoolean(R.styleable.DirectionButton_isShowShadows, false);
        mDefaultCenterColor = typeArray.getColor(R.styleable.DirectionButton_normalCenterColor, 0);
        mClickSolidCenterColor = typeArray.getColor(R.styleable.DirectionButton_pressCenterColor, Color.rgb(170,170,170));

        int mUpImgId = typeArray.getResourceId(R.styleable.DirectionButton_upImage, R.mipmap.home_nvr_up);
        mUpBitmap = BitmapFactory.decodeResource(getResources(), mUpImgId);

        int mBottomImgId = typeArray.getResourceId(R.styleable.DirectionButton_dowmImage, R.mipmap.home_nvr_bottom);
        mBottomBitmap = BitmapFactory.decodeResource(getResources(), mBottomImgId);

        int mLeftImgId = typeArray.getResourceId(R.styleable.DirectionButton_leftImage, R.mipmap.home_nvr_left);
        mLeftBitmap = BitmapFactory.decodeResource(getResources(), mLeftImgId);

        int mRightImgId = typeArray.getResourceId(R.styleable.DirectionButton_rightImage, R.mipmap.home_nvr_right);
        mRightBitmap = BitmapFactory.decodeResource(getResources(), mRightImgId);

        typeArray.recycle();
        initDraw();
    }

    public FictitiousButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDraw();
    }

    private void initDraw() {
        mPaintLeft.setColor(mDefaultColor);
        mPaintLeft.setStrokeWidth((float) 1.5);
        mPaintLeft.setAntiAlias(true);
        mPaintLeft.setFilterBitmap(true);

        mPaintTop.setColor(mDefaultColor);
        mPaintTop.setStrokeWidth((float) 1.5);
        mPaintTop.setAntiAlias(true);
        mPaintTop.setFilterBitmap(true);

        mPaintRight.setColor(mDefaultColor);
        mPaintRight.setStrokeWidth((float) 1.5);
        mPaintRight.setAntiAlias(true);
        mPaintRight.setFilterBitmap(true);

        mPaintBottom.setColor(mDefaultColor);
        mPaintBottom.setStrokeWidth((float) 1.5);
        mPaintBottom.setAntiAlias(true);
        mPaintBottom.setFilterBitmap(true);

        mPaintLine.setColor(mSplitLineColor);
        mPaintLine.setStrokeWidth((float) 1.5);
        mPaintLine.setAntiAlias(true);
        mPaintLine.setFilterBitmap(true);

        mPaintCircularCenter.setColor(Color.WHITE);
        mPaintCircularCenter.setStrokeWidth((float) 1.5);
        mPaintCircularCenter.setAntiAlias(true);
        mPaintCircularCenter.setFilterBitmap(true);

        mPaintCenter.setColor(Color.rgb(226,227,229));
        mPaintCenter.setStyle(Paint.Style.STROKE);
        mPaintCenter.setStrokeWidth((float) 5.5);
        mPaintCenter.setAntiAlias(true);
        mPaintCenter.setFilterBitmap(true);

        if (isShowShadow) {
            setLayerType(LAYER_TYPE_SOFTWARE, mPaintBottom);
            mPaintBottom.setShadowLayer(2, 0, 1, Color.WHITE);
            setLayerType(LAYER_TYPE_SOFTWARE, mPaintRight);
            mPaintRight.setShadowLayer(2, 1, 0, Color.WHITE);
            setLayerType(LAYER_TYPE_SOFTWARE, mPaintLeft);
            mPaintLeft.setShadowLayer(2, -1, 0, Color.WHITE);
            setLayerType(LAYER_TYPE_SOFTWARE, mPaintTop);
            mPaintTop.setShadowLayer(2, 0, -1, Color.WHITE);
            setLayerType(LAYER_TYPE_SOFTWARE, mPaintCenter);
            mPaintCenter.setShadowLayer(1, 0, 0, Color.WHITE);
        }

    }

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

        boolean isFirst = false;
        if (width == 0) {
            isFirst = true;
        }

        int padLeft = getPaddingLeft();
        int padTop = getPaddingTop();
        int padBottom = getPaddingBottom();
        int padRight = getPaddingRight();

        height = getHeight();
        width = getWidth();
        width = width - padLeft - padRight;
        height = height - padTop - padBottom;

        if (isFirst) {
            for (int i = 1; i < 5; i++) {
                resetPaint(i, mDefaultColor, mDefaultCenterColor, 0);
            }
        }

        @SuppressLint("DrawAllocation") RectF rectFbottom = new RectF(padLeft + mSplitLineWidth + bottomClickBlank,
                padTop + mSplitLineWidth * 2 + bottomClickBlank,
                width + padLeft - mSplitLineWidth - bottomClickBlank,
                height + padTop + bottomClickBlank);

        @SuppressLint("DrawAllocation") RectF rectFleft = new RectF(padLeft - leftClickBlank,
                mSplitLineWidth + padTop + leftClickBlank,
                width + padLeft - mSplitLineWidth * 2 - leftClickBlank,
                height + padTop - mSplitLineWidth - leftClickBlank);

        @SuppressLint("DrawAllocation") RectF rectFTop = new RectF(padLeft + mSplitLineWidth + topClickBlank,
                padTop - topClickBlank,
                width + padLeft - mSplitLineWidth - topClickBlank,
                height + padTop - mSplitLineWidth * 2 - topClickBlank);

        @SuppressLint("DrawAllocation") RectF rectFright = new RectF(padLeft + mSplitLineWidth * 2 + rightClickBlank,
                padTop + mSplitLineWidth + rightClickBlank,
                width + padLeft + rightClickBlank,
                height + padTop - mSplitLineWidth - rightClickBlank);

        @SuppressLint("DrawAllocation") RectF rectFCenter = new RectF(
                padLeft ,
                padTop ,
                padRight,
                padBottom);

        @SuppressLint("DrawAllocation") RectF rectFCircularCenter = new RectF(
                padLeft ,
                padTop ,
                padRight,
                padBottom);

        if (width == height)
            canvas.drawCircle(width / 2 + padLeft, height / 2 + padTop, height / 2 - 1, mPaintLine);
        else {
            @SuppressLint("DrawAllocation") RectF rectf = new RectF(padLeft + 1, padTop + 1, width + padLeft - 1, height + padTop - 1);
            canvas.drawOval(rectf, mPaintLine);
        }


        canvas.drawArc(rectFbottom, 45, 90, true, mPaintBottom);
        canvas.drawArc(rectFleft, 135, 90, true, mPaintLeft);
        canvas.drawArc(rectFTop, 225, 90, true, mPaintTop);
        canvas.drawArc(rectFright, 315, 90, true, mPaintRight);
        canvas.drawArc(rectFCircularCenter,-90,90,false, mPaintCircularCenter);
        canvas.drawArc(rectFCenter,-90,90,false, mPaintCenter);

        if (mUpBitmap != null) {

            int topWidth = width - 2 * mSplitLineWidth - 2 * topClickBlank;
            int topHeight = height - mSplitLineWidth * 2;
            @SuppressLint("DrawAllocation") Rect rectTop = new Rect(mSplitLineWidth + padLeft + topClickBlank + topWidth / 3 + topWidth / 10,
                    padTop - topClickBlank + topHeight / 12,
                    width - mSplitLineWidth + padLeft - topClickBlank - topWidth / 3 - topWidth / 10,
                    height - mSplitLineWidth * 2 + padTop - topClickBlank - topHeight / 2 - topHeight / 3);

            canvas.drawBitmap(mUpBitmap, null, rectTop, mPaintTop);

        }
        if (mBottomBitmap != null) {
            int bottomWidth = width - 2 * mSplitLineWidth - 2 * bottomClickBlank;
            int bottomHeight = height - mSplitLineWidth * 2;
            @SuppressLint("DrawAllocation") Rect rectBottom = new Rect(padLeft + mSplitLineWidth + bottomClickBlank + bottomWidth / 3 + bottomWidth / 10,
                    padTop + mSplitLineWidth * 2 + bottomClickBlank + bottomHeight / 2 + bottomHeight / 3,
                    width + padLeft - mSplitLineWidth - bottomClickBlank - bottomWidth / 3 - bottomWidth / 10,
                    height + padTop + bottomClickBlank - bottomHeight / 12);

            canvas.drawBitmap(mBottomBitmap, null, rectBottom, mPaintBottom);
        }
        if (mLeftBitmap != null) {
            int leftWidth = width - mSplitLineWidth * 2;
            int leftHeght = height - 2 * mSplitLineWidth - 2 * leftClickBlank;
            @SuppressLint("DrawAllocation") Rect rectLeft = new Rect(padLeft - leftClickBlank + leftWidth / 12,
                    mSplitLineWidth + padTop + leftClickBlank + leftHeght / 3 + leftHeght / 10,
                    width + padLeft - mSplitLineWidth * 2 - leftClickBlank - leftWidth / 2 - leftWidth / 3,
                    height + padTop - mSplitLineWidth - leftClickBlank - leftHeght / 3 - leftHeght / 10);

            canvas.drawBitmap(mLeftBitmap, null, rectLeft, mPaintBottom);
        }
        if (mRightBitmap != null) {
            int rightWidth = width - mSplitLineWidth * 2;
            int rightHeight = height - 2 * mSplitLineWidth - 2 * rightClickBlank;
            @SuppressLint("DrawAllocation") Rect rectRight = new Rect(padLeft + mSplitLineWidth * 2 + rightClickBlank + rightWidth / 2 + rightWidth / 3,
                    padTop + mSplitLineWidth + rightClickBlank + rightHeight / 3 + rightHeight / 10,
                    width + padLeft + rightClickBlank - rightWidth / 12,
                    height + padTop - mSplitLineWidth - rightClickBlank - rightHeight / 3 - rightHeight / 10);

            canvas.drawBitmap(mRightBitmap, null, rectRight, mPaintBottom);
        }
        canvas.drawCircle(width/2,height/2,width/6 ,mPaintCircularCenter);
        canvas.drawCircle(width/2,height/2,width/6 ,mPaintCenter);
          refreshLastBitmap();
    }

    private void refreshLastBitmap() {
        if (mUpBitmap_last!=mUpBitmap) {
            refreshBitmap(mUpBitmap_last);
            mUpBitmap_last = mUpBitmap;
        }
        if (mBottomBitmap_last!=mBottomBitmap) {
            refreshBitmap(mBottomBitmap_last);
            mBottomBitmap_last = mBottomBitmap;
        }
        if (mLeftBitmap_last!=mLeftBitmap) {
            refreshBitmap(mLeftBitmap_last);
            mLeftBitmap_last = mLeftBitmap;
        }
        if (mRightBitmap_last!=mRightBitmap) {
            refreshBitmap(mRightBitmap_last);
            mRightBitmap_last = mRightBitmap;
        }
    }
    
    private void refreshBitmap(Bitmap bitmap) {
        if (bitmap != null) {
            bitmap.recycle();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        int mDefaultWidth = 300;
        int mDefaultHeight = 300;
        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(mDefaultWidth, mDefaultHeight);
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(mDefaultWidth, heightSpecSize);
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSpecSize, mDefaultHeight);
        }
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            stopTouchEvent();
        } else if (event.getAction() == MotionEvent.ACTION_DOWN) {
            touchEvent(event);
        }

        return true;
    }

    private void touchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        getDirection(x, y);
    }

    private void getDirection(float x, float y) {

        if (width != height && !isTouchOvalIn(x, y))
            return;
        if (width == height) {
            float distanceX = Math.abs((getWidth() >> 1) - x);
            float distanceY = Math.abs((getHeight() >> 1) - y);
            float distanceXY = (float) Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
            int radius = width >= height ? width / 2 : height / 2;
            if (distanceXY > radius)
                return;
        }
        int radiusX = (getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft();
        int radiusY = (getHeight() - getPaddingTop() - getPaddingBottom()) / 2 + getPaddingTop();

        double angleSource = Math.atan2(y - radiusY, x - radiusX);
        int angle = (int) (angleSource * 180 / Math.PI);
        if (angle <= 0)
            angle = angle + 360;
        int mDefaultLacuna = -2;
        double pointToX = Math.pow((Math.abs(x) - Math.abs(width/2)),2);
        double pointToY = Math.pow((Math.abs(y) - Math.abs(height/2)),2);

        if (Math.sqrt(pointToX + pointToY) > Math.abs(width/6)) {
            if (angle >= 45 && angle < 135) {
                if (lastClick != 1) {
                    if (listener != null)
                        listener.bottomClick();
                    //设置单一颜色，只设置mClickSolidColor就可以了，然后在resetPaint（）这个方法中的if下面加
                    // else{
                    //	 **paint.setColor(颜色值)；
                    // }
                    //即可
                    resetPaint(1, mClickSolidColor, mClickSolidCenterColor, mDefaultLacuna);
                    lastClick = 1;
                }
            } else if (angle >= 135 && angle < 225) {
                if (lastClick != 2) {
                    if (listener != null)
                        listener.leftClick();
                    resetPaint(2, mClickSolidColor, mClickSolidCenterColor, mDefaultLacuna);
                    lastClick = 2;
                }

            } else if (angle >= 225 && angle < 315) {
                if (lastClick != 3) {
                    if (listener != null)
                        listener.topClick();
                    resetPaint(3, mClickSolidColor, mClickSolidCenterColor, mDefaultLacuna);
                    lastClick = 3;
                }
            } else {
                if (lastClick != 4) {
                    if (listener != null)
                        listener.rightClick();
                    resetPaint(4, mClickSolidColor, mClickSolidCenterColor, mDefaultLacuna);
                    lastClick = 4;
                }

            }
            invalidate();
        }


    }

    private boolean isTouchOvalIn(float x, float y) {
        int centerX = width / 2 + getPaddingLeft();
        int centerY = height / 2 + getPaddingTop();
        boolean isFocusInX = width > height ? true : false;
        int a;
        int b;
        if (isFocusInX) {
            a = width / 2;
            b = height / 2;
        } else {
            a = height / 2;
            b = width / 2;
        }
        double c = Math.sqrt(Math.pow(a, 2) - Math.pow(b, 2));
        double f1;
        double f2;

        if (isFocusInX) {
            double xLeft = centerX - c;
            double xRight = centerX + c;
            f1 = getLengthBy2Dot(x, y, xLeft, centerY);
            f2 = getLengthBy2Dot(x, y, xRight, centerY);
        } else {
            double yUp = centerY - c;
            double yDown = centerY + c;
            f1 = getLengthBy2Dot(x, y, centerX, yUp);
            f2 = getLengthBy2Dot(x, y, centerX, yDown);
        }
        if ((f1 + f2) <= (2 * a))
            return true;
        return false;
    }

    private double getLengthBy2Dot(float srcX, float srcY, double desX, double desY) {
        return Math.sqrt(Math.pow(Math.abs(srcX - desX), 2) + Math.pow(Math.abs(srcY - desY), 2));
    }

    private void resetPaint(int who, int color, int centerColor, int lacuna) {
        switch (who) {
            case 1:
                if (centerColor != 0) {
                    RadialGradient radialGradient = new RadialGradient(width / 2 + getPaddingLeft()
                            , height / 2 + getPaddingTop()
                            , width / 2 - mSplitLineWidth
                            , centerColor, color
                            , RadialGradient.TileMode.CLAMP
                    );
                    mPaintBottom.setShader(radialGradient);
                }
                bottomClickBlank = lacuna;
                break;
            case 2:
                if (centerColor != 0) {
                    RadialGradient radialGradient2 = new RadialGradient(width / 2 + getPaddingLeft()
                            , height / 2 + getPaddingTop()
                            , width / 2 - mSplitLineWidth
                            , centerColor, color
                            , RadialGradient.TileMode.CLAMP
                    );
                    mPaintLeft.setShader(radialGradient2);
                }

                leftClickBlank = lacuna;
                break;
            case 3:
                if (centerColor != 0) {
                    RadialGradient radialGradient3 = new RadialGradient(width / 2 + getPaddingLeft()
                            , height / 2 + getPaddingTop()
                            , width / 2 - mSplitLineWidth
                            , centerColor, color
                            , RadialGradient.TileMode.CLAMP
                    );
                    mPaintTop.setShader(radialGradient3);
                }

                topClickBlank = lacuna;
                break;
            case 4:
                if (centerColor != 0) {
                    RadialGradient radialGradient4 = new RadialGradient(width / 2 + getPaddingLeft()
                            , height / 2 + getPaddingTop()
                            , width / 2 - mSplitLineWidth
                            , centerColor, color
                            , RadialGradient.TileMode.CLAMP
                    );
                    mPaintRight.setShader(radialGradient4);
                }
                rightClickBlank = lacuna;
                break;
        }

    }

    private void stopTouchEvent() {
        if (listener != null) {
            listener.stopTouch();
        }
        resetPaint(lastClick, mClickSolidColor, mStopColor, 0);
        invalidate();
        lastClick = 0;
    }

    public interface OnItemClickListener {
        void topClick();

        void bottomClick();

        void leftClick();

        void rightClick();

        void stopTouch();
    }

    private OnItemClickListener listener;

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }

}

二、使用步骤

1.在XML中使用方法

<com.*.*.*.View.FictitiousButton
            android:layout_width="@dimen/com_160dp"
            android:layout_height="@dimen/com_160dp"/>

//宽和高可随意设置

2.在activity中使用

FictitiousButton mFictitiousButton = findViewById(R.id.fict_btn);
        mFictitiousButton.setOnItemClickListener(new FictitiousButton.OnItemClickListener() {
            @Override
            public void topClick() {
                
            }

            @Override
            public void bottomClick() {

            }

            @Override
            public void leftClick() {

            }

            @Override
            public void rightClick() {

            }

            @Override
            public void stopTouch() {

            }
        });

3. 该View中的stopTouch() 再点击中间的圆形手势离开后也会执行，只要不在stopTouch里面些什么操作就不会影响（一旦在stopTouch方法中有操作事件的话，点击时加个判断就好）

总结

此篇文章仅作为自己学习后的心得，用来记录。各位大神如发现问题请指教。

qq_36247876
关注
【电子学会】2022年09月图形化二级 -- 小老鼠偷面包
老马的程序人生
11-19 998
角色移动指定的步数，正数就是向前，负数就是向后。将角色移动到舞台中指定的X/Y坐标位置，默认坐标（x:0, y:0）。x的范围（-240, 240）；y的范围（-180, 180）。将角色在规定的时间内滑行到舞台中央指定的X/Y坐标位置。将角色朝向某个指定的方向。通常用作控制角色在舞台中的上下左右朝向。即0朝上，90朝右（默认），180朝下，-90朝左。设定角色旋转方式为“左右翻转”，下拉可选“不可旋转”，“任意旋转”。
Flutter自定义背景色渐变 按钮 组件
HMF的博客
04-14 2545
这是笔者写的第一个 Flutter 自定义组件，在这里和大家分享一下，可能稍微有点粗糙，就当学习使用。 首先我们先来看一下效果图： 代码： import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @overri...
android自定义圆盘方向按钮
06-07
使用Android完全自定义控件，继承自View，Canvas绘制。
自定义4方向按钮-封装类
08-06
网上一直找不到安卓4方向虚拟控制按钮，自己就写了一个，希望对大家有所帮助
android 自定义组合键,自定义快捷操作 安卓虚拟Home键设置技巧
weixin_29124423的博客
05-25 2242
用过iOS的朋友肯定知道它内建的虚拟Home键“AssistiveTouch”功能，除了能降低Home键的损耗以外，还有很多方便的快捷功能。今天给大家介绍一款安卓系统上的辅助快捷APP，不但有“AssistiveTouch”的全部功能，更可以自定义快捷键。这款APP名叫《Floating Toucher》使用起来非常简单，安装好以后直接启动就会进入设置界面。默认功能有Home键、锁屏、清理内存和快...
摄像头方向键，上下左右方向键，十字方向键 （html/css）
zsms1314的博客
02-21 1379
效果图 <!DOCTYPE html> <html> <head> <style type="text/css"> .camera_direction{ /*background-color: sandybrown;*/ text-align: center; position: absolute; /*top: 0%;*/ width: 300px; height: 300px; }
Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色)
Zho-J的博客
01-05 2337
Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色) Canvas背景设置 前端刚入门的小白在开发中遇到一个需求：点击按钮切换canvas的背景，要求是从纯色到渐变，渐变到纯色。开发的时候发现初始设置为渐变是有效的，但是从纯色切换到渐变的时候，canvas的背景是没有反应的。纠结了好久，最后将纯色也设置为渐变（从黑色渐变到黑色，从白色渐变到白色） 1.在css中声明background背景（将纯色也设置为渐变的类型，但是是从纯色渐变到纯色。如下：） CSS代码 canvas {
QT 设置按钮QPushButton 圆角、渐变色背景、背景图片、鼠标放上去、鼠标按下效果、透明背景
热门推荐
zcc的博客
07-13 2万+
设置按钮圆角、渐变色背景、背景图片、鼠标放上去、鼠标按下效果、透明背景。效果： 一、设置四角圆角：二、设置下、左圆角按钮鼠标放上去改变背景色 三、设置上、右圆角 四、按钮设置背景图片，鼠标放上去、按下 更换背景图： 默认background-image 不会缩放图片以适应控件的大小，背景图片以自动适应控件大小使用： border-image: url(:/images/pageBg.png);五、渐变背景色按钮： 六、透明背景...
自定义View之渐变色进度条
09-11
进度条的背景颜色和前景颜色可以通过设置Paint的color属性来改变，但渐变色则需要创建一个新的Paint对象，并设置其Shader属性为创建好的线性渐变实例。同时，我们还需要处理进度条的宽度和高度，这可能涉及到测量...
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果
01-07
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果，不适用一张图片实现！ 具体思路：http://blog.csdn.net/springsky_/article/details/17954765
css绘制八方向云台 环形按钮盘
凉酱的博客
11-24 4019
翻了很多帖子，最终基于https://blog.csdn.net/zhangtff/article/details/89458797的文章，使用css绘制出八方向用来控制摄像机等的按钮盘，于此记录。 效果图大致如下图，用到的图片还没找美工做，自己随便找的。 用到了一个圆形背景图片，一个向上的箭头图片，一个回复图片。 代码部分如下 <template> <el-card class="box-card"> <ul class='pie'>
几款很漂亮的CSS控制的按钮样式
乌鸦的博客
12-07 1015
<!--.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
CSS-仿遥控器按钮
dahuilanq1990的博客
05-07 4443
最近做一个控制扫地机器人前进后退向左向右的功能，整理了一个html和css代码。 效果图： HTML： <div class="control-wrapper"> <div class="control-btn control-top"> <i class="fa fa-chevron-up"></i> ...
QT5自定义中英文虚拟键盘
小众的博客
11-16 6166
1：调用极为方便，在pro文件里，指定lib库（dwkeyboard），包含头文件（#include “KeyboardGlobal.h” ）程序初始化调用GlobalInit()函数，在需要设置键盘输入的控件上绑定事件 如:textEdit-&amp;amp;amp;gt;installEventFilter(this);即可。 2：界面清晰简洁，UI美观友好，非常适合触摸设备。 3：同时支持实体键盘输入+鼠标单击输入...
Android 总结：自定义键盘实现原理和三种实例详解
Android 小生的博客
11-29 1万+
一、实现原理 实现软键盘主要用到了系统的两个类 Keyboard 和 KeyboardView . 1. Keyboard 用于监听虚拟键盘： Loads an XML description of a keyboard and stores the attributes of the keys. A keyboard consists of rows of keys . Th
带罗盘按扭（八个方向按扭）的摄像头云台控件
哈哈 哈 哈哈，哈 哈 哈哈哈
05-23 3758
PtzControl.h 云台控制控件，包含八个调整方向按扭（分别为上、下、左、右、左上、左下、右上、右下） 和六个调焦、放大按扭（分别为焦距+、焦距－、光学放大、光学缩小、光圈+、光圈－）；
自定义虚拟数字键盘
weixin_42262436的博客
07-17 1125
可以自定义的键盘，也可以使用现成的组件， https://github.com/viclm/numeric-keyboard
USB按键板（支持最多10个自定义模拟键盘按键）发布！
bona020的专栏
08-27 3616
主要用于医疗设备 工厂设备 游戏领域 自定义小键盘 板子链接（自行接按键或脚踏开关）： https://item.taobao.com/item.htm?spm=a1z10.3-c.w4002-951511554.9.7b1f1349fm7Cjs&id=586119011877 ...
51单片机控制led渐变两个按键一个控制变亮一个控制变暗
最新发布
05-12
1. 初始化IO口，将LED的IO口设置为输出，将两个按键的IO口设置为输入。 2. 在主循环中，不断读取按键的状态，判断是“变亮”按键还是“变暗”按键被按下。 3. 如果是“变亮”按键被按下，那么逐渐增加LED的亮度...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值