autojs之十二圆

使用情景

 

给孩子画个圆

 

效果展示

 

canvas慢慢画圆

 

 

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