Skip to content

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 操作

着色器

遮罩过滤器

颜色过滤器

路径特效

区域