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月前
|
XML Java Android开发
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
776 0
|
6月前
|
Python
小项目 | 基于 Pygame 自制一个背景优美的 MP3 播放器
小项目 | 基于 Pygame 自制一个背景优美的 MP3 播放器
小项目 | 基于 Pygame 自制一个背景优美的 MP3 播放器
|
6月前
|
前端开发 小程序
【微信小程序5】利用canvas实现纯色背景抠图功能
【微信小程序5】利用canvas实现纯色背景抠图功能
299 0
|
小程序
背景音频制作
背景音频制作
59 0
|
图形学
【游戏开发】unity透明特效的制作方法
Unity是一种强大的游戏开发引擎,它支持许多不同的特效和图形效果。其中一种常用的特效是透明特效,它可以使游戏中的材质变得半透明或完全透明。在本文中,我们将介绍如何使用Unity创建透明特效。
|
Python
Python实现超级玛丽游戏系列教程04背景滚动及摄像机(Camera)原理
Python实现超级玛丽游戏系列教程04背景滚动及摄像机(Camera)原理
107 0
|
iOS开发 MacOS Windows
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
646 0
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
|
机器学习/深度学习 算法
图像滤镜艺术---美颜相机之高级柔焦效果实现
原文:图像滤镜艺术---美颜相机之高级柔焦效果实现 今天给大家讲解一下,如何实现美颜相机中的高级柔焦效果,首先先看下美颜相机中这个功能的效果图: 图1 原图(图片来自网络,如有侵权敬请告知) 图2 美颜相机高级柔焦模版 图3 马赛克效果 图4,动感模糊效果 以上图3和4是两种柔焦的效果,很不错,今天我将用C来实现这个算法。
2326 0
|
C# 计算机视觉 Shell
Win8 Metro(C#)数字图像处理--2.73一种背景图像融合特效
原文:Win8 Metro(C#)数字图像处理--2.73一种背景图像融合特效 /// /// Image merge process.
878 0
|
JSON 前端开发 数据格式
【UWP开源】图片编辑器,带贴图、滤镜、涂鸦等功能
原文:【UWP开源】图片编辑器,带贴图、滤镜、涂鸦等功能 目录 说明 功能 实现原理 使用方法 效果截图   说明 最近空余时间研究了一下Win2D,它能为我们在UWP中提供一种类似GDI那样的绘图方法。
1948 0