HarmonyOS CanvasRenderingContext2D绘制刮刮卡特效的问题

CanvasRenderingContext2D绘制刮刮卡特效动画的问题设置this.context.globalCompositeOperation = 'xor’时候随着手势的刮开效果出现问题

代码如下：

import image from '@ohos.multimedia.image' 
 
@Component 
export struct FillStyleExample { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  // private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 
  @State x: number = 0 
  @State y: number = 0 
  @State x_left: number = 0 
  @State y_top: number = 0 
  @State iconVisible: boolean = false 
  build() { 
    Stack({ alignContent: Alignment.TopStart }) { 
      Canvas(this.context) 
        .width('100%') 
        .height('100%') 
        .backgroundColor(Color.Transparent) 
        .onReady(() => { 
          this.getPixmapFromMedia($r('app.media.test')).then((image) => { 
            this.context.drawImage(image, this.x, this.y) 
          }) 
          this.context.lineWidth = 40 
          this.context.beginPath() 
          this.context.fillStyle = Color.Transparent 
          this.context.lineCap = 'round' //round square 
          this.context.globalCompositeOperation = 'xor' //xor 
 
        }) 
      Image($r('app.media.icon')) 
        .width('30') 
        .height('30') 
        .margin({ 
          left: this.x_left, 
          top: this.y_top 
        }) 
        .visibility(this.iconVisible ? Visibility.Visible : Visibility.None) 
 
    } 
    .width('100%') 
    .height('100%') 
    .gesture( 
      PanGesture({ direction: PanDirection.All }) 
        .onActionStart((event) => { 
          this.context?.moveTo(event.fingerList[0].localX, event.fingerList[0].localY) 
        }) 
        .onActionUpdate((event) => { 
          this.iconVisible = true 
          this.x_left = event.fingerList[0].localX 
          this.y_top = event.fingerList[0].localY 
          this.context?.lineTo(this.x_left, this.y_top) 
          this.context?.stroke() 
          this.context?.restore() 
        }) 
        .onActionEnd((event) => { 
          this.iconVisible = false 
        })) 
 
  } 
 
  private async getPixmapFromMedia(resource: Resource) { 
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 
      bundleName: resource.bundleName, 
      moduleName: resource.moduleName, 
      id: resource.id 
    }) 
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) 
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ 
      desiredPixelFormat: image.PixelMapFormat.RGB_565, 
      desiredSize: { 
        width: 1080, 
        height: 1170 
      } 
    }) 
    await imageSource.release() 
    return createPixelMap 
  } 
}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.

HarmonyOS

Heiang

2024-08-08 18:04:36

1294浏览

回答 1

按赞同

按时间

FengTianYa

import image from '@ohos.multimedia.image' 
 
@Entry 
@Component 
export struct Page { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State x: number = 0 
  @State y: number = 0 
  @State x_left: number = 0 
  @State y_top: number = 0 
  @State iconVisible: boolean = false 
  isDrawing: boolean = false 
  lastX: number = 0 
  lastY: number = 0 
 
  draw(ctx: CanvasRenderingContext2D, fromX: number, fromY: number, toX: number, toY: number) { 
    // 使用贝塞尔曲线来绘制平滑路径 
    ctx.beginPath() 
    ctx.moveTo(fromX, fromY) 
    ctx.lineTo(toX, toY) 
    ctx.strokeStyle = '#000' 
    ctx.lineWidth = 40 
    ctx.lineCap = 'round' 
    ctx.lineJoin = 'round' 
    ctx.stroke() 
    ctx.closePath() 
  } 
 
  scratch(event: TouchEvent) { 
    if (!this.isDrawing) { 
      return 
    } 
 
    const touch = event.touches[0] 
    const x = touch.x 
    const y = touch.y 
 
    this.draw(this.context, this.lastX, this.lastY, x, y) 
 
    this.lastX = x 
    this.lastY = y 
  } 
 
  build() { 
    Stack({ alignContent: Alignment.TopStart }) { 
      Image($r("app.media.bg")).width(px2vp(698)) 
      Canvas(this.context) 
        .width('100%') 
        .height('100%') 
        .backgroundColor(Color.Transparent) 
        .onReady(() => { 
          this.getPixmapFromMedia($r('app.media.img')).then((image) => { 
            this.context.drawImage(image, this.x, this.y) 
            // 设置刮开涂层效果,注意需要先绘制背景在设置 
            this.context.globalCompositeOperation = 'destination-out' 
          }) 
        }) 
        .onTouch((event) => { 
          switch (event.type) { 
            case 0: 
              this.isDrawing = true 
              const touch = event.touches[0] 
              this.lastX = touch.x 
              this.lastY = touch.y 
              this.scratch(event) 
              break 
            case 1: 
              this.isDrawing = false 
              break 
            case 2: 
              this.scratch(event) 
              break1.
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.

2024-08-08 20:54:07

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS CanvasRenderingContext2D绘制刮刮卡特效的问题

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