autojs繪畫實現(xiàn)六邊形示例詳解

更新時間：2023年01月31日 09:29:17 作者：牙叔教程

這篇文章主要為大家介紹了autojs繪畫實現(xiàn)六邊形示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

界面基礎(chǔ)代碼

"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);

創(chuàng)建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);
});

計算六邊形六個點的坐標(biāo)

這個方法應(yīng)該屬于六邊形這個類

  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);
    for (let i = 1; i &lt; points.length; i++) {
      path.lineTo(points[i].x, points[i].y);
    }
    path.close();
    return path;
  }

繪制六邊形

let hexagon = new Hexagon(centerX, centerY, config.sideLength);
let hexagonPath = hexagon.getPath();
canvasView.on("draw", (canvas) =&gt; {
  canvas.drawColor(canvasBgColor);
  canvas.drawPoint(centerX, centerY, paint);
  canvas.drawPath(hexagonPath, paint);
});

繪制一排六邊形

要繪制一排, 那么六邊形左右兩邊需要是數(shù)直的, 把 getSixPoints 方法里的 sin 和 cos 對調(diào)一下即可

let x = this.centerX + this.sideLength * Math.sin(angle);
let y = this.centerY - this.sideLength * Math.cos(angle);

確定邊界條件

所有六邊形都要在畫板內(nèi), 我們畫左上角第一個六邊形;

計算中心點要考慮的條件

畫筆的寬度
六邊形邊長

let angle = Math.PI / 3;
let firstHexagonCenterX = config.sideLength * Math.sin(angle) + config.paintConfig.width;
let firstHexagonCenterY = config.sideLength + config.paintConfig.width;

考慮兩個相鄰的六邊形連接處

兩個挨著的豎邊, 應(yīng)該只需要畫一條, 那么來計算第二個六邊形的中心位置, 以第一個六邊形為參照物

let secondHexagonCenterX = firstHexagonCenterX + config.sideLength * Math.sin(angle) * 2;
let secondHexagonCenterY = firstHexagonCenterY;

繪制出的兩個六邊形

改了一下寬度, 方便觀察

限制一排六邊形最后一個的邊界

最后一個六邊形的最右側(cè)的邊, 不能超過畫板

let hexagonPaths = [];
let count = 1;
while (1) {
  let nextHexagonCenterX = firstHexagonCenterX + config.sideLength * Math.sin(angle) * 2 * count;
  if (nextHexagonCenterX + config.sideLength * Math.sin(angle) + config.paintConfig.width > canvasWidth) {
    break;
  }
  let nextHexagonCenterY = firstHexagonCenterY;
  let nextHexagon = new Hexagon(nextHexagonCenterX, nextHexagonCenterY, config.sideLength);
  let nextHexagonPath = nextHexagon.getPath();
  hexagonPaths.push(nextHexagonPath);
  count++;
}

for (let i = 0; i < hexagonPaths.length; i++) {
  canvas.drawPath(hexagonPaths[i], paint);
}

畫第二排六邊形

計算第二排第一個六邊形的中心點

let nextRowFirstHexagonCenterX = firstHexagonCenterX + config.sideLength * Math.sin(angle);
let nextRowFirstHexagonCenterY = firstHexagonCenterY + config.sideLength * Math.cos(angle) + config.sideLength;
let nextRowFirstHexagon = new Hexagon(nextRowFirstHexagonCenterX, nextRowFirstHexagonCenterY, config.sideLength);
let nextRowFirstHexagonPath = nextRowFirstHexagon.getPath();

與第一排同理, 畫第二排

繪制多排六邊形

很明顯, 我們要使用循環(huán), 橫著要循環(huán), 豎著也要循環(huán), 那么這個循環(huán)怎么寫呢?

我們一組一組的計算六邊形中心點, 一組有兩排六邊形:

第一排5個
第二排4個

下一組, 往下移動 3 個邊長,

因為第一組, 我們已經(jīng)檢查過畫板右側(cè),

所以, 接下來的計算, 只需要考慮畫板底部, 不需要判斷畫板右側(cè)了;

我們改變的只有縱坐標(biāo)

先畫一組

let firstRow = [];
let secondRow = [];
let firstGroup = [firstRow, secondRow];
let firstRowCount = 0;
while (1) {
  let centerX = firstHexagonCenterX + firstRowCount * config.sideLength * 2 * Math.sin(angle);
  if (centerX > canvasWidth - config.sideLength * Math.sin(angle) - config.paintConfig.width) {
    break;
  }
  let centerY = firstHexagonCenterY;
  firstRow.push(new Hexagon(centerX, centerY, config.sideLength));
  firstRowCount++;
}
/* -------------------------------------------------------------------------- */
let secondRowCount = 0;
while (1) {
  let centerX = firstHexagonCenterX + secondRowCount * config.sideLength * 2 * Math.sin(angle) + config.sideLength * Math.sin(angle);
  if (centerX > canvasWidth - config.sideLength * Math.sin(angle) - config.paintConfig.width) {
    break;
  }
  let centerY = firstHexagonCenterY + config.sideLength + config.sideLength * Math.cos(angle);
  secondRow.push(new Hexagon(centerX, centerY, config.sideLength));
  secondRowCount++;
}
hexagons = firstGroup.flat();
let hexagonPaths = hexagons.map((hexagon) => hexagon.getPath());
/* -------------------------------------------------------------------------- */
canvasView.on("draw", (canvas) => {
  canvas.drawColor(canvasBgColor);
  for (let i = 0; i < hexagonPaths.length; i++) {
    canvas.drawPath(hexagonPaths[i], paint);
  }
});

這是一個二維數(shù)組, 我們用flat抹平成一維數(shù)組

一組一組的計算坐標(biāo)

y坐標(biāo)依次增長3個邊長即可

先計算第一排, 再計算第二排

let row = 1;
while (1) {
  let nextGroupFirstRow = [];
  let nextGroupSecondRow = [];
  let nextGroup = [nextGroupFirstRow, nextGroupSecondRow];
  let firstGroupFirstRow = firstGroup[0];
  let firstGroupFirstHexagon = firstGroupFirstRow[0];
  if (firstGroupFirstHexagon.centerY + config.sideLength * 3 * row > canvasHeight) {
    break;
  }
  nextGroupFirstRow = firstGroupFirstRow.map((hexagon) => {
    let centerX = hexagon.centerX;
    let centerY = hexagon.centerY + config.sideLength * 3 * row;
    nextGroupFirstRow.push(new Hexagon(centerX, centerY, config.sideLength));
  });
  let firstGroupSecondRow = firstGroup[1];
  let firstGroupSecondHexagon = firstGroupSecondRow[0];
  if (firstGroupSecondHexagon.centerY + config.sideLength * 3 * row > canvasHeight) {
    break;
  }
  nextGroupSecondRow = firstGroupSecondRow.map((hexagon) => {
    let centerX = hexagon.centerX;
    let centerY = hexagon.centerY + config.sideLength * 3 * row;
    nextGroupSecondRow.push(new Hexagon(centerX, centerY, config.sideLength));
  });
  groups.push(nextGroup);
  row++;
}
hexagons = groups.flat(2);
let hexagonPaths = hexagons.map((hexagon) => hexagon.getPath());