android利用canvas画线 及点击移动

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
public class DrawView extends View {  
  
    public DrawView(Context context) {  
        super(context);  
    }  
  
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
         
        // 创建画笔  
        Paint p = new Paint();  
        p.setColor(Color.RED);// 设置红色  
  
        canvas.drawText("画圆:", 10, 20, p);// 画文本  
        canvas.drawCircle(60, 20, 10, p);// 小圆  
        p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除,大家一看效果就明白了  
        canvas.drawCircle(120, 20, 20, p);// 大圆  
  
        canvas.drawText("画线及弧线:", 10, 60, p);  
        p.setColor(Color.GREEN);// 设置绿色  
        canvas.drawLine(60, 40, 100, 40, p);// 画线  
        canvas.drawLine(110, 40, 190, 80, p);// 斜线  
        //画笑脸弧线  
        p.setStyle(Paint.Style.STROKE);//设置空心  
        RectF oval1=new RectF(150,20,180,40);  
        canvas.drawArc(oval1, 180, 180, false, p);//小弧形  
        oval1.set(190, 20, 220, 40);  
        canvas.drawArc(oval1, 180, 180, false, p);//小弧形  
        oval1.set(160, 30, 210, 60);  
        canvas.drawArc(oval1, 0, 180, false, p);//小弧形  
  
        canvas.drawText("画矩形:", 10, 80, p);  
        p.setColor(Color.GRAY);// 设置灰色  
        p.setStyle(Paint.Style.FILL);//设置填满  
        canvas.drawRect(60, 60, 80, 80, p);// 正方形  
        canvas.drawRect(60, 90, 160, 100, p);// 长方形  
  
        canvas.drawText("画扇形和椭圆:", 10, 120, p);  
         
        Shader mShader = new LinearGradient(0, 0, 100, 100,  
                new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,  
                        Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。  
        p.setShader(mShader);  
        // p.setColor(Color.BLUE);  
        RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形,扫描测量  
        canvas.drawArc(oval2, 200, 130, true, p);  
        // 画弧,第一个参数是RectF:该类是第二个参数是角度的开始,第三个参数是多少度,第四个参数是真的时候画扇形,是假的时候画弧线  
        //画椭圆,把oval改一下  
        oval2.set(210,100,250,130);  
        canvas.drawOval(oval2, p);  
  
        canvas.drawText("画三角形:", 10, 200, p);  
        // 绘制这个三角形,你可以绘制任意多边形  
        Path path = new Path();  
        path.moveTo(80, 200);// 此点为多边形的起点  
        path.lineTo(120, 250);  
        path.lineTo(80, 250);  
        path.close(); // 使这些点构成封闭的多边形  
        canvas.drawPath(path, p);  
  
        // 你可以绘制很多任意多边形,比如下面画六连形  
        p.reset();//重置  
        p.setColor(Color.LTGRAY);  
        p.setStyle(Paint.Style.STROKE);//设置空心  
        Path path1=new Path();  
        path1.moveTo(180, 200);  
        path1.lineTo(200, 200);  
        path1.lineTo(210, 210);  
        path1.lineTo(200, 220);  
        path1.lineTo(180, 220);  
        path1.lineTo(170, 210);  
        path1.close();//封闭  
        canvas.drawPath(path1, p);  
         
          
        //画圆角矩形  
        p.setStyle(Paint.Style.FILL);//充满  
        p.setColor(Color.LTGRAY);  
        p.setAntiAlias(true);// 设置画笔的锯齿效果  
        canvas.drawText("画圆角矩形:", 10, 260, p);  
        RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形  
        canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径,第三个参数是y半径  
          
        //画贝塞尔曲线  
        canvas.drawText("画贝塞尔曲线:", 10, 310, p);  
        p.reset();  
        p.setStyle(Paint.Style.STROKE);  
        p.setColor(Color.GREEN);  
        Path path2=new Path();  
        path2.moveTo(100, 320);//设置Path的起点  
        path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标  
        canvas.drawPath(path2, p);//画出贝塞尔曲线  
          
        //画点  
        p.setStyle(Paint.Style.FILL);  
        canvas.drawText("画点:", 10, 390, p);  
        canvas.drawPoint(60, 390, p);//画一个点  
        canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点  
          
        //画图片,就是贴图  
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
        canvas.drawBitmap(bitmap, 250,360, p);  
    }  
//点哪显示哪  移动
@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
        x= (int) event.getX();
        y= (int) event.getY();
        break;

