autojs之十二圆

本文主要是介绍autojs之十二圆，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用情景

 

给孩子画个圆

 

效果展示

 

 

 

autojs版本号

 

原理

 

1. canvas绘制bitmap

2. 我们在bitmap上 画圆

3. 画12个圆, 画一个, 画布旋转30度

 

知识点

 

1. 测量画布宽高的时机

2. 画笔的参数设置

3. 生成bitmap

 

1. 生成canvas

2. 监听画布的ondraw事件

3. 设置画布的背景

 

1. canvas画字

2. 生成rectf

3. 生成随机颜色

 

1. canvas画圆弧

2. 画布的旋转

 

代码讲解

 

1. 导入类

importClass(android.graphics.RectF);
importClass(android.graphics.Paint);
importClass(android.graphics.Bitmap);

 

2. 布局

ui.layout(<vertical><canvas id="board" w="*" h="*"></canvas></vertical>
);

 

3. 等界面加载完毕, 再开始画圆

setTimeout(draw, 100);

 

4.  初始化参数

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;

 

5. 启用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);});
}

 

6. 设置背景

canvas.drawARGB(255, 123, 104, 238);

 

7. 画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);
}

​

 

点击查看源码

 

 

微信公众号 AutoJsPro教程

 

QQ群

 

747748653

 

 

这篇关于autojs之十二圆的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---