使用情景
给孩子画个圆
效果展示
autojs版本号
原理
- canvas绘制bitmap
- 我们在bitmap上 画圆
- 画12个圆, 画一个, 画布旋转30度
知识点
- 测量画布宽高的时机
- 画笔的参数设置
- 生成bitmap
- 生成canvas
- 监听画布的ondraw事件
- 设置画布的背景
- canvas画字
- 生成rectf
- 生成随机颜色
- canvas画圆弧
- 画布的旋转
代码讲解
- 导入类
importClass(android.graphics.RectF); importClass(android.graphics.Paint); importClass(android.graphics.Bitmap);
- 布局
ui.layout( <vertical> <canvas id="board" w="*" h="*"></canvas> </vertical> );
- 等界面加载完毕, 再开始画圆
setTimeout(draw, 100);
- 初始化参数
mPaint = new Paint(); mPaint.setStrokeWidth(10); var color = "#00ff00"; color = colors.parseColor(color); mPaint.setColor(color); mPaint.setStrokeWidth(10); // 设置圆环的宽度 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setStyle(Paint.Style.STROKE); // 设置空心 let radius = 200; let mProgress = 0; let isDrawCircle = true; let mSpeed = 2; var bitmap;
- 启用draw方法
function draw() { let viewWidth = board.getWidth(); let viewHeight = board.getHeight(); bitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.ARGB_8888); var mCanvas = new Canvas(bitmap); ui.board.on("draw", function (canvas) { canvas.drawBitmap(bitmap, 0, 0, mPaint); }); threads.start(function () { 画十二个圆形(mCanvas); }); }
- 设置背景
canvas.drawARGB(255, 123, 104, 238);
- 画12个圆
for (var i = 0; i < 12; i++) { let oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 用于定义的圆弧的形状和大小的界限 while (1) { if (mProgress > 360) { mProgress = 0; let color = getRandomColor(); if (启用随机颜色) { mPaint.setColor(color); } break; } else { canvas.drawArc(oval, 90, mProgress, false, mPaint); // 根据进度画圆弧 sleep(mSpeed); //通过传递过来的速度参数来决定线程休眠的时间从而达到绘制速度的快慢 } mProgress += 1; } canvas.rotate(30, center, center + radius); }
