牙叔教程 简单易懂
界面基础代码
"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);

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





