autojs之十二圆

最新推荐文章于 2024-02-02 01:33:40 发布

原创最新推荐文章于 2024-02-02 01:33:40 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#autojs #canvas

autojs 同时被 2 个专栏收录

193 篇文章

订阅专栏

canvas

16 篇文章

订阅专栏

使用情景

给孩子画个圆

效果展示

canvas慢慢画圆

autojs版本号

原理

canvas绘制bitmap
我们在bitmap上画圆
画12个圆, 画一个, 画布旋转30度

知识点

测量画布宽高的时机
画笔的参数设置
生成bitmap

生成canvas
监听画布的ondraw事件
设置画布的背景

canvas画字
生成rectf
生成随机颜色

canvas画圆弧
画布的旋转

代码讲解

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