Hamibot 文档

深色模式

Canvas ​

canvas 提供了使用画布进行 2D 画图的支持，可用于简单的小游戏开发或者图片编辑。使用 canvas 可以轻松地在一张图片或一个界面上绘制各种线与图形。

canvas 的坐标系为平面直角坐标系，以控件左上角为原点，控件上边沿为 x 轴正方向，控件左边沿为 y 轴正方向。例如分辨率为 1920*1080 的屏幕上，canvas 控件覆盖全屏，画一条从屏幕左上角到屏幕右下角的线段为:

js
canvas.drawLine(0, 0, 1080, 1920, paint);

canvas 的绘制依赖于画笔 Paint, 通过设置画笔的粗细、颜色、填充等可以改变绘制出来的图形。例如绘制一个红色实心正方形为：

js
var paint = new Paint();
//设置画笔为填充，则绘制出来的图形都是实心的
paint.setStyle(Paint.STYLE.FILL);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);

如果要绘制正方形的边框，则通过设置画笔的 Style 来实现：

js
var paint = new Paint();
//设置画笔为描边，则绘制出来的图形都是轮廓
paint.setStyle(Paint.STYLE.STROKE);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);

结合画笔，canvas 可以绘制基本图形、图片等。

例子：把控件边缘描绘在屏幕上 ​

详细说明参见：https://hamibot.cn/articles/66b5b7cf2e350cbf16867eef

js
auto.waitFor(); // 文档地址：https://docs.hamibot.com/reference/widgetsBasedAutomation
let bounds = text('日志').findOne().bounds();
log(bounds);
// 获取状态栏高度
let statusBarHeight = context
  .getResources()
  .getDimensionPixelSize(
    context
      .getResources()
      .getIdentifier('status_bar_height', 'dimen', 'android')
  );
let window = floaty.rawWindow(<canvas id="canvas" />);
window.setSize(-1, -1); // 全屏
window.setPosition(0, -statusBarHeight);
window.setTouchable(false);
setInterval(() => {}, 1000);
let paint = new Paint();
paint.setStyle(Paint.Style.STROKE); // 我们是想描边，因此设置为 STROKE
paint.setStrokeWidth(6); // 为了看起来明显一些，我们用粗一些的线
paint['setColor(int)'](colors.parseColor('#00ff00')); // 这里用绿色
window.canvas.on('draw', function (canvas) {
  canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.bottom, paint);
});

canvas.getWidth() ​

  • 返回 <Number>

返回画布当前图层的宽度。

canvas.getHeight() ​

  • 返回 <Number>

返回画布当前图层的高度。

canvas.drawRGB(r, int g, int b) ​

  • r <Number> 红色通道值
  • g <Number> 绿色通道值
  • b <Number> 蓝色通道值

将整个可绘制区域填充为 r、g、b 指定的颜色。相当于 canvas.drawColor(colors.rgb(r, g, b))。

canvas.drawARGB(a, r, g, b) ​

  • a <Number> 透明通道值
  • r <Number> 红色通道值
  • g <Number> 绿色通道值
  • b <Number> 蓝色通道值

将整个可绘制区域填充为 a、r、g、b 指定的颜色。相当于 canvas.drawColor(colors.argb(a, r, g, b))。

canvas.drawColor(color) ​

  • color <Number> 颜色值

将整个可绘制区域填充为 color 指定的颜色。

canvas.drawColor(color, mode) ​

  • color <Number> 颜色值
  • mode <PorterDuff.Mode> Porter-Duff 操作

将整个可绘制区域填充为 color 指定的颜色。

canvas.drawPaint(paint) ​

  • paint <Paint> 画笔

将整个可绘制区域用 paint 指定的画笔填充。相当于绘制一个无限大的矩形，但是更快。 通过该方法可以绘制一个指定的着色器的图案。

canvas.drawPoint(x, y, paint) ​

  • x <Number> x 坐标
  • y <Number> y 坐标
  • paint <Paint> 画笔

