autojs画正弦曲线

autojs 正弦 曲线

牙叔教程 简单易学

使用场景

绘制正弦曲线

效果展示

autojs版本

代码讲解

1. 导入类

importClass(android.graphics.Paint);
importClass(android.graphics.Path);

2. 布局

ui.layout(
  <vertical gravity="center">
    <canvas id="board" w="{{device.width}}px" h="230dp"></canvas>
    <text textSize="26sp" textStyle="bold" gravity="center" textColor="#1abc9c">
      牙叔教程 简单易学
    </text>

    <horizontal margin="10">
      <text textSize="30sp" h="50dp" textStyle="bold" text="k: "></text>
      <text id="kNumber" textSize="30sp" h="50dp" textStyle="bold"></text>
      <seekbar id="kSeekbar" w="*" h="50dp" max="10" />
    </horizontal>
  </vertical>
);

3. 设置画笔属性

let mPaint = new Paint();
mPaint.setColor(colors.parseColor("#888888"));
mPaint.setStrokeWidth(5); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
// mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setStyle(Paint.Style.FILL);

4. 定义一些全局变量

let board = ui.board;
let mPath = new Path();
let k = 1;
let bw;
let bh;
let cellWidth = 60;
let tickLength = cellWidth / 3;

5. 设置颜色

let color = {
  axis: "#1abc9c",
  tickMark: "#2c3e50",
  number: "#2f3542",
  curve: "#1e90ff",
};

6. 设置滑块监听

let kSeekbarListener = new android.widget.SeekBar.OnSeekBarChangeListener({
  onProgressChanged: function (seekbar, progress, fromUser) {
    k = progress;
    ui.kNumber.setText(progress + "");
  },
});
ui.kSeekbar.setOnSeekBarChangeListener(kSeekbarListener);

ui.post(function () {
  ui.kSeekbar.progress = k;
});

7. 绘制曲线的整体逻辑

function draw() {
  bw = board.getWidth();
  bh = board.getHeight();
  board.on("draw", function (canvas) {
    canvas.drawARGB(255, 230, 230, 230);
    drawXAxis(canvas);
    drawYAxis(canvas);
    drawXScale(canvas);
    drawYScale(canvas);
    drawCurve(canvas);
  });
}

8. 画坐标轴

function drawYAxis(canvas) {
  mPaint.setStrokeWidth(5);
  setPaintColor(color.axis);
  let point1 = {
    x: bw / 2,
    y: 0,
  };
  let point2 = {
    x: bw / 2,
    y: bh,
  };
  drawLine2Point(point1, point2, canvas);
}

9. 画刻度线

function drawTickMark(point1, point2, canvas) {
  setPaintColor(color.tickMark);
  mPaint.setStrokeWidth(3);
  drawLine2Point(point1, point2, canvas);
}

10. 画刻度值

function drawText(value, 参考点, canvas) {
  setPaintColor(color.number);
  mPaint.setStyle(Paint.Style.FILL);
  mPaint.setTextAlign(Paint.Align.CENTER);
  mPaint.setTextSize(30);
  mPaint.setStrokeWidth(2);
  let fontMetrics = mPaint.getFontMetrics();
  let fontHeight = fontMetrics.bottom - fontMetrics.top;
  canvas.drawText(value, 参考点.x, 参考点.y + fontHeight, mPaint);
}

11. 画曲线

function drawCurveRight(canvas) {
  mPath.reset();

  let bwHalf = bw / 2;
  let bhHalf = bh / 2;
  let segmentLength = bwHalf / cellWidth;
  let currentX = 0;
  let step = 0.2;
  let pointList = [];
  while (currentX <= segmentLength) {
    let currentY = k * Math.sin(currentX);
    pointList.push({ x: bwHalf + currentX * cellWidth, y: bhHalf - currentY * cellWidth });
    currentX += step;
  }
  mPath.moveTo(pointList[0].x, pointList[0].y);
  var len = pointList.length;
  for (let i = 0; i < len; i++) {
    mPath.lineTo(pointList[i].x, pointList[i].y);
  }

  setPaintColor(color.curve);
  // mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  // mPaint.setStyle(Paint.Style.FILL);
  mPaint.setStyle(Paint.Style.STROKE);
  canvas.drawPath(mPath, mPaint);
}

完整源码

参考文章

1. android canvas drawText()文字居中

声明

部分内容来自网络

微信公众号 AutoJsPro教程

QQ群

747748653