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

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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 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%')
  }
}
// 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) {

  }
}
// 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;
  }
}
// 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() {

  }
}
// 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;
}
// 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) {

  }
}
// 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
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
page页面如何设置为显示
1751浏览 • 1回复 待解决
HarmonyOS video如何播放?
318浏览 • 1回复 待解决
HarmonyOS 如何让app支持
14浏览 • 1回复 待解决
openharmony jsFA 如何显示?
7325浏览 • 1回复 待解决
inner join 左右顺序为何不影响结果?
2554浏览 • 1回复 待解决
HarmonyOS 播放问题
390浏览 • 1回复 待解决
HarmonyOS 如何实现页面?
289浏览 • 1回复 待解决
如何获取当前是还是竖啊?
4955浏览 • 1回复 待解决
HarmonyOS webView视频展示
33浏览 • 1回复 待解决
HarmonyOS 后布局问题
84浏览 • 1回复 待解决
如何设置屏幕方向为
1315浏览 • 1回复 待解决