在可绘制区域绘制由坐标(x, y)指定的点。 点的形状由画笔的线帽决定（参见 paint.setStrokeCap(cap)）。 点的大小由画笔的宽度决定（参见 paint.setStrokeWidth(width)）。

如果画笔宽度为 0，则也会绘制 1 个像素至 4 个（若抗锯齿启用）。

相当于 canvas.drawPoints([x, y], paint)。

canvas.drawPoints(pts, paint) ​

  • pts <Array> 点坐标数组 [x0, y0, x1, y1, x2, y2, ...]
  • paint <Paint> 画笔

在可绘制区域绘制由坐标数组指定的多个点。

canvas.drawLine(startX, startY, stopX, stopY, paint) ​

  • startX <Number> 起点 x 坐标
  • startY <Number> 起点 y 坐标
  • endX <Number> 终点 x 坐标
  • endY <Number> 终点 y 坐标
  • paint <Paint> 画笔

在可绘制区域绘制由起点坐标(startX, startY)和终点坐标(endX, endY)指定的线。 绘制时会忽略画笔的样式(Style)。也就是说，即使样式设为“仅填充(FILL)”也会绘制。 退化为点的线（长度为 0）不会被绘制。

canvas.drawRect(r, paint) ​

  • r <Rect> 矩形边界
  • paint <Paint> 画笔

在可绘制区域绘制由矩形边界 r 指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。

canvas.drawRect(left, top, right, bottom, android.graphics.Paint paint) ​

  • left <Number> 矩形左边界 x 坐标
  • top <Number> 矩形上边界 y 坐标
  • right <Number> 矩形右边界 x 坐标
  • bottom <Number> 矩形下边界 y 坐标
  • paint <Paint> 画笔

在可绘制区域绘制由矩形边界(left, top, right, bottom)指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。

canvas.drawOval(android.graphics.RectF oval, android.graphics.Paint paint) ​

canvas.drawOval(float left, float top, float right, float bottom, android.graphics.Paint paint) ​

canvas.drawCircle(float cx, float cy, float radius, android.graphics.Paint paint) ​

canvas.drawArc(android.graphics.RectF oval, float startAngle, float sweepAngle, boolean useCenter, android.graphics.Paint paint) ​

canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, android.graphics.Paint paint) ​

canvas.drawRoundRect(android.graphics.RectF rect, float rx, float ry, android.graphics.Paint paint) ​

canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, android.graphics.Paint paint) ​

canvas.drawPath(android.graphics.Path path, android.graphics.Paint paint) ​

canvas.drawBitmap(android.graphics.Bitmap bitmap, float left, float top, android.graphics.Paint paint) ​

canvas.drawText(java.lang.String text, float x, float y, android.graphics.Paint paint) ​

canvas.drawTextOnPath(java.lang.String text, android.graphics.Path path, float hOffset, float vOffset, android.graphics.Paint paint) ​

canvas.translate(dx, dy) ​

  • dx <Number> 向 x 轴正方向平移的距离，负数表示反方向平移
  • dy <Number> 向 y 轴正方向平移的距离，负数表示反方向平移

平移指定距离。

canvas.scale(sx, sy) ​

  • sx <Number> 向 x 轴正方向平移的距离，负数表示反方向平移
  • sy <Number> 向 y 轴正方向平移的距离，负数表示反方向平移

以原点为中心，将坐标系平移缩放指定倍数。

canvas.scale(float sx, float sy, float px, float py) ​

canvas.rotate(float degrees) ​

canvas.rotate(float degrees, float px, float py) ​

canvas.skew(float sx, float sy) ​

画笔 ​

变换矩阵 ​

路径 ​

Porter-Duff 操作 ​

着色器 ​

遮罩过滤器 ​

颜色过滤器 ​

路径特效 ​

区域 ​

Copyright © Hamibot