极客观点
项目管理
HarmonyOS
横竖屏切换后，canvas无法正常显示，麻烦帮忙看一下
见demo文件
import { mediaquery,window } from '@kit.ArkUI';
import { ArrayList, JSON } from '@kit.ArkTS'
import { Animator, AnimatorResult, MeasureText } from '@kit.ArkUI';
interface TtsLineData {
ttsWidth: number; //最大宽度
ttsHeight: number; //最大宽度
ttsX: number
ttsY: number
ttsStartIndex: number
ttsEndIndex: number
text: string //文字
delta: number
}
@ComponentV2
export struct TtsComponent {
@Param @Require progress: number // 0~1.0
@Param @Require text: string
@Param textSize = 14
@Param textLines = 3
@Param textColor = "#ffffff"
@Param textHighlightColor = "#00000000"
@Local offsetY: number = 0
@Event sizeChange: (width: number, height: number) => void
private isFinished: boolean = false;
//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
private settings: RenderingContextSettings = new RenderingContextSettings(true)
//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private viewWidth: number = 0
private viewHeight: number = 0
// private contentWidth = 0
private contentHeight = 0
// private startOffsetX = 0
private startOffsetY = 0
private fontWeight = 'bold';
private fontFamily = 'HarmonyHeiTi';
private canScroll = true
private isInTouched = false
// 超过边界功能不太丝滑，先不管了吧
// 超过边界距离
private overScrollDis = 0;
// 超过边界回滚时间
private duration = 0;
// 平滑滚动时间
private smoothDuration = 500;
// 任务ID
private timeOutTaskId = -1
/**
* tts分割数据
*/
private ttsData = new ArrayList<TtsLineData>()
/**
* 分割后的tts文字总长度
*/
private ttsLength = 0
/**
* 动画
*/
private animator: AnimatorResult | undefined;
/**
* 进度监听
*/
@Monitor("progress")
onProgressChanged() {
// console.log("onProgress==" + this.progress)
if (this.progress > 1.0) {
this.isFinished = true
} else {
this.isFinished = false
}
this.draw()
}
@Monitor("offsetY")
onOffsetChanged() {
// console.log("onOffsetChanged==" + this.offsetY)
this.draw()
}
/**
* 文本监听
*/
@Monitor("text")
onTextChanged() {
this.draw()
}
/**
* 绘制
*/
private draw() {
// this.context.fillRect(0, 30, 100, 100)
// this.context.fillText("hello world", 10, 10, 100)
this.context.clearRect(0, 0, this.viewWidth, this.viewHeight)
console.log("currentIndex:" + this.progress + ",offset:" + this.offsetY)
// 绘制view背景
// this.drawRoundedRect(0, 0, this.viewWidth, this.viewHeight, this.radius, this.backGroundColor)
// // 绘制content背景
// this.drawRoundedRect(this.paddingLeft, this.paddingTop, this.contentRectWidth, this.contentRectHeight, this.radius,
// this.contentColor)
// 对画布进行裁剪 （超过content宽高的其他内容，都被裁剪掉）
this.context.save()
this.context.beginPath()
this.context.rect(0, 0, this.viewWidth, this.viewHeight)
this.context.closePath()
this.context.clip()
// 绘制文字
let progress = this.progress
if (this.isFinished) {
progress = 1.0
}
let currentIndex = progress * this.ttsLength
for (let ttsDataElement of this.ttsData) {
if (ttsDataElement.ttsStartIndex < currentIndex && currentIndex <= ttsDataElement.ttsEndIndex) { // 正在读
this.context.save()
this.context.fillStyle = this.textColor
this.context.fillText(ttsDataElement.text, ttsDataElement.ttsX, ttsDataElement.ttsY + this.offsetY,
ttsDataElement.ttsWidth)
this.context.restore()
} else if (ttsDataElement.ttsEndIndex < currentIndex) { // 已读
this.context.save()
this.context.fillStyle = this.textHighlightColor
this.context.fillText(ttsDataElement.text, ttsDataElement.ttsX, ttsDataElement.ttsY + this.offsetY,
ttsDataElement.ttsWidth)
this.context.restore()
} else { // 未读
this.context.save()
this.context.fillStyle = this.textColor
this.context.fillText(ttsDataElement.text, ttsDataElement.ttsX, ttsDataElement.ttsY + this.offsetY,
ttsDataElement.ttsWidth)
this.context.restore()
}
}
// 绘制进度
this.drawProgress()
}
private drawProgress() {
let progress = this.progress
if (this.isFinished) {
progress = 1.0
}
let currentIndex = progress * this.ttsLength
for (let ttsDataElement of this.ttsData) {
if (currentIndex >= ttsDataElement.ttsStartIndex && currentIndex <= ttsDataElement.ttsEndIndex) { // 正在读
this.context.save()
// 进度
let progress =
(currentIndex - ttsDataElement.ttsStartIndex) / (ttsDataElement.ttsEndIndex - ttsDataElement.ttsStartIndex)
let currentWidth = ttsDataElement.ttsWidth * progress
// console.log("drawProgress --->" + currentIndex + ",-->" + currentWidth)
this.context.beginPath()
this.context.rect(ttsDataElement.ttsX,
ttsDataElement.ttsY - ttsDataElement.ttsHeight + this.offsetY + ttsDataElement.delta, currentWidth,
ttsDataElement.ttsHeight)
this.context.closePath()
this.context.clip()
this.context.fillStyle = this.textHighlightColor
this.context.fillText(ttsDataElement.text, ttsDataElement.ttsX, ttsDataElement.ttsY + this.offsetY,
ttsDataElement.ttsWidth)
// this.context.fillRect(ttsDataElement.ttsX,
// ttsDataElement.ttsY - ttsDataElement.ttsHeight + this.offsetY + ttsDataElement.delta, currentWidth,
// ttsDataElement.ttsHeight)
this.context.restore()
// 自动滚动画布(单行滚动)
if (!this.isInTouched && !this.animator) {
// console.debug("跟随滚动")
this.smoothScrollTo(this.getOffsetY(ttsDataElement, currentIndex), this.smoothDuration, "smooth")
}
}
}
}
private calOffsetY(): number {
let currentIndex = this.progress * this.ttsLength
// console.log("drawProgress->currentIndex:" + currentIndex)
for (let ttsDataElement of this.ttsData) {
if (currentIndex >= ttsDataElement.ttsStartIndex && currentIndex <= ttsDataElement.ttsEndIndex) { // 正在读
return this.getOffsetY(ttsDataElement, currentIndex)
}
}
return 0
}
private getOffsetY(ttsDataElement: TtsLineData, currentIndex: number) {
let halfViewHeight = this.viewHeight / 2.0
let progress =
(currentIndex - ttsDataElement.ttsStartIndex) / (ttsDataElement.ttsEndIndex - ttsDataElement.ttsStartIndex)
if (!this.canScroll) {
return 0
}
if ((ttsDataElement.ttsY - ttsDataElement.ttsHeight) > halfViewHeight) {
let offY = halfViewHeight - ttsDataElement.ttsY + ttsDataElement.ttsHeight - (ttsDataElement.ttsHeight * progress)
if (offY < (-this.contentHeight + this.viewHeight)) {
return (-this.contentHeight + this.viewHeight)
} else {
return offY
}
} else {
return 0
}
}
// 平滑滚动
private smoothScrollTo(desOffsetY: number, duration: number, easing: string) {
if (this.animator) {
this.animator.finish();
this.animator = undefined
}
this.animator = Animator.create({
duration: duration,
easing: easing,
delay: 0,
fill: 'forwards',
direction: 'normal',
iterations: 1,
begin: this.offsetY,
end: desOffsetY
});
// console.info('[smoothScrollTo] curOffset:' + this.offsetY + ',desOffset:' + desOffsetY + ",duration:" + duration);
this.animator.onFrame = (value) => {
// console.info('onframe:' + value);
this.offsetY = value
};
this.animator.onCancel = () => {
// console.log("oncancel:" + this.offsetY)
this.offsetY = 0
};
this.animator.onFinish = () => {
this.animator = undefined
};
this.animator.play();
}
private judgeEdge(dest: number): number {
if (dest <= -this.contentHeight - this.overScrollDis + this.viewHeight) {
dest = -this.contentHeight - this.overScrollDis + this.viewHeight
} else if (dest > this.overScrollDis) {
dest = this.overScrollDis
}
return dest
}
onMeasureSize(selfLayoutInfo: GeometryInfo, children: Measurable[], constraint: ConstraintSizeOptions): SizeResult {
console.log("tts component - onMeasureSize" + JSON.stringify(selfLayoutInfo) + JSON.stringify(constraint))
console.log("onMeasureSize - child:" + JSON.stringify(children))
console.log("onMeasureSize - child:" + children.length)
let top: number = 0
let right: number = 0
let left: number = 0
let bottom: number = 0
if (selfLayoutInfo.padding.top) {
top = Number.parseFloat(selfLayoutInfo.padding.top!.toLocaleString())
}
if (selfLayoutInfo.padding.right) {
right = Number.parseFloat(selfLayoutInfo.padding.right!.toLocaleString())
}
if (selfLayoutInfo.padding.left) {
left = Number.parseFloat(selfLayoutInfo.padding.left!.toLocaleString())
}
if (selfLayoutInfo.padding.bottom) {
bottom = Number.parseFloat(selfLayoutInfo.padding.bottom!.toLocaleString())
}
this.context.font = this.fontWeight + ' ' + this.textSize + 'vp ' + this.fontFamily;
this.context.fillStyle = this.textColor;
let width = selfLayoutInfo.width
if (constraint.maxWidth) {
width = Number.parseFloat(constraint.maxWidth.toLocaleString())
}
// console.log("size:" + JSON.stringify(size))
let maxWidth = width - (left + bottom)
let words = this.text.split('\n');
this.ttsLength = 0
this.ttsData.clear()
if (this.animator) {
this.animator.finish()
this.animator = undefined
}
if (this.timeOutTaskId != -1) {
clearTimeout(this.timeOutTaskId)
this.timeOutTaskId = -1
}
let metrics = this.context.measureText("testLine");
let y = metrics.fontBoundingBoxAscent
for (let i = 0; i < words.length; i++) {
let line = words[i];
let wordOnLine = ""
let lineStart = this.ttsLength
let lineEnd = this.ttsLength
for (let n = 0; n < line.length; n++) {
let testLine = wordOnLine + line[n] + ' ';
let metrics = this.context.measureText(testLine);
// console.log("TAG----->" + testLine + "---->" + JSON.stringify(metrics))
let testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
this.ttsData.add({
ttsWidth: testWidth,
ttsHeight: metrics.height,
text: wordOnLine,
ttsStartIndex: lineStart,
ttsEndIndex: lineEnd,
ttsX: 0,
ttsY: y,
delta: metrics.fontBoundingBoxDescent
})
y += metrics.height;
wordOnLine = line[n] + ' ';
lineStart = lineEnd
} else {
lineEnd++
this.ttsLength = lineEnd
wordOnLine = testLine;
}
if (n == line.length - 1) {
this.ttsData.add({
ttsWidth: testWidth,
ttsHeight: metrics.height,
text: wordOnLine,
ttsStartIndex: lineStart,
ttsEndIndex: lineEnd,
ttsX: 0,
ttsY: y,
delta: metrics.fontBoundingBoxDescent
})
y += metrics.height;
}
}
}
y += metrics.fontBoundingBoxDescent - metrics.height
if (y < this.viewHeight) {
this.contentHeight = y
this.canScroll = false;
} else {
this.contentHeight = y
this.canScroll = true;
}
this.viewWidth = maxWidth
this.viewHeight = Math.abs(metrics.height) * (this.textLines)
// console.log("ttsData:" + JSON.stringify(this.ttsData))
children.forEach((child) => {
child.measure({
minWidth: this.viewWidth,
maxWidth: this.viewWidth,
minHeight: this.viewHeight,
maxHeight: this.viewHeight,
})
})
console.log("width:" + (this.viewWidth + (left + right)))
console.log("height:" + (this.viewHeight + (top + bottom)))
return {
width: this.viewWidth + (left + right),
height: this.viewHeight + (top + bottom)
}
}
onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {
console.log("child-onPlaceChildren" + JSON.stringify(selfLayoutInfo))
children.forEach((child) => {
child.layout({ x: 0, y: 0 })
})
}
build() {
Canvas(this.context)
.onReady(() => {
console.log("onReady")
this.draw()
})
.gesture(PanGesture({ direction: PanDirection.Vertical })
.onActionStart((ev) => {
// this.context.fillRect(0, 30, 100, 100)
// this.context.fillText("hello world", 10, 10, 100)
// console.log("onActionStart" + JSON.stringify(ev))
this.startOffsetY = ev.offsetY
if (this.animator) {
this.animator.finish();
this.animator = undefined
}
this.isInTouched = true
if (this.timeOutTaskId != -1) {
clearTimeout(this.timeOutTaskId)
this.timeOutTaskId = -1
}
})
.onActionUpdate((ev) => { // 直接滚动
// console.log("onActionUpdate" + JSON.stringify(ev))
if (!this.canScroll) {
return
}
let dest = this.offsetY + (ev.offsetY - this.startOffsetY)
this.offsetY = this.judgeEdge(dest)
// console.log("update-->offsetY-->" + this.offsetY)
this.startOffsetY = ev.offsetY
}).onActionEnd((ev) => { // 惯性滚动、回滚
// console.log("onActionEnd" + JSON.stringify(ev))
if (!this.canScroll) {
return
}
let dest = this.judgeEdge(this.offsetY + (ev.velocityY + 0) * (this.smoothDuration / 1000.0) * 0.5)
// 滚动后，1s 后自动回滚
if (!this.animator) {
this.timeOutTaskId = setTimeout(() => {
// console.debug("回滚啦")
this.isInTouched = false
this.smoothScrollTo(this.calOffsetY(), this.smoothDuration, "fast-out-slow-in")
}, this.smoothDuration + 500)
}
// console.log("开始惯性滑动：" + dest)
// 惯性滑动
this.smoothScrollTo(dest, this.smoothDuration, "fast-out-slow-in")
}))
}
}
@Entry
@ComponentV2
struct Index {
pageStack: NavPathStack = new NavPathStack()
@Local progress:number = 0
@Local ttsText:string = "hello world - 竖屏1\n" +
"hello world - 竖屏2\n" +
"hello world - 竖屏3\n" +
"hello world - 竖屏4\n" +
"hello world - 竖屏5\n" +
"hello world - 竖屏6\n" +
"hello world - 竖屏7\n"
orientation: window.Orientation = window.Orientation.PORTRAIT
startCountDown() {
console.log("startCountDown:" + this.progress)
if (this.progress <= 1.0) {
this.progress += 0.05
} else {
return
}
setTimeout(() => {
this.startCountDown()
}, 200)
}
private listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
aboutToAppear(): void {
this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {
console.log("change:" + JSON.stringify(mediaQueryResult))
if (mediaQueryResult.matches) {
this.orientation = window.Orientation.LANDSCAPE
} else {
this.orientation = window.Orientation.PORTRAIT
}
this.ttsText = "hello world - 竖屏1\n" +
"hello world - 竖屏2\n" +
"hello world - 竖屏3\n" +
"hello world - 竖屏4\n" +
"hello world - 竖屏5\n" +
"hello world - 竖屏6\n" +
"hello world - 竖屏7\n" + Math.random()
});
}
build() {
Navigation(this.pageStack) {
Column() {
Column() {
Button('进度条').onClick((event: ClickEvent) => {
this.progress = 0
this.startCountDown()
})
Button('切换屏幕').onClick((event: ClickEvent) => {
let mWindow = window.getLastWindow(getContext(this))
mWindow.then(async win => {
let orien = 1
if (this.orientation == 1) {
orien = 2
}
await win.setPreferredOrientation(orien)
})
})
TtsComponent({
progress: this.progress,
textLines:3,
text: this.ttsText,
textColor: "#ff00ff",
textHighlightColor: "#ffffff"
}) .backgroundColor("#ffff00")
.borderRadius(10)
.padding(10)
}
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.width('100%')
}
.title('Main')
.height('100%')
.width('100%')
}
}
因为Navigation组件通过mode属性设置页面的显示模式，默认为自适应模式，自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。
可以将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。此时Navigation组件导航栏与内容区独立显示，相当于两个页面。
或者不使用Navigation组件
对应文档链接：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/cta-usage-of-the-navigation-component-V5\#设置页面显示模式
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5\#navigationmode9枚举说明