# AxisRender
**Repository Path**: ruanjunhao/axis-render
## Basic Information
- **Project Name**: AxisRender
- **Description**: 一个基于NDK开发的高性能坐标轴，支持横竖显示，支持高度自定义绘制。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-01-02
- **Last Updated**: 2026-01-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# AxisRender
#### 介绍
一个基于NDK开发的高性能坐标轴，支持横竖显示，支持高度自定义绘制。 它能干什么？
- 尺子
- 温度计
- 视频编辑时间轴
- 音频编辑时间轴+自绘制波形图
#### 截图
#### 软件架构
```
AxisRenderLibrary
├── libs/ # 运行依赖库
└── src/
└── main/
├── cpp/ # C++绘图核心层
└── ets/
├── common/ # Ark-C++桥接层
└── components/ # ArkTS组件层
```
#### 安装教程
```
ohpm install @wcmzllx/axisrenderlibrary
```
#### 使用说明
```typescript
import {
AxisRenderStyleConfig,
AxisStyleConfig2,
CustomizeAxis2,
IAxisLineDecorator,
IAxisLineCalculator,
IndicatorPosition,
AxisOrientation,
ScaleLinePosition,
AxisColorConfig2
} from "@wcmzllx/axisrenderlibrary"
import drawing from "@ohos.graphics.drawing"
// 自定义绘制，自定义绘制高频触发，请勿打印log
class CustomizeDecorator implements IAxisLineDecorator {
onDraw(canvas: drawing.Canvas, style: AxisRenderStyleConfig, _: number, calculator: IAxisLineCalculator): void {
let pen = new drawing.Pen();
pen.setColor({
alpha: 255,
red: 64,
green: 169,
blue: 255
});
pen.setStrokeWidth(2);
let target1 = 20; // 在20位置位置矩形
let x1 = calculator.getAxisByValue(target1);
let target2 = -20; // 在-20的地方绘制圆
let x2 = calculator.getAxisByValue(target2);
let y2 = (style.height!) / 2
// console.log("style.height: " + style.height)
let brush = new drawing.Brush();
brush.setColor({
alpha: 50,
red: 64,
green: 169,
blue: 255
}); // 半透明
canvas.attachBrush(brush);
// 目标1 矩形
canvas.drawRect({
left: x1,
top: 50,
right: x1 + 100,
bottom: 250
});
// 目标2 圆形
canvas.drawCircle(x2, y2, 60);
canvas.detachBrush();
canvas.attachPen(pen);
canvas.drawRect({
left: x1,
top: 50,
right: x1 + 100,
bottom: 250
});
canvas.drawCircle(x2, y2, 60);
canvas.detachPen();
}
}
@Entry
@ComponentV2
struct Index {
@Local orientation: AxisOrientation = AxisOrientation.HORIZONTAL
@Local valueFormat: string = "%.0f℃"
@Local disableZoom: boolean = false
@Local indicatorPosition: IndicatorPosition = IndicatorPosition.CENTER
@Local disableScroll: boolean = false
@Local axisStyleConfig: AxisStyleConfig2 = new AxisStyleConfig2()
@Local axisColorConfig: AxisColorConfig2 = new AxisColorConfig2()
build() {
Column() {
Stack() {
CustomizeAxis2({
drawList: [new CustomizeDecorator()],
max: 100,
min: -100,
valueChangeCallback: (time: number) => {
console.log("CustomizeAxis2: " + time)
},
styleConfig: this.axisStyleConfig,
colorConfig: this.axisColorConfig,
orientation: this.orientation,
valueFormat: this.valueFormat,
disableZoom: this.disableZoom,
indicatorPosition: this.indicatorPosition,
disableScroll: this.disableScroll
})
.width(this.orientation == AxisOrientation.HORIZONTAL ? '80%' : '120vp')
.height(this.orientation == AxisOrientation.HORIZONTAL ? '120vp' : '80%')
}
.width('100%')
.layoutWeight(1)
Column({ space: 12 }) {
DemoItem({
title: "方向",
params: ["HORIZONTAL", "VERTICAL"],
onItemChange: (value: string) => {
this.orientation = value == "HORIZONTAL" ? AxisOrientation.HORIZONTAL : AxisOrientation.VERTICAL
}
})
DemoItem({
title: "格式",
params: ["%.1f ℃", "%.0f 米", "%.1f km/h"],
onItemChange: (value: string) => {
this.valueFormat = value
}
})
DemoItem({
title: "指针",
params: ["CENTER", "START", "END"],
onItemChange: (value: string) => {
this.indicatorPosition = value == "CENTER" ? IndicatorPosition.CENTER : value == "START" ? IndicatorPosition.START : IndicatorPosition.END
}
})
DemoItem({
title: "刻度",
params: ["CENTER", "START", "END"],
onItemChange: (value: string) => {
this.axisStyleConfig.position = value == "CENTER" ? ScaleLinePosition.CENTER : value == "START" ? ScaleLinePosition.START : ScaleLinePosition.END
}
})
// DemoItem({
// title: "指针宽度",
// params: ["3", "10"],
// onItemChange: (value: string) => {
// this.axisStyleConfig.indicatorWidth = parseInt(value)
// }
// })
DemoItem({
title: "刻度颜色",
params: ["#FF0000", "#00FF00", "#0000FF"],
onItemChange: (value: string) => {
this.axisColorConfig.tickLineColor = value
}
})
}
.padding(16)
.alignItems(HorizontalAlign.Start)
.width('100%')
}
.justifyContent(FlexAlign.Center)
.height('100%')
.width('100%')
}
}
@ComponentV2
struct DemoItem {
@Param title: string = ""
@Param params: Array = []
@Event onItemChange: (value: string) => void = (value: string) => {
}
build() {
Row({ space: 8 }) {
Text(this.title + ": ")
ForEach(this.params, (item: ESObject) => {
Button(item, { type: ButtonType.Normal })
//.type(ButtonType.Normal)
.margin(0)
.height(24)
.borderRadius(6)
.borderColor(Color.Orange)
.fontSize(12)
.borderWidth(1)
.padding({
left: 8,
right: 8,
})
.backgroundColor(Color.Transparent)
.fontColor(Color.Orange)
.onClick(() => {
this.onItemChange(item)
})
})
}
}
}
```
#### 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---------------------|--------------------------------------|----------------------------|--------------------------|
| value | number | 0 | 当前值 |
| scrollCoefficient | number | 1 | 滚动系数 |
| limiting | number | 0.1 | 回调限流（0.1即移动小刻度的1/10触发一次） |
| styleConfig | AxisStyleConfig \| AxisStyleConfig2 | new | 样式配置 |
| colorConfig | AxisColorConfig \| AxisColorConfig2 | new | 颜色配置 |
| max | number | Number.MAX_VALUE | 滑动限制的最大值 |
| min | number | 0 | 滑动限制的最小值 |
| drawList | Array | [] | 自定义绘制列表 |
| disableZoom | boolean | false | 禁止缩放 |
| disableScroll | boolean | false | 禁止滑动 |
| indicatorPosition | IndicatorPosition | IndicatorPosition.CENTER | 指示器位置 |
| valueFormat | string | "%.1f" | 标签格式化模板（默认保留1位小数） |
| standardScale | StandardScale | new StandardScale() | 标准缩放配置（一个刻度的标准像素） |
| orientation | AxisOrientation | AxisOrientation.HORIZONTAL | 坐标轴方向（默认水平） |
| valueChangeCallback | (value: number) => void | (_: number) => {} | 值变更回调事件 |
#### 运行环境
- 编译环境：6.0.1.112 (API Version 21 Release)
- 最低兼容：5.0.5(17)