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

 

 

已标记关键词 清除标记
相关推荐
<p> <span style="color:#4d4d4d;">当前课程中博客项目的实战源码是我在 GitHub上开源项目 My-Blog,目前已有 2000 多个 star:</span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdnimg.cn/202103310649344285.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,<span style="color:#565656;">通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你可以根据自己的需求和想法进行改造,也可以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。</span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong>课程特色</strong></span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong> </strong></span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <ol> <li> <span style="color:#565656;">课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。</span> </li> <li> <span style="color:#565656;">开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。</span> </li> <li> <span style="color:#565656;">实践项目页面美观且实用,交互效果完美。</span> </li> <li> <span style="color:#565656;">包含从零搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。</span> </li> <li> <span style="color:#565656;">技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。</span> </li> </ol> <p> <strong>实战项目预览</strong> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"><span style="color:#e53333;"><strong> </strong></span></span></span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150303066258.png" alt="" /><br /> </span> </p> <p>   </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305396930.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305528842.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150306056323.png" alt="" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页