autojs量角器-相机背景

简介: 牙叔教程 简单易懂

牙叔教程 简单易懂


界面展示


环境


手机: Mi 11 Pro


Android版本: 12


Autojs版本: 9.1.6


你将学到以下知识点


  • 全屏
  • 相机的基本使用
  • canvas画线, 画圆
  • canvas裁剪
  • canvas平移旋转
  • 两条线计算夹角


代码讲解


1. ui界面
ui.layout(
  <frame fitsSystemWindows="false" id="parentView">
    <Camera2View id="camera2_view" layout_width="match_parent" layout_height="match_parent" />
    <canvas id="board" w="*" h="*"></canvas>
  </frame>
);


帧布局, 底层是相机背景, 上层是画板canvas


2. 触摸监听, 更新角度
function getTouchListener() {
  let touchListener = function (view, event) {
    let x = event.getX();
    let y = event.getY();
    touchX = x;
    touchY = y;
    angle = parseInt(get2PointAngle({ x: 0, y: circle.y - circle.radius }, { x: x, y: y }, { x: 0, y: circle.y }));
    return true;
  };
  return touchListener;
}


3. 显示半圆, 半圆之外, 模糊背景
path.addCircle(circle.x, circle.y, circle.radius, circle.dir);
canvas.clipPath(path, Region.Op.DIFFERENCE);


4. 绘制顺序
board.on("draw", (canvas) => {
  canvas.save();
  canvas.clipPath(path, Region.Op.DIFFERENCE);
  canvas.drawColor(colors.parseColor(config.mainColor));
  canvas.restore();
  drawScale(canvas);
  drawSlideBar(canvas);
  drawValueDisplayArea(canvas);
});


绘制半圆--> 绘制刻度--> 绘制滑杆--> 绘制角度数值


5. 绘制角度
function drawValueDisplayArea(canvas) {
  let circle = config.circle;
  let x = circle.x + circle.radius / 2;
  let y = circle.y;
  let radius = circle.radius / 9;
  canvas.drawCircle(x, y, radius, ValueDisplayAreaPaint);
  canvas.save();
  canvas.translate(x, y);
  canvas.rotate(90);
  canvas.drawText(angle + "", 0, ValueDisplayAreaTextHeight / 2, config.ValueDisplayAreaTextPaint);
  canvas.restore();
}


绘制一个小圆, 作为角度数值的背景
canvas平移至小圆圆心
旋转90度, 因为我们的显示器是横屏
绘制文字, 让文字居中

6. 文字高度计算

ValueDisplayAreaTextPaint.setTextSize(70);
let rect = new Rect();
ValueDisplayAreaTextPaint.getTextBounds("1", 0, 1, rect);
ValueDisplayAreaTextHeight = rect.height();



设置文字大小之后, 再去计算文字高度


相关教程

https://www.yuque.com/yashujs/bfug6u/nik4gl

https://www.yuque.com/yashujs/bfug6u/czc9oo

https://www.yuque.com/yashujs/bfug6u/yv4ycv

https://www.yuque.com/yashujs/bfug6u/mm354k

https://www.yuque.com/go/doc/60367733

https://www.yuque.com/go/doc/50488791


名人名言


思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程


声明


部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

相关文章
|
7天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
34475 17
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
19天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw:学生认证白嫖6个月阿里云服务器,手把手配置飞书机器人、接入免费/高性价比AI模型(NVIDIA/通义),并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿,5分钟完成热点→文章全流程!
45306 142
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
|
8天前
|
人工智能 JSON 监控
Claude Code 源码泄露:一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码,我发现自己错了。
4867 21
|
1天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
1931 6
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
7天前
|
人工智能 API 开发者
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到?最新解决方案
阿里云百炼Coding Plan Lite已停售,Pro版每日9:30限量抢购难度大。本文解析原因,并提供两大方案:①掌握技巧抢购Pro版;②直接使用百炼平台按量付费——新用户赠100万Tokens,支持Qwen3.5-Max等满血模型,灵活低成本。
1808 5
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到?最新解决方案