        case  MotionEvent.ACTION_MOVE:
            x = (int) event.getX();
            y = (int) event.getY();
            break;

        case MotionEvent.ACTION_UP:
            x = (int) event.getX();
            y = (int) event.getY();
            break;
    }

    //重新绘制, 只要调用此方法,就会调用onDraw()

    // invalidate();  只能在主线程里面去调用,不能在子线程里面去调用

    //既能在主线程里面去调用,也能在子线程里面去调用
    postInvalidate();


    //事件自己消费掉
    return true;

}

}  
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现在 Canvas点击画线并可以移动和缩放的功能: 1. 定义一个数组用于保存所有画的线段,比如 `lines`; 2. 给 Canvas 添加 `mousedown` 事件监听器,当用户点击鼠标时,记录下鼠标的起始位置,并画一条从起始位置到起始位置的线段(这样可以让用户看到正在画线的过程); 3. 给 Canvas 添加 `mousemove` 事件监听器,当用户拖动鼠标时,根据当前位置和起始位置画一条线段,同时清除 Canvas 上的所有线段并重新画出 `lines` 数组中保存的所有线段; 4. 给 Canvas 添加 `mouseup` 事件监听器,当用户松开鼠标时,将当前画的线段保存到 `lines` 数组中,并将起始位置和当前位置都重置为 `(0, 0)`; 5. 给 Canvas 添加 `wheel` 事件监听器,当用户滚动鼠标滚轮时,根据滚动的方向缩放 Canvas。 下面是一个示例代码: ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const lines = []; let startX = 0, startY = 0, currX = 0, currY = 0; // 画一条直线 function drawLine(x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } // 清除 Canvas 并重新绘制所有线段 function redrawLines() { ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(line => drawLine(line[0], line[1], line[2], line[3])); } // 给 Canvas 添加鼠标事件监听器 canvas.addEventListener('mousedown', (e) => { startX = e.clientX - canvas.offsetLeft; startY = e.clientY - canvas.offsetTop; currX = startX; currY = startY; drawLine(startX, startY, currX, currY); }); canvas.addEventListener('mousemove', (e) => { if (startX === 0 && startY === 0) { return; } const x = e.clientX - canvas.offsetLeft; const y = e.clientY - canvas.offsetTop; currX = x; currY = y; redrawLines(); drawLine(startX, startY, currX, currY); }); canvas.addEventListener('mouseup', () => { lines.push([startX, startY, currX, currY]); startX = 0; startY = 0; currX = 0; currY = 0; }); canvas.addEventListener('wheel', (e) => { const delta = Math.sign(e.deltaY); const scaleFactor = delta > 0 ? 1.1 : 0.9; ctx.scale(scaleFactor, scaleFactor); redrawLines(); }); ``` 在这个示例中,我们定义了一个 `lines` 数组来保存所有画的线段;在 `mousedown` 事件监听器中记录下鼠标的起始位置并画出一条从起始位置到起始位置的线段;在 `mousemove` 事件监听器中根据当前位置和起始位置画一条线段,并清除 Canvas 并重新绘制所有线段;在 `mouseup` 事件监听器中将当前画的线段保存到 `lines` 数组中并重置起始位置和当前位置;在 `wheel` 事件监听器中根据滚轮的方向缩放 Canvas。 这个示例还比较简单,你可以根据自己的需求进行更改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值