五角形图片

原创 2015年11月19日 14:05:42

原理

        类似于圆形图片,都是将图片事在指定的模子中。

        首先计算出五角形外围五个点的坐标,通过直线连接,这样便可将五角形的区域给定住。再通过设置了BitmapShader的Paint将该路径画出即可。微信中发图片时图片会显示出一个尖角,也可以通过该种思路完成。

代码

public class DemoView extends View {

    private Paint paint;
    private Bitmap bitmap;

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

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

    public DemoView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.fengjing);
        setLayerType(LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//将可能非正方形变成正方形
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        switch (MeasureSpec.getMode(widthMeasureSpec)){
            case MeasureSpec.AT_MOST:
                widthSize = Math.min(widthSize,bitmap.getWidth());
                break;
            case MeasureSpec.UNSPECIFIED:
                widthSize = bitmap.getWidth();
                break;
        }
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        switch (MeasureSpec.getMode(heightMeasureSpec)){
            case MeasureSpec.AT_MOST:
                heightSize = Math.min(heightSize,bitmap.getHeight());
                break;
            case MeasureSpec.UNSPECIFIED:
                heightSize = bitmap.getHeight();
                break;
        }
        int size = Math.min(widthSize, heightSize);
        setMeasuredDimension(MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setTextSize(100);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Matrix matrix = new Matrix();
        matrix.preScale(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight());
        paint.setAntiAlias(true);
//        matrix.preTranslate(bitmap.getWidth() /2,bitmap.getHeight() /2);
        shader.setLocalMatrix(matrix);
        paint.setShader(shader);
        paint.setStyle(Paint.Style.FILL);
        Path path = new Path();
        PointF topPoint = getTopPoint();
        path.moveTo(topPoint.x, topPoint.y);
        PointF lb = getLB();
        path.lineTo(lb.x,lb.y);
        PointF rt = getRT();
        path.lineTo(rt.x,rt.y);
        PointF lt = getLT();
        path.lineTo(lt.x,lt.y);
        PointF rb = getRB();
        path.lineTo(rb.x,rb.y);
        path.close();
        canvas.drawPath(path,paint);
    }

    private float getLength() {//计算五角形边的长度
        return (float) (getWidth() * sin(36));
    }

    private PointF getTopPoint() {
        PointF pointF = new PointF();
        pointF.set(getWidth() / 2, 0);
        return pointF;
    }

    //left-top
    private PointF getLT() {
        PointF pointF = new PointF();
        pointF.set((getWidth() - getWidth() * (float) sin(72)) / 2, getWidth() * (float) sin(36) * (float) sin(36));
        return pointF;
    }

    //right-top
    private PointF getRT() {
        PointF pointF = new PointF();
        pointF.set((getWidth() + getWidth() * (float) sin(72)) / 2, getWidth() * (float) sin(36) * (float) sin(36));
        return pointF;
    }
    //right-bottom
    private PointF getRB() {
        PointF lt = getRT();
        PointF pointF = new PointF();
        pointF.set(lt.x - getLength() * (float)sin(18),lt.y + getLength() * (float)cos(18));
        return pointF;
    }
    //left-bottom
    private PointF getLB() {
        PointF lt = getLT();
        PointF pointF = new PointF();
        pointF.set(lt.x+getLength() * (float)sin(18),lt.y + getLength() * (float)cos(18));
        return pointF;
    }

    private double sin(double angle) {
        return Math.sin(Math.toRadians(angle));
    }

    private double cos(double angle) {
        return Math.cos(Math.toRadians(angle));
    }
}

注释

        主要是通过BitmapShader完成的绘制。任何形状的图形,只要先勾勒出区域,然后按BitmapShader方式进行绘制,都可以绘制到指定的形状。

版权声明:本文为博主原创文章,未经博主允许不得转载。

自定义View包含三角 和五角形

//代码部分 public class MyView extends View { private float radius=50; private Point cPoint;//圆...
  • hangge_
  • hangge_
  • 2017年03月10日 16:09
  • 78

android 五角星画法 五角星计算公式

计算依据,每个五角星的角度为36°,然后根据简单的勾股定理即可算出各个点的坐标,如下图所示 /** * @param xA 起始点位置A的x轴绝对位置 * @param ...
  • qq_15364915
  • qq_15364915
  • 2017年07月19日 18:15
  • 766

使用opengl绘制五角星图形

最近开始学习opengl的开发方法,专门下载了>电子书,当看到使用opengl绘制五角星实例时,发现示例代码有错误,绘制不出正确图形,并且与程序说明中提出的计算公式有出入。本人经过重新梳理概念,查阅了...
  • zyobeer
  • zyobeer
  • 2015年10月25日 13:30
  • 2544

第一讲:使用html5——canvas绘制奥运五环

初识canvas var canvas = document.getElementById('mc'); var ctx = canvas.getCon...
  • LIUMINGM900913
  • LIUMINGM900913
  • 2014年06月06日 11:52
  • 1890

python绘图等边三角形,五角星,奥运五环

python的干净简洁非常的吸引人,所以最近开始接触了一下python 刚开始学习了绘制一些简单图像。 首先等边三角形: 等边三角形刚开始用的是这种比较暴力的方式: 使得程序非...
  • lizhen0606
  • lizhen0606
  • 2017年08月04日 16:09
  • 1541

Android 图形:绘制渐变色奥运五环图形,游戏文字,验证码,Matrix旋转,缩放,倾斜,平移等

主要是涉及Android “图形图像技术”的基础知识 0.绘制以渐变色填充的矩形 1.绘制奥运五环 2.绘制游戏对白界面 3.绘制路径及绕路径文字 4.绘制Android的机器人 5.绘制彩色字符...
  • u014136472
  • u014136472
  • 2015年08月05日 14:32
  • 906

北京一环 二环 三环 四环 五环 六环 周长和面积

一环线 周长 16.9公里 环内面积 18平方公里二环线 周长 32.7公里 环内面积 62平方公里三环线 周长 48.3公里 环内面积 159平方公里四环线 周长 65.3公里 环内面积 302平方...
  • silentwolfyh
  • silentwolfyh
  • 2017年02月09日 16:35
  • 20537

input中加入图片的做法

有很多高大上的网站中都有这一做法。尤其是在登录页面,输入用户名和密码时加入小图标,看起来简单舒服。下面就列举一下我们公司中手机网站应用的截图:怎么样看起来还不错吧。下面直接上代码: inpu...
  • xmt1139057136
  • xmt1139057136
  • 2015年08月29日 10:28
  • 11705

dm800刷固件变砖恢复日记

经多次调用各种中、英文低版本串刷,都是在文件上传至机器内存,试图擦除机内flash时报错:Flashing failed (!!! 002 CRC failed),box will be unusab...
  • ybds88
  • ybds88
  • 2013年01月12日 22:14
  • 1385

JSON传输图片帮助类

JSON传输图片帮助类 (为什么这样做,是因为图片,通过IO操作之后获取的是byte[]字节数组,而JSON传输用的是String,所以需要转换为String,但是直接转换的话会因为,字符的编码...
  • mashihao123
  • mashihao123
  • 2015年12月29日 20:35
  • 3004
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:五角形图片
举报原因:
原因补充:

(最多只允许输入30个字)