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文档, 最后才是群里问问
--- 牙叔教程


声明


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

相关文章
|
6月前
|
数据可视化 图形学 开发者
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(上)
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例
661 1
|
6月前
|
图形学
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(下)
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例
161 0
|
5月前
动态人物抠图换背景 MediaPipe
动态人物抠图换背景 MediaPipe
|
6月前
|
图形学 Android开发
【实现100个unity特效之6】Unity2d光源的使用
【实现100个unity特效之6】Unity2d光源的使用
67 0
|
7月前
|
前端开发 小程序
【微信小程序5】利用canvas实现纯色背景抠图功能
【微信小程序5】利用canvas实现纯色背景抠图功能
362 0
|
小程序
背景音频制作
背景音频制作
66 0
|
图形学
【游戏开发】unity透明特效的制作方法
Unity是一种强大的游戏开发引擎,它支持许多不同的特效和图形效果。其中一种常用的特效是透明特效,它可以使游戏中的材质变得半透明或完全透明。在本文中,我们将介绍如何使用Unity创建透明特效。
|
前端开发 Android开发
autojs自定义控件-移动背景
我们把背景看成一个小球, 小球可以在某个空间内自由移动, 他需要一个目标的坐标信息, 然后需要一个从当前的起点, 到目标点的移动规则, 小球也可以在移动的时候变换形态, 比如圆形, 椭圆, 圆角矩形等
14542 0
|
vr&ar 图形学 Windows
【Unity3D 灵巧小知识点】☀️ | Unity 中 怎样切换 天空盒 背景
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
【Unity3D 灵巧小知识点】☀️ | Unity 中 怎样切换 天空盒 背景
|
C# 计算机视觉 Shell
Win8 Metro(C#)数字图像处理--2.73一种背景图像融合特效
原文:Win8 Metro(C#)数字图像处理--2.73一种背景图像融合特效 /// /// Image merge process.
883 0