HarmonyOS CustomDIalog如何实现独自横屏，不影响别的页面

签名弹窗是竖屏的是CustomDialog想让它横屏展示且不影响别的页面，如何实现？

HarmonyOS

zxjiu

2024-12-24 16:56:28

浏览

回答 1

按赞同

按时间

fox280

横屏签名示例参考：

Index.ets
import CircleBrush from '../draw/CircleBrush';
import DrawInvoker from '../draw/DrawInvoker';
import DrawPath from '../draw/DrawPath';
import { IBrush } from '../draw/IBrush';
import NormalBrush from '../draw/NormalBrush';
import Paint from '../draw/Paint';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
export struct DrawCanvas {
  @State @Watch('createDraw') isDrawing: boolean = false //标识是否可以绘制
  @State unDoDraw: boolean = false; //撤销操作
  @State redoDraw: boolean = false; //重做操作
  @State drawHeight: number = 0;
  @State drawWidth: number = 0;
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private drawInvoker: DrawInvoker = new DrawInvoker();
  private path2Db: Path2D = new Path2D()
  private mPaint: Paint = new Paint(); //画笔对象
  private mPath: DrawPath = new DrawPath(); //绘制路径
  private mBrush: IBrush = new NormalBrush(); //笔触对象

  /**
   * 默认为黑色
   */
  async aboutToAppear() {
    this.mPaint = new Paint();
    this.mPaint.setStrokeWidth(3);
    this.mPaint.setColor(Color.Blue)
    this.mBrush = new NormalBrush();
  }

  /**
   * 添加一条绘制路径
   * @param path
   */
  add(path: DrawPath): void {
    this.drawInvoker.add(path);
  }

  /**
   * 重做上一步撤销的绘制
   */
  redo(): void {
    this.drawInvoker.redo();
    this.isDrawing = true;
  }

  /**
   * 撤销上一步
   */
  unDo() {
    this.drawInvoker.undo();
    this.isDrawing = true
  }

  /**
   * 是否可以撤销
   */
  canUnDo(): boolean {
    return this.drawInvoker.canUndo();
  }

  /**
   * 是否可以重做
   */
  canRedo(): boolean {
    return this.drawInvoker.canRedo();
  }

  createDraw() {
    //绘制背景
    if (this.isDrawing) {
      //从新绘制画板颜色，从而到达重新绘制效果
      this.context.fillStyle = '#ffff00'
      this.context.fillRect(0, 0, this.context.width, this.context.height);
      this.drawInvoker.execute(this.context)
      this.isDrawing = false;
    }
  }

  onTouchListener(event: TouchEvent) {
    if (event.type === TouchType.Down) {
      this.mPath = new DrawPath();
      this.mPath.paint = this.mPaint;
      console.info('onTouchListener DrawPath == ' + this.mPath.paint.strokeStyle)
      this.mPath.path = new Path2D();
      this.mBrush.down(this.mPath.path, event.touches[0].x, event.touches[0].y)
    }
    if (event.type === TouchType.Up) {
      this.mBrush.up(this.mPath.path, event.touches[0].x, event.touches[0].y)
      //添加路径
      this.add(this.mPath);
      this.isDrawing = true;
      this.redoDraw = false;
      this.unDoDraw = true;
    }
    if (event.type === TouchType.Move) {
      this.mBrush.move(this.mPath.path, event.touches[0].x, event.touches[0].y)
    }
  }

  /**
   * 切换红色笔
   */
  drawRedOnClick() {
    this.mPaint = new Paint();
    this.mPaint.setStrokeWidth(3);
    this.mPaint.setColor(Color.Red)
  }

  /**
   * 切换绿色
   */
  drawGreenOnClick() {
    this.mPaint = new Paint();
    this.mPaint.setStrokeWidth(3);
    this.mPaint.setColor(Color.Green)
  }

  /**
   * 切换为蓝色
   */
  drawBlueOnClick() {
    this.mPaint = new Paint();
    this.mPaint.setStrokeWidth(3);
    this.mPaint.setColor(Color.Blue)
  }

  /**
   * 原型笔触
   */
  drawBrushCircle() {
    this.mBrush = new CircleBrush();
  }

  /**
   * 正常笔触
   */
  drawBrushNormal() {
    this.mBrush = new NormalBrush();
  }

  /**
   * 撤销操作
   */
  drawOperateUndo() {
    this.unDo();
    if (!this.canUnDo()) {
      this.unDoDraw = false
    }
    this.redoDraw = true;
  }

  /**
   * 重做操作
   */
  drawOperateRedo() {
    this.redo();
    if (!this.canRedo()) {
      this.redoDraw = false;
    }
    this.unDoDraw = true;
  }

