autojs画六边形

最新推荐文章于 2024-08-14 04:31:39 发布

原创

最新推荐文章于 2024-08-14 04:31:39 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#autojs #六边形 #node.js

本文介绍如何使用Node.js UI库创建六边形网格布局，并详细解释了计算六边形坐标、绘制六边形及扩展到多排六边形的全过程。

牙叔教程简单易懂

界面基础代码

"nodejs ui";
require("rhino").install();
const ui = require("ui");
class MainActivity extends ui.Activity {
  constructor() {
    super();
  }
  get layoutXmlFile() {
    return "layout.xml";
  }
  onContentViewSet() {}
}
ui.setMainActivity(MainActivity);

创建Hexagon类

class Hexagon {}

至于需要的属性, 有需求的时候再写

界面布局

<column>
	<canvas id="canvas" w="*" h="*">
	</canvas>
</column>

画板事件

  onContentViewSet(view) {
    const canvasView = view.binding.canvas;
    canvasView.on("draw", (canvas) => {
      canvas.drawColor(canvasBgColor);
    });
  }

计算并绘制六边形中心点

let canvasWidth = canvasView.getWidth();
let canvasHeight = canvasView.getHeight();
let centerX = canvasWidth / 2;
let centerY = canvasHeight / 2;
canvasView.on("draw", (canvas) => {
  canvas.drawColor(canvasBgColor);
  canvas.drawPoint(centerX, centerY, paint);
});

计算六边形六个点的坐标

这个方法应该属于六边形这个类

  getSixPoints() {
    let points = [];
    let angle = 0;
    for (let i = 0; i < 6; i++) {
      let x = this.centerX + this.sideLength * Math.cos(angle);
      let y = this.centerY - this.sideLength * Math.sin(angle);
      points.push({ x, y });
      angle += Math.PI / 3;
    }
    return points;
  }

计算六边形的path

这个也属于六边形的方法

  getPath() {
    const path = new Path();
    let points = this.getSixPoints();
    path.moveTo(points[0].x, points[0].y);

最低0.47元/天解锁文章