  onPageShow(): void {
    window.getLastWindow(getContext(this), (err: BusinessError, win) => {
      win.setPreferredOrientation(window.Orientation.LANDSCAPE)
    });
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onTouch(this.onTouchListener.bind(this))
        .width('100%')
        .layoutWeight(1)
      Column() {
        // Row() {
        // Button('红色', { type: ButtonType.Normal, stateEffect: true })
        // .borderRadius(8)
        // .backgroundColor(0x317aff)
        // .height(60)
        // .margin({ right: 4 })
        // .layoutWeight(1)
        // .onClick(() => {
        // this.drawRedOnClick();
        // })
        //
        // Button('绿色', { type: ButtonType.Normal, stateEffect: true })
        // .borderRadius(8)
        // .backgroundColor(0x317aff)
        // .layoutWeight(1)
        // .margin({ left: 4, right: 4 })
        // .height(60)
        // .onClick(() => {
        // this.drawGreenOnClick();
        // })
        //
        // Button('蓝色', { type: ButtonType.Normal, stateEffect: true })
        // .borderRadius(8)
        // .backgroundColor(0x317aff)
        // .layoutWeight(1)
        // .margin({ left: 4, right: 4 })
        // .height(60)
        // .onClick(() => {
        // this.drawBlueOnClick();
        // })
        // }
        // .width('90%')
        // .margin({ top: 8, bottom: 4 })
        // .alignItems(VerticalAlign.Center)

        // Row() {
        // Button('普通笔刷', { type: ButtonType.Normal, stateEffect: true })
        // .borderRadius(8)
        // .backgroundColor(0x317aff)
        // .height(60)
        // .margin({ right: 4 })
        // .layoutWeight(1)
        // .onClick(async () => {
        // this.drawBrushNormal();
        // })
        //
        // Button('圆形笔刷', { type: ButtonType.Normal, stateEffect: true })
        // .borderRadius(8)
        // .backgroundColor(0x317aff)
        // .layoutWeight(1)
        // .margin({ left: 4, right: 4 })
        // .height(60)
        // .onClick(async () => {
        // this.drawBrushCircle();
        // })
        // }
        // .margin({ top: 4, bottom: 4 })
        // .width('90%')
        // .alignItems(VerticalAlign.Center)

        Row() {
          Button('撤销', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .backgroundColor(0x317aff)
            .height(60)
            .margin({ right: 4 })
            .enabled(this.unDoDraw)
            .layoutWeight(1)
            .onClick(async () => {
              this.drawOperateUndo();
            })

          Button('重绘', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .backgroundColor(0x317aff)
            .layoutWeight(1)
            .enabled(this.redoDraw)
            .margin({ left: 4, right: 4 })
            .height(60)
            .onClick(async () => {
              this.drawOperateRedo();
            })

        }
        .width('90%')
        .margin({ top: 4, bottom: 8 })
        .alignItems(VerticalAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.

// ets/draw/CircleBrush.ets代码
import { IBrush } from './IBrush';

export default class CircleBrush implements IBrush {
  down(path: Path2D, x: number, y: number) {
    path.moveTo(x, y);
  }

  move(path: Path2D, x: number, y: number) {
    path.arc(x, y, 3, 0, 6.28);
  }

  up(path: Path2D, x: number, y: number) {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// ets/draw/DrawInvoker.ets代码
import List from '@ohos.util.List';
import DrawPath from './DrawPath';

export default class DrawInvoker {
  //绘制列表
  private drawPathList: List<DrawPath> = new List<DrawPath>();
  //重做列表
  private redoList: List<DrawPath> = new List<DrawPath>();

  /**
   * 添加绘制路径
   */
  add(command: DrawPath): void {
    this.redoList.clear();
    this.drawPathList.add(command);
  }

  /**
   * 撤销上一步命令
   */
  undo(): void {
    if (this.drawPathList.length > 0) {
      let undo: DrawPath = this.drawPathList.get(this.drawPathList.length - 1);
      this.drawPathList.removeByIndex(this.drawPathList.length - 1);
      //撤销
      undo.unDo();
      this.redoList.add(undo);
    }
  }

  /**
   * 重做上一步命令
   */
  redo(): void {
    if (this.redoList.length > 0) {
      let redoCommand = this.redoList.get(this.redoList.length - 1);
      this.redoList.removeByIndex(this.redoList.length - 1);
      this.drawPathList.add(redoCommand);
    }
  }

  //执行命令
  execute(context: CanvasRenderingContext2D) {
    //进行绘制
    if (this.drawPathList != null) {
      this.drawPathList.forEach(element => {
        element.draw(context)
      });
    }
  }

  /**
   * 是否可以重做
   */
  canRedo(): boolean {
    return this.redoList.length > 0;
  }

  /**
   * 是否可以撤销
   */
  canUndo() {
    return this.drawPathList.length > 0;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

// ets / draw / DrawPath.ets代码
import { IDraw } from './IDraw';
import Paint from './Paint';

/**
 * 绘制的路径
 */
export default class DrawPath implements IDraw {
  public paint: Paint = new Paint();
  //绘制画笔
  public path: Path2D = new Path2D();

  //绘制的路径

  draw(context: CanvasRenderingContext2D) {
    context.lineWidth = this.paint.lineWidth;
    console.info('DrawPath == ' + this.paint.strokeStyle)
    context.strokeStyle = this.paint.strokeStyle
    context.stroke(this.path)
  }

  unDo() {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

// ets/draw/IBrush.ets代码
export interface IBrush {
  /**
   * 触电接触时
   */
  down(path: Path2D, x: number, y: number): void;

  /**
   * 触电移动时
   */
  move(path: Path2D, x: number, y: number): void;

  /**
   * 触点停止时
   * @param x
   * @param y
   */
  up(path: Path2D, x: number, y: number): void;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

// ets/draw/NormalBrush.ets代码
import { IBrush } from './IBrush';

export default class NormalBrush implements IBrush {
  down(path: Path2D, x: number, y: number) {
    path.moveTo(x, y);
  }

  move(path: Path2D, x: number, y: number) {
    path.lineTo(x, y);
  }

  up(path: Path2D, x: number, y: number) {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// ets/draw/Paint.ets代码
export default class Paint {
  public lineWidth: number = 0;
  public strokeStyle: number = 0;
  // public textAlign:CanvasTextAlign = new CanvasTextAlign();

  public font: string = ''

  setStrokeWidth(strokeWidth: number) {
    this.lineWidth = strokeWidth;
  }

  setColor(color: number) {
    this.strokeStyle = color
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

2024-12-24 19:24:06

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS CustomDIalog如何实现独自横屏，不影响别的页面

订阅鸿蒙技术特刊，精选内容抢先看